三年間の関わりから見る PR TIMES エンジニアリングの変化 / Transition of PRTimes Engineering

2024年12月10日に開催された 株式会社ユーザベース×株式会社ZOZO×株式会社PR TIMES 3社合同フロントエンド勉強会 (https://prtimes.connpass.com/event/335335/) のセッション資料です。

Transcript

1. 三年間の関わりから見る PR TIMES エンジニアリングの変化 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 1
2. Shogo SENSUI (shogosensui.com) Advisor at PR TIMES, Inc. Advisor at Macromill, Inc. Advisor at JR West 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 2
3. Shogo SENSUI @1000ch·フォローする X の皆さんご無沙汰しています。@PRTIMES_JP での支援が 始まって早三年が経ったので、書きました / “三年間の関 わりから見る PR TIMES エンジニアリングの変化 | PR TIMES 開発者ブログ” developers.prtimes.jp 三年間の関わりから見る PR TIMES エンジニアリングの… Technical Advisor の @1000ch です。私がジョインしたの が 2021-09 なので、気… 午前9:45 · 2024年9月25日 54 返信 リンクをコピー Xでもっと読む 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 3
4. 遡ること 2021 年 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 4
5. 機能追加もままならないプロダクト レガシーでモノリスな PHP に jQuery で振る舞いを実装した古き良き Web アプリ クラウドではなくオンプレでホストされ、CI/CD も組まれていないシステム Frontend/Backend どうこう以前に、エンジニアリングの方向性が示されていない 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 5
6. エンジニアリングの梃入れに伴い参画 現 CTO が参画し、セキュリティを優先にシステム課題および優先度の明確化 古い PHP のアップグレードや React の導入など、大まかな方向性が決定 2021 年の夏頃に依頼があり、Frontend を中心にサポートを開始 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 6
7. 状況の把握と支援の模索 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 7
8. 未開拓のシステム 古く大きな PHP に jQuery で実装された Frontend 実装を開拓 React を部分的に導入したものの、先々の方向性は不明確な状態 未成熟のチーム この状況に置かれた、所謂 Frontend なソフトウェアエンジニアは新卒 3 人 「アドバイザーらしき人が来たらしいが、どう協調すれば良いかわからない」 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 8
9. Frontend 領域の確立に向けたチーミング まずは継続的に対話する場を設け、何が起きて何に困っているのかを把握分析 とにかく自己開示の機会を増やし、領域内外の関係構築を促進 「やりたい」で終わらない課題解決に向けて 課題の解像度を高め、取捨選択を繰り返すように議論を補助 個人の WANT ではなく組織の SHOULD、短期ではなく中長期を優先 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 9
10. 唯一やった型化「背景 → 課題 → 提案」 現状を整理して俯瞰 抽象度を高めた課題を抽出 課題の対処方法を考案 如何なる課題解決にも適用できる思考の基本でありフレームワーク 起案のフォーマットとし、議論を繰り返す。これで議論の質が徐々に向上 これが伴わないアイデアは、考えることを放棄した思い付き 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 10
11. 取り組みが徐々に結実 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 11
12. Backend と同居していた Frontend 実装を別リポジトリ に分離 Shogo SENSUI @1000ch·フォローする レガシーな実装だった PR TIMES のフロントエンドが徐々 に、そして着実に改善されている。モダン化に向けて一気に 修正することが難しい中で、このフロントエンドを切り離す 一手の意義は大きい。 / “PR TIMESにおけるフロントエンド 開発基盤の構築 | PR TIMES 開発者ブログ” developers.prtimes.jp PR TIMESにおけるフロントエンド開発基盤の構築 こんにちは、21新卒エンジニアの柳(@apple_yagi)です。今月から新卒2年目と なり、一年早かったなとし… 午前10:38 · 2022年4月14日 24 返信 リンクをコピー 1件の返信を読む 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 12
13. 正解のない議論に時間を費やし ていた ESLint による lint を xo へ置換 Shogo SENSUI @1000ch·フォローする みんなでコツコツ進めて、ようやく適用完了した。しっ かり目のルールをこの行数のファイルに適用できたのは 凄い 確かにフルスキャンは重いけど、基本はテキスト エディタの拡張機能と、変更差分に適用できれば大丈夫そ う やなぎ@apple_yagi フロントエンドのLintツールをXOに統一した話 developers.prtimes.jp/2024/02/09/fro… 午後10:59 · 2024年2月9日 7 返信 リンクをコピー Xでもっと読む 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 13
14. Frontend で積み重ねた改善の数々 Frontend の実装を集約するリポジトリを作成し、分割統治 webpack によるビルドを esbuild を経てVite に移行し、高速化 終わりのないルールの議論に時間を割いていた ESLint から xo へ移行 Frontend が支配的だった GitHub Actions の実行時間を分析し改善 Output/Outcome 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 14
15. ソフトウェア以外の副次的な変化や成長 仲間も増えて Frontend という技術領域が確立し、経験だけでなく信任が蓄積 バックエンドエンジニアがフロントエンド開発・フロントエンドエンジニア がバックエンド開発に相互でコミット 課題の解像度を磨き続けた ことで「やらなければ良かった」が体感的に減少 困難な状況下でも結果を積み重ねた自信が、個人や組織としての主体性 に 潜在的な技術負債を予め察知し対処できている Outcome/Outgrowth 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 15
16. まだ終わらない改善 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 16
17. アドバイザーとしての支援を振り返った雑感 焦点はマインドセットや課題解決で、実のところ「The 技術」の提供は少ない 100 点の正解は持ち合わせていないし、劇的な課題解決からは程遠い それなりに重要な役割でありながら、 （良い意味で）放任ベースだった 変化に相応の忍耐力が問われる中で、皆が根気よく向き合ってきた 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 17
18. 個人や組織の更なる発展に向けて コミットの賜物で負債は着実に減っている アクセシビリティをはじめとした、更に発展的な非機能要件への取り組み 個人での頑張りから組織としての協調へ 開発に留まらない、事業や採用などの領域への関心と観点の拡大 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 18
19. お気軽にお声がけください キャリアの悩み、チームの課題、PR TIMES のこと、etc 三年間の関わりから見る PR TIMES エンジニアリングの変化 by @1000ch 19