フロントエンドの大規模開発におけるTips

フロントエンドの大規模開発を経験し、振り返って今後に活かせるTipsをまとめました。
React / Next / microCMS

1. フロントエンドの大規模開発におけるTips ジャムスタックチョットデキル!! シブヤ!! 2023/2/22　はしば
2. 自己紹介 - 羽柴 大生(はしば だいき) - chot Inc. 所属 - Web フロントエンドエンジニア - 大阪出身→香川在住 - 最近はNestJSで遊んでます。バックエンド楽しい - 今日はお酒たらふく飲みます
3. 自己紹介 - 羽柴 大生(はしば だいき) - chot Inc. 所属 - Web フロントエンドエンジニア - 大阪出身→香川在住 - 最近はNestJSで遊んでます。バックエンド楽しい - 今日はお酒たらふく飲みます
4. 目次 # フロントエンドの大規模開発におけるTips - 今回対応した案件の説明 - 開発の流れ - それぞれのpoint - 全体振り返り(開発 / 設計 / PJ進行)
5. 概要 - ALBA Net ゴルフメディアのリニューアル - 約7万件の記事 - 約1年間の開発期間 - フロント常時5名ほど - Next.js / Vercel / microCMS https://www.alba.co.jp/
6. 流れ 要件 定義
 WF
 機能
 コンポー
 ネント
 page
 デザイン変 更
 API完成
 納品前
 要件を定義しなが らWF作成。 先に機能部分の作 成を進めた。
7. 要件 定義
 WF
 機能
 コンポー
 ネント
 page
 要件を定義しなが らWF作成。 先に機能部分の作 成を進めた。 デザイン変 更
 API完成
 納品前
 pageデザインよりもコン ポーネントが先行した。 合計100個近いコンポーネ ントをこの時作成した(共通 は40個ほど)。 流れ
8. 要件 定義
 WF
 機能
 コンポー
 ネント
 page
 要件を定義しなが らWF作成。 先に機能部分の作 成を進めた。 デザイン変 更
 API完成
 納品前
 pageデザインよりもコン ポーネントが先行した。 合計100個近いコンポーネ ントをこの時作成した(共通 は40個ほど)。 作成したコンポー ネントを入れ込ん で作成したフェー ズ。 流れ
9. - 一般的な開発と違い view の作成を後回しにしました - この開発方法はとても開発体験が良かった - 途中で view があった方が説明しやすいという判断で切り上げま したが、ここは最後まで実装進めても良かったかも 振り返り 要件 定義
 WF
 機能
 コンポー
 ネント
 page
 デザイン変 更
 API完成
 納品前

10. - デザイナーの方が考える共通コンポーネントと、エンジニアが考 えるものがずれていた - 作りすぎた。共通は少なくて良い - 共通コンポーネントの責務が曖昧だった 要件 定義
 WF
 機能
 コンポー
 ネント
 page
 デザイン変 更
 API完成
 納品前
 振り返り
11. - view の作成だけお願いしていた箇所は大体作り直しになった - 後から共通部分の修正を行い工数が嵩張ってしまった - 実際にデータを入れた際に想定していない形式のデータが多数 出た 要件 定義
 WF
 機能
 コンポー
 ネント
 page
 デザイン変 更
 API完成
 納品前
 振り返り
12. - どこに何を設置するか? - js / ts / css / components / assets …etc - CMSの必須は TypeScript における必須ではない - page extensions は大規模開発では大変助けられました - page専用のコンポーネントの置き場にしたり、Next.jsのAPIだけ分割した りといったことが可能に https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions 設計振り返り
13. 開発振り返り - 共通コンポーネントには着手前に時間をかけるべきだった - husky による矯正は必須。lintは厳しければ厳しいほど良い - WF → 機能開発の流れはとても良かった - scaffdog / aspida / pathpida の開発体験が良かった - 正しさよりコードの統一性
14. PJ振り返り - view だけを作成する人が必要になるタイミングは限られている (教育 or 静的なpageが多い場合) - テスト期間を削る = 納期が遅れる - single source of truth に従う - クローラーのおかげで九死に一生を得ました (webサイト一括取得ツール) https://contentfinder.jp/
15. TL;DR # 大規模開発におけるTips - CMSの必須は TypeScript における必須ではない - 共通コンポーネントには着手前に時間をかけるべきだった - 正しさよりコードの統一性 - view だけを作成する人が必要になるタイミングは限られている
16. ご視聴 & ご清聴 ありがとうございました!!!