なに？マクドナルドから学ぶ、優れたcomponentsディレクトリ構造？！

ある日のパイセン「このコンポーネントのスコープはどこだい？」

CMSのついたイベント特設サイト制作案件だな
あれは一部だけやったから詳しくないんだよ！

仕方ない、調べるか

確かAtomic Designベースで
ディレクトリ構造をわけているんだよな！

どれどれ…
パイセンは、
ArticleSearchFieldコンポーネントって言ってたな…

ArticleSearchて書いてあるんだから、
記事を探すところで使われているんだろう？

ってことは、記事一覧あたりのはずだ

src
┗ components
   ┣ atoms
   ┃  （略）
   ┣ molecules
   ┃  ┣ ArticleSearchField.vue  // このコンポーネント
   ┃  （略）
   ┣ organisms
   ┃  （略）
   ┣ templates
   ┃  （略）
   ┗ pages
      ┣ ArticleSummary.vue // このあたりで使われているんだろうな！
      ┣ TopPage.vue　　　　 // おそらくここもか…??
      （略）

TopPageでも使われているかもしれないな
わからないからソースコードを見に行くか

// TopPage.vue

<script>
import xxxx from 'yyyy'  // なさそうだな！
（略）
</script>

TopPageにはなかった！
でもまだわからないから、ArticleSearchFieldで検索かけるか…

このあと、結局ArticleSearchField.vueは
ArticleSummaryという記事一覧ページでしか使われていないことがわかった！

よかったじゃないか！だって？

いいや、よくないね！

Atomic Designベースで
ディレクトリを分けているせいで
コンポーネントのスコープが、わかりにくくなっているんだ！

マクドナルドのメニューから考える、componentsディレクトリ構造

誰しもが1度はマクドナルドを食べたことがあるだろう？

どれもバンズで挟んである具材が違うから、
それぞれの個性があって美味しい！
（あとで注文しよう！）

キミは知っていたかい？

実はマクドナルドは、
コンポーネントのディレクトリ構造を
考える機会をくれる
素晴らしいフードショップなんだ！

ついに気が狂った、と思ったかい？

そう思ったら騙されたと思って

ハンバーガーを、表示されるページ
具材を、components

として考えてみてくれ！

ダブルチーズバーガーは当然、こうなるだろう？

ハンバーガーは、いろいろな具材が重なってできているな！

例えばダブルチーズバーガーを見てみよう

主要原料は

• バンズ
• ビーフパティ ... 2枚
• チェダースライスチーズ ... 2枚
• ピクルス
• オニオン

みたいだ。

つまり、ダブルチーズバーガーというページがあったら
こうなるよな？
いいや、異論は受け付けないぜ！

<template>
  <バンズ>
    <オニオン />
    <ピクルス />
    <チーズ />
    <パティ />
    <チーズ />
    <パティ />
 </バンズ>
</template>

<script>
 import バンズ from 'バンズcomponent'
 import パティ from 'ビーフパティcomponent'
 import チーズ from 'チェダースライスチーズcomponent'
 import ピクルス from 'ピクルスcomponent'
 import オニオン from 'オニオンcomponent'
</script>

ダブルチーズバーガーにあるcomponent（具材）たちは
どれも汎用的そうだ！

汎用的そうなものは、当然どのバーガー(ページ)からも
アクセスできたほうがいいから
わかりやすいところに置いておこう

src
┗ components
   ┣ burgerParts
   ┃  ┣ ビーフパティ.vue
   ┃  ┣ チェダースライスチーズ.vue
   ┃  ┣ ピクルス.vue
   ┃  ┗ オニオン.vue
   ┣ templates
   ┃  ┗ バンズ.vue
   ┗ pages
      ┗ ダブルチーズバーガー.vue

ということは、フィレオフィッシュならこうなるさ！

次はダイエットの味方フィレオフィッシュだ！

主要原料は

• バンズ
• フィッシュポーション
• チェダースライスチーズ

だな！

ということは、フィレオフィッシュというページがあったら
当然こうなるさ！

<template>
  <バンズ>
    <フィッシュ />
    <チーズ />
 </バンズ>
</template>

<script>
 import バンズ from 'バンズcomponent'
 import フィッシュ from 'フィッシュポーションcomponent'
 import チーズ from 'チェダースライスチーズcomponent'
</script>

ほらみろ！
チェダースライスチーズcomponentがまたでてきた！
使い回せるぞ！

足りないものを加えていこう！

src
┗ components
   ┣ burgerParts
   ┃  ┣ ビーフパティ.vue
   ┃  ┣ チェダースライスチーズ.vue
   ┃  ┣ ピクルス.vue
   ┃  ┣ オニオン.vue
   ┃  ┗ フィッシュポーション.vue  // 追加
   ┣ templates
   ┃  ┗ バンズ.vue
   ┗ pages
      ┣ ダブルチーズバーガー.vue
      ┗ フィレオフィッシュ.vue  // 追加

フィッシュポーションはどのバーガーで使う？

ちょっと待ってくれ！
（ハンバーガーにかぶりつくのも止めてくれ！）
（そのポテトは箱に戻して、一度手を拭いて！）

フィッシュポーションは本当にburgerParts配下でいいのかい？

このburgerPartsというディレクトリの役割は
汎用的に使えるcomponents（具材） をまとめることだったはずだ！

キミはフィッシュポーションが
フィレオフィッシュ以外で使われているを
見たことがあるかい？

ボクはない！
（もしキミがあったとしても、無いものとして考えてくれ。)
（それが大人の対応ってものさ！）

フィッシュポーションは、
フィレオフィッシュにしか使われていないのだから
burgerPartsに配置するのはおかしい！

パイセンにまた、
「フィッシュポーションのスコープはどこだい？」
なんて言われてしまうよ！

例えば、こうしてみたらどうだい？

src
┗ components
   ┣ burgerParts
   ┃  ┣ ビーフパティ.vue
   ┃  ┣ チェダースライスチーズ.vue
   ┃  ┣ ピクルス.vue
   ┃  ┣ オニオン.vue
   ┣ templates
   ┃  ┗ バンズ.vue
   ┗ pages
      ┣ ダブルチーズバーガー.vue
      ┣ フィレオフィッシュ.vue
      ┗ フィレオフィッシュParts
         ┗ フィッシュポーション.vue

これならフィッシュポーションは
フィレオフィッシュでしか使われない
ということがディレクトリ構造から明らかになった！

ディレクトリ構造は、きっと、自由でいい。大切なのはわかりやすい意味をもたせることさ！

モダン技術構成でのフロントエンド開発経験が
まだまだ浅いボクには
「Atomic Designなディレクトリ構造最強だ！」
「もう13日の金曜日も、ミルクでビチャビチャのシリアルも怖くない！」
そう、思っていた時期があった

でも、程なくして
componentsのスコープという点では
Atomic Designなディレクトリ構造は優れていない
と感じてきてしまったんだ！

最近、またゼロからフロントエンドの開発をすることになって
優れたディレクトリ構造とはなんなのか？

そう考えていたときに出会ったのが、この記事だった！
Atomic Designをやめてディレクトリ構造を見直した話 (食べログ フロントエンドエンジニアブログ)

そのプロジェクトでは
この記事を参考にしたディレクトリ構造を考え
今のところAtomic Designなディレクトリ構造よりも安心して開発ができている！

もちろん、キミが今読んでいるコレも、あの記事に大きな影響を受けているよ！

記事を読んで、プロジェクトで実践してみて、思うのは

ディレクトリ構造は、きっと、自由でいい。大切なのはわかりやすい意味をもたせることさ！

ということだな！

優れたディレクトリ構造は、安心感を生み出してくれる！

ここまで読んでくれてありがとう！

優れたディレクトリ構造は、
配下のファイルの責務やスコープ
そんなものを明らかにしてくれる、ボクはそう信じているよ

さて、この記事も終わりだ。
マクドナルドに行かないとね！

Follow ME !!!
I'm sure to follow you back!
twitter: @marty_ojiya