学園祭Web開発の現場とPHPのこれまでとこれから ── 技術選定と教育から語る / PHP Conference Japan 2023

私は学生時代に学園祭実行委員会に所属し、PHPを用いた学園祭Webサイトの開発・運用や情シス業務に携わっていました。その頃の経験を振り返り、学園祭というドメインならではのWeb開発の過去と未来に触れつつ、一般のエンジニアでも他人事ではない技術選定や教育に関する話をします。

Transcript

1. 学園祭Web開発の現場とPHPの これまでとこれから ── 技術選定と教育から語る 2023-10-08 (Sun.) PHP Conference Japan 2023 1 Arthur
2. 自己紹介 Arthur 株式会社はてなアプリケーションエンジニア 2022年新卒入社（2年目） id:arthur-1 @Arthur1__ https://blog.arthur1.dev/ 2
3. 3 お仕事の様子はこちらをチェック👇 仮説検証サイクルでユーザーの声を高速に叶える「キカク組」の取り組み / Mackerel Drink Up #11
4. 学生時代の話 東京工業大学で学園祭実行委員をしていた Webサイト制作&情シスを担う部署に所属 ▶ 規模感 来場者: 4万人 サイト年間 PV: 50万 4
5. PHP 書いてました 自分は PHP で動的な部分を作っていた： • FuelPHP で MVP（Model-View-Presenter） • 認証基盤 • 参加団体の各種申請フォーム • グランプリ企画投票システム など 5
6. おしながき 学園祭Web開発の現場トークを軸に、こんな話をします： • 講習会と砂場遊びで支える組織 • 自分たちの責務をどう絞り、どう委嘱するか 6
7. 講習会と砂場遊びで 支える組織 7
8. 8 時は遡り……🕰 2015-2017
9. チームの特徴 ⚫学園祭実行委員会全体 • 3年で強制引退 3年経ったら誰もいなくなってる職場を想像してみてください ⚫Web担当の部署 • 各学年 4〜8人ぐらい • 情報系の学生が多いが、Web開発は初めての人がほとんど 9
10. プロダクトの特徴 1年間で外向けに出すプロダクトは2つ どちらも毎年1から作り直していた ⚫新歓サイト 新入生向けにサークルの雰囲気を伝え、新歓イベントを告知 ⚫学園祭サイト 毎年決まったテーマに合わせたデザイン（賞味期限が短い） Webパンフレット・参加団体向けの電子申請システムもある 10
11. 3年間の流れ 11 1年目 2年目 3年目 とにかく学ぶ • 講習会 • 遊びサイト作り 実働部隊 • 新歓サイト制作 • 学園祭サイト制作 マネジメント・教育 学年ごと役割がはっきりしている
12. 3年間の流れ 12 1年目 2年目 3年目 とにかく学ぶ • 講習会 • 遊びサイト作り 実働部隊 • 新歓サイト制作 • 学園祭サイト制作 マネジメント・教育
13. 講習会 3年生が1年生にWeb開発のいろはを教えていた 13 ← semantic coding 啓蒙のために 意味からタグ名を 覚えさせる
14. 講習会のカリキュラム 14 HTML/CSS JavaScript サーバサイド プログラミング PHP・ PHP フレームワーク デザイン フロントエンド 発展 共通 専修
15. 3年間の流れ 15 1年目 2年目 3年目 とにかく学ぶ • 講習会 • 遊びサイト作り 実働部隊 • 新歓サイト制作 • 学園祭サイト制作 マネジメント・教育
16. 遊びサイト作り 夏/冬の合宿用の内部向けWebサイトを作る： • 委員の紹介ページ • 旅行のしおり • おもしろコンテンツ 最低限の要件が満たされていれば何をどう作るかは自由 イースターエッグ仕込むのが楽しくて徹夜でコーディング 16
17. 学んだことを実践する場 17 HTML/CSS JavaScript サーバサイド プログラミング PHP・ PHP フレームワーク デザイン フロントエンド 発展 共通 夏合宿 サイト制作 冬合宿 サイト制作
18. 砂場遊びの意義 • 面白いことは単純にモチベーションが上がる • 手を動かすと座学で学んだことが定着する • Project Based Learning • ものづくりができる人間になれる（動くものを作り切 る力） 18
19. はてなにも砂場があった 社会人になっても砂場は用意されていた（よかった！） • 社内向けのWebサービスを有志で開発・保守する文化 • 開発合宿 • クラウドサービスを気軽に検証利用できる環境 19
20. 開発の様子 20
21. 3年間の流れ 21 1年目 2年目 3年目 とにかく学ぶ • 講習会 • 遊びサイト作り 実働部隊 • 新歓サイト制作 • 学園祭サイト制作 マネジメント・教育
22. 当時のアーキテクチャ 以下が全部入りのモノレポ • お客さん向けの企画情報サイト（Webパンフレット） • 参加団体の電子申請システム FuelPHP で作ったものがレンタルサーバにぽんと載っていた 22
23. Server Side Templating Server Side Templating サーバで HTML を組み立てて返す PHP の十八番 23 MySQL PHP header footer レンタルサーバ Apache 企画の 情報
24. 大枠は GW に集中開発 学園祭サイトはゴールデンウィークに部室に集まって開発 なんと当時は git という文明が取り入れられてなかった レンタルサーバ上のファイルを読み書き コンフリクト防止のための編集権（券） 24
25. 技術選定: 自分たちの責務をどう絞り、 どう委嘱するか 25
26. 学園祭サイトに求める非機能要件 可用性 めちゃくちゃ高くなくて良い、紙パンフレットもある 学園祭程度の規模なら、普通にやっていれば大体期待に適う ※ ただし、バナー広告の契約がある場合注意 コスト 学生団体に扱える金の規模ってものがある 制御可能であって欲しい 26
27. 学園祭サイトに求める非機能要件 セキュリティ 個人情報漏洩とかインシデント起こしたら普通に困る 認証・決済周りは手作りをなくす、SaaS に任せるのを検討 運用・保守 1年使えればとりあえず大丈夫。作り捨て前提 日々の運用に労力はあまりかけられない 27
28. 28 現代の話……🕰 2023-
29. 今の自分が設計するなら…… (1) ただの Web パンフレットだったら 静的サイトとして作りたい サーバを持たない方が管理・セキュリティ面で楽 SST で作っていたところ → フロントエンドフレームワークの Static Site Generation に任せる バックエンドのデータ → JSON ポン置きでもなんとかなりそう 29
30. 今の自分が設計するなら…… (2) 参加団体が使う電子申請システム部分 → Web パンフレット部分と分離して作る ビジネスフローが変わらなければ毎年作り直さなくても良い この動的なWebアプリケーション、何で作る？ Go, Rust, Scala, PHP, Python …… 30
31. 31 Q. PHP は使われなく なる？
32. 32 A. 今のところ まだまだ戦えると思う
33. レンタルサーバー最強説 プラットフォームの事情も大きい いわゆる「レンタルサーバー」でPHPが簡単に動く • 定額だしコスパ良し クラウド破産しない • できることの範囲が狭い分、こちらの責任範囲も狭い Webセキュリティ考えるだけでも精一杯 33
34. 一般論 リソースは有限なので、チームとプロダクトの性質を見極め、ど こまで自分たちで頑張るか考えよう 筋を通し続けると、尤もらしいアーキテクチャが見えてくる 仕事で ADR（Architecture Decision Record）書くときもこう いう思考が役に立ってる 34
35. Wrap Up 35
36. 学園祭Web開発の特徴 • Webサイトとしての賞味期限が短い • 人も短いスパンでどんどん入れ替わっていく • 非機能要件ではコストとセキュリティが気になりがち 36
37. 教育 • 体系的な学びと砂場遊びを組み合わせ、ものづくりをで きる人を育てる 37
38. 技術選定 • 学生目線では多少可用性を犠牲にしてもコストが予測可 能であることが大事 • プラットフォームの事情から PHP は今でも優位 • リソースは有限なので、チームとプロダクトの性質を見 極め、どこまで自分たちで頑張るか考える 38
39. 39 ご清聴いただき ありがとうございました Arthur