なに？マクドナルドから学ぶ、優れた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**

として考えてみてくれ！


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


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

例えば[ダブルチーズバーガー](https://www.mcdonalds.co.jp/products/1360/)を見てみよう

![ダブルチーズバーガー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560551/2030d93b-ca36-e847-9af8-73e14633d010.png)


主要原料は
 - バンズ
 - ビーフパティ ... 2枚
 - チェダースライスチーズ ... 2枚
 - ピクルス
 - オニオン

みたいだ。

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

```ダブルチーズバーガー.vue
<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
```

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

次はダイエットの味方[フィレオフィッシュ](https://www.mcdonalds.co.jp/products/1110/)だ！

![フィレオフィッシュ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560551/869e2390-9c0a-a658-a000-16002d3728e9.png)

主要原料は
 - バンズ
 - フィッシュポーション
 - チェダースライスチーズ

だな！

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

```フィレオフィッシュ.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をやめてディレクトリ構造を見直した話 (食べログ フロントエンドエンジニアブログ)](https://note.com/tabelog_frontend/n/n07b4077f5cf3)

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

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

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

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

ということだな！

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

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

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

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


**Follow ME !!!**
**I'm sure to follow you back!**
twitter: [@marty_ojiya](https://twitter.com/marty_ojiya)