the industrial

ブログと言うより自分のためのメモ以外の何モノでもないです。でも読んでくださってありがとうございます。

#Nuxt.jsのComponentをどの単位で分けるか悩んだ話

Vue.js Nuxt.js WORK PROGRAMMING

この記事は、空いていたので Nuxt.js #2 Advent Calendar 2018 の21日目の記事としました。

20日目は同僚である@ryamakuchiのNuxt.js と Firebase（Firestore）を使って認証と DB 保存を実装するでした。

TL;DR

Nuxt.jsのComponentをどの単位で分けるか悩んだ話

  • Componentはページ自体を構成するComponentと、部品としていくつかのページで再利用できるComponetの２種類が存在すると定義。
  • ページ自体を構成するComponentはSectionsComponent、部品としていくつかのページで再利用できるはPartsComponetとして呼ぶように。
  • それぞれcomponents/sections/ディレクトリとcomponents/parts/ディレクトリに配置。

また、Vue.jsのオフィシャルスタイルガイドを受け

  • BaseとなるComponet（BaseButton.vueなど）は、PartsComponentに分類することに。
  • よくあるTheHeader.vueなどは、SectionsCopmonetに分類。
  • SectionsComponetの中だけで利用する子Componentを定義する場合（密結合となるComponent）は、親のComponentの名前をPrefixとして受け継いだSectionsComponentとしてcomponents/sections/に配置。

以上は実験的で今後変更があるかもしれませんが、今の所一番しっくり来ています。

NuxtのComponentどうしていますか？

弊社のNuxt.jsプロダクト開発において、ページを構成するComponentと、部品として再利用するComponentが混在しており、規模が大きくなるに連れてカオス化しそうでした。

そのため、同僚である@ryamakuchiといろいろ相談して、下記の様に決めました。

例えば

（細かい要素は抜きにして）こういった構造のページがあるとします。

f:id:omiend:20181227193940p:plain

このページの中では、ページ自体を構成するSection（あるいはHeaderやFooter）要素があり、それぞれをComponentに切り出すことがあるかもしれません。

f:id:omiend:20181227194154p:plain

同様に、他のページでも再利用できる要素（あえてdiv要素で定義してみました）についても、Componentに切り出したいでしょう。

f:id:omiend:20181227194351p:plain

すると、components/ディレクトリはこの様になるでしょう。

components/
├── ADiv.vue
├── ASection.vue
├── BDiv.vue
├── BSection.vue
├── CDiv.vue
├── CSection.vue
├── TheFooter.vue
└── TheHeader.vue

まだComponentは少ないので良いかもしれませんが、Componentが増えるにつれて確実に見通しが悪くなりそうだと思いました。

そこで、components/配下にディレクトリを切り出し、それぞれのComponentの責務（ページ自体を構成するComponentなのか、部品としていくつかのページで再利用できるComponetなのか）を明確にすることで、少なくとも見通しは良くなるのではないかと考えた次第です。

components/
├── parts
│   ├── ADiv.vue
│   ├── BDiv.vue
│   └── CDiv.vue
└── sections
    ├── ASection.vue
    ├── BSection.vue
    ├── CSection.vue
    ├── TheFooter.vue
    └── TheHeader.vue

また、当初は下記の様にcomponent/parts/だけ切り出そうかとも考えたのですが、ディレクトリの階層を揃えるという意味でcomponents/sections/を切り出しました。

components/
├── ASection.vue
├── BSection.vue
├── CSection.vue
├── TheFooter.vue
├── TheHeader.vue
└── parts
    ├── ADiv.vue
    ├── BDiv.vue
    └── CDiv.vue

ディレクトリを切るかどうか

ディレクトリを切らずに、直列で見れるほうが良いという方もいるそうです。

もしディレクトリが増えまくるとimport時が辛くなりそうな側面もあるかもしれません。

もちろん好みの問題もあるので、その際はファイル名SectionsComponent/PartsComponentを切り分けて工夫する感じですかね。

おわり

こういった地味だけど設計思想にも直結する話は、かなり大事なことだと認識しています。

話が逸れそうですが、そういった話をメンバーとできて、統一見解として内部で共有できることは、とても幸せだと感じました。

しばらく運用してみて、何か不都合があったらまたメンバーと一緒に考えて、ブログにするつもりです。

お読みくださいましてありがとうございました。

以上です。