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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. 8
   時は遡り……🕰
   2015-2017
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. 開発の様子
    20
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. 28
    現代の話……🕰
    2023-
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. Wrap Up
    35
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide