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

by Arthur

Slide 1

Slide 1 text

学園祭Web開発の現場とPHPのこれまでとこれから ── 技術選定と教育から語る 2023-10-08 (Sun.) PHP Conference Japan 2023 1 Arthur

Slide 2

Slide 2 text

自己紹介 Arthur 株式会社はてなアプリケーションエンジニア 2022年新卒入社（2年目） id:arthur-1 @Arthur1__ https://blog.arthur1.dev/ 2

Slide 3

Slide 3 text

3 お仕事の様子はこちらをチェック👇 仮説検証サイクルでユーザーの声を高速に叶える「キカク組」の取り組み / Mackerel Drink Up #11

Slide 4

Slide 4 text

学生時代の話東京工業大学で学園祭実行委員をしていた Webサイト制作&情シスを担う部署に所属 ▶ 規模感来場者: 4万人サイト年間 PV: 50万 4

Slide 5

Slide 5 text

PHP 書いてました自分は PHP で動的な部分を作っていた： • FuelPHP で MVP（Model-View-Presenter） • 認証基盤 • 参加団体の各種申請フォーム • グランプリ企画投票システムなど 5

Slide 6

Slide 6 text

おしながき学園祭Web開発の現場トークを軸に、こんな話をします： • 講習会と砂場遊びで支える組織 • 自分たちの責務をどう絞り、どう委嘱するか 6

Slide 7

Slide 7 text

講習会と砂場遊びで支える組織 7

Slide 8

Slide 8 text

8 時は遡り……🕰 2015-2017

Slide 9

Slide 9 text

チームの特徴 ⚫学園祭実行委員会全体 • 3年で強制引退 3年経ったら誰もいなくなってる職場を想像してみてください ⚫Web担当の部署 • 各学年 4〜8人ぐらい • 情報系の学生が多いが、Web開発は初めての人がほとんど 9

Slide 10

Slide 10 text

プロダクトの特徴 1年間で外向けに出すプロダクトは2つどちらも毎年1から作り直していた ⚫新歓サイト新入生向けにサークルの雰囲気を伝え、新歓イベントを告知 ⚫学園祭サイト毎年決まったテーマに合わせたデザイン（賞味期限が短い） Webパンフレット・参加団体向けの電子申請システムもある 10

Slide 11

Slide 11 text

3年間の流れ 11 1年目 2年目 3年目とにかく学ぶ ● 講習会 ● 遊びサイト作り実働部隊 ● 新歓サイト制作 ● 学園祭サイト制作マネジメント・教育学年ごと役割がはっきりしている

Slide 12

Slide 12 text

3年間の流れ 12 1年目 2年目 3年目とにかく学ぶ ● 講習会 ● 遊びサイト作り実働部隊 ● 新歓サイト制作 ● 学園祭サイト制作マネジメント・教育

Slide 13

Slide 13 text

講習会 3年生が1年生にWeb開発のいろはを教えていた 13 ← semantic coding 啓蒙のために意味からタグ名を覚えさせる

Slide 14

Slide 14 text

講習会のカリキュラム 14 HTML/CSS JavaScript サーバサイドプログラミング PHP・ PHP フレームワークデザインフロントエンド発展共通専修

Slide 15

Slide 15 text

3年間の流れ 15 1年目 2年目 3年目とにかく学ぶ ● 講習会 ● 遊びサイト作り実働部隊 ● 新歓サイト制作 ● 学園祭サイト制作マネジメント・教育

Slide 16

Slide 16 text

遊びサイト作り夏/冬の合宿用の内部向けWebサイトを作る： • 委員の紹介ページ • 旅行のしおり • おもしろコンテンツ最低限の要件が満たされていれば何をどう作るかは自由イースターエッグ仕込むのが楽しくて徹夜でコーディング 16

Slide 17

Slide 17 text

学んだことを実践する場 17 HTML/CSS JavaScript サーバサイドプログラミング PHP・ PHP フレームワークデザインフロントエンド発展共通夏合宿サイト制作冬合宿サイト制作

Slide 18

Slide 18 text

砂場遊びの意義 • 面白いことは単純にモチベーションが上がる • 手を動かすと座学で学んだことが定着する • Project Based Learning • ものづくりができる人間になれる（動くものを作り切る力） 18

Slide 19

Slide 19 text

はてなにも砂場があった社会人になっても砂場は用意されていた（よかった！） • 社内向けのWebサービスを有志で開発・保守する文化 • 開発合宿 • クラウドサービスを気軽に検証利用できる環境 19

Slide 20

Slide 20 text

開発の様子 20

Slide 21

Slide 21 text

3年間の流れ 21 1年目 2年目 3年目とにかく学ぶ ● 講習会 ● 遊びサイト作り実働部隊 ● 新歓サイト制作 ● 学園祭サイト制作マネジメント・教育

Slide 22

Slide 22 text

当時のアーキテクチャ以下が全部入りのモノレポ • お客さん向けの企画情報サイト（Webパンフレット） • 参加団体の電子申請システム FuelPHP で作ったものがレンタルサーバにぽんと載っていた 22

Slide 23

Slide 23 text

Server Side Templating Server Side Templating サーバで HTML を組み立てて返す PHP の十八番 23 MySQL PHP header footer レンタルサーバ Apache 企画の情報

Slide 24

Slide 24 text

大枠は GW に集中開発学園祭サイトはゴールデンウィークに部室に集まって開発なんと当時は git という文明が取り入れられてなかったレンタルサーバ上のファイルを読み書きコンフリクト防止のための編集権（券） 24

Slide 25

Slide 25 text

技術選定: 自分たちの責務をどう絞り、どう委嘱するか 25

Slide 26

Slide 26 text

学園祭サイトに求める非機能要件可用性めちゃくちゃ高くなくて良い、紙パンフレットもある学園祭程度の規模なら、普通にやっていれば大体期待に適う ※ ただし、バナー広告の契約がある場合注意コスト学生団体に扱える金の規模ってものがある制御可能であって欲しい 26

Slide 27

Slide 27 text

学園祭サイトに求める非機能要件セキュリティ個人情報漏洩とかインシデント起こしたら普通に困る認証・決済周りは手作りをなくす、SaaS に任せるのを検討運用・保守 1年使えればとりあえず大丈夫。作り捨て前提日々の運用に労力はあまりかけられない 27

Slide 28

Slide 28 text

28 現代の話……🕰 2023-

Slide 29

Slide 29 text

今の自分が設計するなら…… (1) ただの Web パンフレットだったら静的サイトとして作りたいサーバを持たない方が管理・セキュリティ面で楽 SST で作っていたところ → フロントエンドフレームワークの Static Site Generation に任せるバックエンドのデータ → JSON ポン置きでもなんとかなりそう 29

Slide 30

Slide 30 text

今の自分が設計するなら…… (2) 参加団体が使う電子申請システム部分 → Web パンフレット部分と分離して作るビジネスフローが変わらなければ毎年作り直さなくても良いこの動的なWebアプリケーション、何で作る？ Go, Rust, Scala, PHP, Python …… 30

Slide 31

Slide 31 text

31 Q. PHP は使われなくなる？

Slide 32

Slide 32 text

32 A. 今のところまだまだ戦えると思う

Slide 33

Slide 33 text

レンタルサーバー最強説プラットフォームの事情も大きいいわゆる「レンタルサーバー」でPHPが簡単に動く • 定額だしコスパ良しクラウド破産しない • できることの範囲が狭い分、こちらの責任範囲も狭い Webセキュリティ考えるだけでも精一杯 33

Slide 34

Slide 34 text

一般論リソースは有限なので、チームとプロダクトの性質を見極め、どこまで自分たちで頑張るか考えよう筋を通し続けると、尤もらしいアーキテクチャが見えてくる仕事で ADR（Architecture Decision Record）書くときもこういう思考が役に立ってる 34

Slide 35

Slide 35 text

Wrap Up 35

Slide 36

Slide 36 text

学園祭Web開発の特徴 • Webサイトとしての賞味期限が短い • 人も短いスパンでどんどん入れ替わっていく • 非機能要件ではコストとセキュリティが気になりがち 36

Slide 37

Slide 37 text

教育 • 体系的な学びと砂場遊びを組み合わせ、ものづくりをできる人を育てる 37

Slide 38

Slide 38 text

技術選定 • 学生目線では多少可用性を犠牲にしてもコストが予測可能であることが大事 • プラットフォームの事情から PHP は今でも優位 • リソースは有限なので、チームとプロダクトの性質を見極め、どこまで自分たちで頑張るか考える 38

Slide 39

Slide 39 text

39 ご清聴いただきありがとうございました Arthur