フロントエンドのディレクトリ設計思想

Transcript

1. フロントエンドのディレクトリ設計思想 2023-10-11 ハッカー鮨 竹尾哲平（@_teppeita）
2. 自己紹介 Index 1 ディレクトリについて 2 設計思想 3 マイベストの方針 4 まとめ 5
3. 竹尾 哲平（@_teppeita） takeo teppei フロントエンドエンジニア デザインシステムとGraphQLに関心が有ります。 画像 自己紹介
4. ディレクトリ構成 どうしていますか？ 画像 https://tabelog.com/tokyo/A1302/A130204/13018162/
5. ディレクトリ構成 どう考えるのが良いと思いますか？ 画像 https://tabelog.com/tokyo/A1302/A130204/13018162/
6. どれを選びますか？ フロントエンド界隈を見ると 世の中にはいろんなパターンが出回っています Atomic Design Features Directory App Directory Clean Architecture Container / Presenter
7. アーキテクチャ全般の話から考えてみましょう 概念的な話として 設計思想：どう分けるか
8. どう分けるか、を キャッチーに命名 Layer型 Feature型
9. MVCとかも分類できますが、割愛します 先ほどあげた よくあるパターンを分類 Layer型 Feature型 Atomic Design Features Directory App Directory Clean Architecture Container / Presenter (Micro Frontends)
10. よくあるパターンの導入理由や失敗事例を見ると分かりやすいです 分類ごとの Pros / Cons Layer型 Feature型 Pros ・処理の共通化がしや すい Cons ・階層分けが難しい ・依存の管理が難しい Pros ・ドメインごとに疎結合 & 高凝集にできる Cons ・境界の定義が難しい ・処理の重複が発生
11. 少し視点を変えて
12. Layer型・Feature型と似てますね 組織で考えてみると 機能別組織と事業部制組織が有ります
13. つまり、組み合わせて構成する 組織の場合 組織の構造は、ハイブリッドに帰結する 「共通の事業目的を持つすべての大組織は、最後にはハイブリッド組織形態に落ち着くことになる」 アンドリュー・S・グローブ. 『ハイアウトプットマネジメント』 .日経BP.2017
14. コンウェイの法則に従えば、 システムもハイブリッドが良い？ →組み合わせ方を考える。
15. 先ほどの Pros / Cons を再確認 Layer型 Feature型 Pros ・処理の共通化がしや すい Cons ・階層分けが難しい ・依存の管理が難しい Pros ・ドメインごとに疎結合 & 高凝集にできる Cons ・境界の定義が難しい ・処理の重複が発生
16. どう組み合わせるか マイベストの方針 Layer型 Feature型 Pros ・処理の共通化がしや すい →Componentsに適用 Pros ・ドメインごとに疎結合・ 高凝集にできる →Pagesに適用
17. Layer型を適用 Componentsディレクトリ Layer型 Pros ・処理の共通化がしや すい →Componentsに適用 ・デザインシステム構築中 ・Atomic Designをベースに議論して、独 自にカスタマイズした階層 （詳細話したいですが、今回は割愛） ・処理を共通化して複数箇所で扱いや すい
18. Feature型を適用 Pagesディレクトリ Feature型 Pros ・ドメインごとに疎結合・ 高凝集にできる →Pagesに適用 ・Next.jsのルーティングに合わせて機 能をまとめる ・App Directoryに倣ってコロケーショ ン （pageExtensions optionを利用） ・境界の定義が明確で迷わない
19. ※分かりやすさのために実際よりも簡略化しています マイベストの ディレクトリ全体像
20. まとめ ディレクトリ設計思想は 01 Layer型とFeature型 に分類できそう 02 2つの型の 組み合わせ を考える 03 マイベストでは componentsと pagesで組み合わせ