# Vueのコンポーネント設計個人的ベストプラクティス
Vueのコンポーネント設計について、TLで少し話題になってたので僕なりのベストプラクティスを書いてみたいと思います。
# 有名なアトミックデザインはどうか？
アトミックデザインとは、コンポーネントをパーツの粒度に応じて原子や分子といった分類をする手法で、 比較的有名なコンポーネントの設計手法です。
このアトミックデザイン、小さなコンポーネントを組み合わせて上位のコンポーネントを作成していくことから、 ボトムアップ的なアプローチをしていくことになります。
しかし、実際にプロジェクトでアトミックデザインを取り入れるというのは難しいことに気付きました。
- 一度しか使われない原子パーツが大量に溜まってしまい、ゴミ溜めのようになってしまう
- ボトムアップな手法のため、上位のコンポーネントに変更が発生しやすい
- 有機体なのかテンプレートなのかページなのか、分類しずらいものが出てくる
- VuetifyなどのUIコンポーネントのセットを使う場合、原子や分子は不要なのでは？
- そもそもそのパーツ、他のパーツと組み合わせることを想定してませんよね？
各コンポーネントが適切に管理されているならば、この手法は確かに良い選択肢になるのかもしれません。
ですが、概念のわかりやすさに反して複雑なアトミックデザインは、 昨今の開発現場で求められるスピード感や管理コストの低さといった要求との相性が悪く感じられたため、 僕はアトミックデザインの設計手法は非推奨と考えています。
TIP
非推奨とは言っても小規模な開発なら大した問題にもならないので、 もし今個人開発でアトミックデザインを使ってみてる人がいましたら、 僕個人の意見を真に受けてわざわざ設計をやり直したりする必要は無いと思います。
# 【個人的ベストプラクティス】Nuxt.jsのやり方に倣おう
そこで行き着いた僕の個人的ベストプラクティスですが、 Nuxt.js の設計を倣った形式にするのが最も良いと考えました。
Nuxt.jsを挙げた理由としては下記のようなものがあります。
- Vue.js界隈で最も有名なフレームワークで、誰もがその構造を知っている
- Nuxt.jsで開発する場合、新しい概念を取り入れる必要がない
- Layout > Page > Components というシンプルな構造で、上位のコンポーネントほど変更が少ない
- 縛りが少なく応用が効きやすい
はい、単純明快な理由ですね。
探究心豊富なフロントエンド界隈からすると、真新しさがなさすぎてがっかりするかもしれません。 ですがこれほど強力なコンポーネント設計の指針が示されているのならば、ぜひ参考にすべきだと思います。