アトミックデザインを採用してNuxt3(Vue)でコンポーネントを設計してみた感想

Nuxt3で開発する際にコンポーネントの設計を考える際に、アトミックデザインを採用してみたので感想をまとめました。
厳密にatoms、moleculesを分ける方法ではないので、参考程度に見ていただければと思います。
アトミックデザインの使い辛さを改善するを参考にさせていただきました。
デザインパターンはコンテナ/プレゼンテーションパターンを採用しています。
アーキテクチャはMVVMを採用しています。
デザインパターン、アーキテクチャについての感想はまた別記事にまとめたいと思います。

結論

今回はatomsとmoleculesをまとめてelementsとして扱い、elements、organismはPropsでデータを受け取り表示するだけのコンポーネントとして扱いました。
個人的な感想を述べると、Propsリレーは少し面倒でしたがレイアウトの一貫性を保ちやすく、コンポーネントを再利用してページを作成することができたので使いやすいと感じました。
Propsだけでは難しいところもあるので、slotをうまく活用することで汎用性が高くなり再利用しやすかったです。

ディレクトリ構成

不要なものは削除していますが、以下のようなディレクトリ構成にしました。

.
├── app.vue
├── components
│   ├── elements
│   ├── organism
│   └── template
├── layouts
└── pages

elementsを作成した背景

個人開発の場合はあまり気にならないかもしれませんが、atomsとmoleculesの分け方の基準が人によって異なるので、認識を揃えることが難しいと感じたためです。
チーム開発になると人の入れ替わりや外部のメンバーが入ることも想定されるのでわかりやすい設計が必要だと感じました。

organismの役割

organismはelementsを組み合わせて再利用性が高く1つの意味のあるまとまりにすることを目指しました。
お問い合わせフォームやヘッダー、フッターなどがorganismになると考えました。ブログ記事のカードもorganismになると考えています。

templateの役割

templateはorganismを組み合わせてページを構成するためのコンポーネントです。
ここではAPIを実行したり変数を定義することも許容していました。
ページごとにファイルを作成していました。

pagesの役割

こちらはcomponents内に作成せずにNuxt3のデフォルトのpagesをアトミックデザインのpagesとして扱いました。
templateと同様にAPIを実行したり変数を定義することも許容していました。
layoutsで作成した共通レイアウトの指定、template内のコンポーネントの呼び出しを行っていました。

疑問と課題

疑問

どこまでコンポーネントを分割すべきか？

具体的な例を出すと、テキストはフォントサイズやカラー、太さなどが変わるが1つのコンポーネントとして定義しpropsで受け取った変数によって変更できるようにするべきか？
金額などカンマで区切るものは1つのコンポーネントとして定義し、金額のフォーマットを行うべきか？
などプロジェクトごとの決めの問題な気もしますがどこまで細かく分けるべきか悩みました。
次回移行のプロジェクトでテキストだけでコンポーネントを作成してみたいと思います。

ほぼ全ページで使用するコンポーネントの扱い

ヘッダーをorganismに作成していました。
しかしorganismではPropsでデータを受け取り表示するだけのコンポーネントとして扱っていたため、ヘッダーで共通の処理をルール上、記載することができませんでした。
今回はフッターがページによって変わるデザインだったためlayouts内に複数のファイルを用意しそれぞれでヘッダーを呼び出していました。
この時毎回ヘッダーに表示するテキストなどをPropsで渡すのは面倒だと感じました。
今回はヘッダーは例外として扱いcomposablesから変数や関数を呼び出すことを許容しました。
しかし、他のコンポーネントでも同様のことを許容するとアトミックデザインのメリットがなくなるため、今後のプロジェクトではどのように扱うか検討したいです。

課題

大した課題ではないですが、elements内のコンポーネントの数がかなり増えてしまったためエディタ上でみた時に見づらくなってしまいました。
作成してから時間が空いた時に自分がどのコンポーネントを作成したのか覚えていなかったため探すのに時間がかかりました。

解決策

elements内でカテゴリ分けをする
ストーリーブックを導入する

この2点である程度解決できると思います。
ストーリーブックは工数や納期との兼ね合いもあるので余裕がある時に試したいです。

まとめ

アトミックデザインを採用してコンポーネントを設計してみた感想をまとめました。
今回はatomsとmoleculesをまとめてelementsとして扱い、elements、organismはPropsでデータを受け取り表示するだけのコンポーネントとして扱いました。
他にも設計方法はあると思うので、いくつか試して弊社ではどの設計が一番使いやすいか検証していきたいと思います。