フロントエンドのディレクトリ設計思想

by teppeita

Slide 1

Slide 1 text

フロントエンドのディレクトリ設計思想 2023-10-11 ハッカー鮨竹尾哲平（@_teppeita）

Slide 2

Slide 2 text

自己紹介 Index 1 ディレクトリについて 2 設計思想 3 マイベストの方針 4 まとめ 5

Slide 3

Slide 3 text

竹尾哲平（@_teppeita） takeo teppei フロントエンドエンジニアデザインシステムとGraphQLに関心が有ります。画像自己紹介

Slide 4

Slide 4 text

ディレクトリ構成どうしていますか？画像 https://tabelog.com/tokyo/A1302/A130204/13018162/

Slide 5

Slide 5 text

ディレクトリ構成どう考えるのが良いと思いますか？画像 https://tabelog.com/tokyo/A1302/A130204/13018162/

Slide 6

Slide 6 text

どれを選びますか？フロントエンド界隈を見ると世の中にはいろんなパターンが出回っています Atomic Design Features Directory App Directory Clean Architecture Container / Presenter

Slide 7

Slide 7 text

アーキテクチャ全般の話から考えてみましょう概念的な話として設計思想：どう分けるか

Slide 8

Slide 8 text

どう分けるか、をキャッチーに命名 Layer型 Feature型

Slide 9

Slide 9 text

MVCとかも分類できますが、割愛します先ほどあげたよくあるパターンを分類 Layer型 Feature型 Atomic Design Features Directory App Directory Clean Architecture Container / Presenter (Micro Frontends)

Slide 10

Slide 10 text

よくあるパターンの導入理由や失敗事例を見ると分かりやすいです分類ごとの Pros / Cons Layer型 Feature型 Pros ・処理の共通化がしやすい Cons ・階層分けが難しい・依存の管理が難しい Pros ・ドメインごとに疎結合 & 高凝集にできる Cons ・境界の定義が難しい・処理の重複が発生

Slide 11

Slide 11 text

少し視点を変えて

Slide 12

Slide 12 text

Layer型・Feature型と似てますね組織で考えてみると機能別組織と事業部制組織が有ります

Slide 13

Slide 13 text

つまり、組み合わせて構成する組織の場合組織の構造は、ハイブリッドに帰結する「共通の事業目的を持つすべての大組織は、最後にはハイブリッド組織形態に落ち着くことになる」アンドリュー・S・グローブ. 『ハイアウトプットマネジメント』 .日経BP.2017

Slide 14

Slide 14 text

コンウェイの法則に従えば、システムもハイブリッドが良い？ →組み合わせ方を考える。

Slide 15

Slide 15 text

先ほどの Pros / Cons を再確認 Layer型 Feature型 Pros ・処理の共通化がしやすい Cons ・階層分けが難しい・依存の管理が難しい Pros ・ドメインごとに疎結合 & 高凝集にできる Cons ・境界の定義が難しい・処理の重複が発生

Slide 16

Slide 16 text

どう組み合わせるかマイベストの方針 Layer型 Feature型 Pros ・処理の共通化がしやすい →Componentsに適用 Pros ・ドメインごとに疎結合・高凝集にできる →Pagesに適用

Slide 17

Slide 17 text

Layer型を適用 Componentsディレクトリ Layer型 Pros ・処理の共通化がしやすい →Componentsに適用・デザインシステム構築中・Atomic Designをベースに議論して、独自にカスタマイズした階層（詳細話したいですが、今回は割愛）・処理を共通化して複数箇所で扱いやすい

Slide 18

Slide 18 text

Feature型を適用 Pagesディレクトリ Feature型 Pros ・ドメインごとに疎結合・高凝集にできる →Pagesに適用・Next.jsのルーティングに合わせて機能をまとめる・App Directoryに倣ってコロケーション（pageExtensions optionを利用）・境界の定義が明確で迷わない

Slide 19

Slide 19 text

※分かりやすさのために実際よりも簡略化していますマイベストのディレクトリ全体像

Slide 20

Slide 20 text

まとめディレクトリ設計思想は 01 Layer型とFeature型に分類できそう 02 2つの型の組み合わせを考える 03 マイベストでは componentsと pagesで組み合わせ