Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

hashiba daiki
February 22, 2023

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

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

hashiba daiki

February 22, 2023
Tweet

More Decks by hashiba daiki

Other Decks in Technology

Transcript

  1. 自己紹介 - 羽柴 大生(はしば だいき) - chot Inc. 所属 -

    Web フロントエンドエンジニア - 大阪出身→香川在住 - 最近はNestJSで遊んでます。バックエンド楽しい - 今日はお酒たらふく飲みます
  2. 自己紹介 - 羽柴 大生(はしば だいき) - chot Inc. 所属 -

    Web フロントエンドエンジニア - 大阪出身→香川在住 - 最近はNestJSで遊んでます。バックエンド楽しい - 今日はお酒たらふく飲みます
  3. 概要 - ALBA Net ゴルフメディアのリニューアル - 約7万件の記事 - 約1年間の開発期間 -

    フロント常時5名ほど - Next.js / Vercel / microCMS https://www.alba.co.jp/
  4. 流れ 要件 定義
 WF
 機能
 コンポー
 ネント
 page
 デザイン変 更


    API完成
 納品前
 要件を定義しなが らWF作成。 先に機能部分の作 成を進めた。
  5. 要件 定義
 WF
 機能
 コンポー
 ネント
 page
 要件を定義しなが らWF作成。 先に機能部分の作

    成を進めた。 デザイン変 更
 API完成
 納品前
 pageデザインよりもコン ポーネントが先行した。 合計100個近いコンポーネ ントをこの時作成した(共通 は40個ほど)。 流れ
  6. 要件 定義
 WF
 機能
 コンポー
 ネント
 page
 要件を定義しなが らWF作成。 先に機能部分の作

    成を進めた。 デザイン変 更
 API完成
 納品前
 pageデザインよりもコン ポーネントが先行した。 合計100個近いコンポーネ ントをこの時作成した(共通 は40個ほど)。 作成したコンポー ネントを入れ込ん で作成したフェー ズ。 流れ
  7. - 一般的な開発と違い view の作成を後回しにしました - この開発方法はとても開発体験が良かった - 途中で view があった方が説明しやすいという判断で切り上げま

    したが、ここは最後まで実装進めても良かったかも 振り返り 要件 定義
 WF
 機能
 コンポー
 ネント
 page
 デザイン変 更
 API完成
 納品前

  8. - どこに何を設置するか? - 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 設計振り返り
  9. PJ振り返り - view だけを作成する人が必要になるタイミングは限られている (教育 or 静的なpageが多い場合) - テスト期間を削る =

    納期が遅れる - single source of truth に従う - クローラーのおかげで九死に一生を得ました (webサイト一括取得ツール) https://contentfinder.jp/
  10. TL;DR # 大規模開発におけるTips - CMSの必須は TypeScript における必須ではない - 共通コンポーネントには着手前に時間をかけるべきだった -

    正しさよりコードの統一性 - view だけを作成する人が必要になるタイミングは限られている