Nuxt.js + Atomic Designのコンポーネント設計

Atomic Design ってなに？

ボタンやテキスト入力欄などの、最小単位のUI部品を組み合わせてレイアウトを構築する設計手法。
部品の単位に名前がついている。

• Atoms：ボタンやテキスト入力欄など
• Molecules：Atoms を組み合わせたもの
• Organisms：Atoms または Molecules を組み合わせたもの
• Templates：Organisms を組み合わせたワイヤーフレームみたいなもの
• Pages：Templates にデータを組み込んだ最終系

例えば、Qiita のヘッダーに Atomic Design を適用してみる。

こんな感じ。

赤：Atoms
青：Molecules
黄：Organisms

Nuxt のディレクトリ構成に適用する

ディレクトリ	Atomic Design
/components	Atoms, Molecules, Organisms
/layouts	Templates
/pages	Pages

/components は /components/atoms みたいな感じで分ける。

設計におけるルール

Atoms

• 他のコンポーネントを使わない
• CSSには margin をつけない
• ボタンのクリック処理等は書かない
  • emit を使って親に渡す

Molecules

• Organisms のコンポーネントを使わない
• Molecules を2つ使って Molecules を構成することも可能
  • 3つ以上だと Organisms にするのをおすすめ
  • ここはプロジェクトにおけるルールに従う

Organisms

• Organisms を組み合わせて作らない
  • コンポーネントの粒度が細かい可能性があるので、設計を見直してみる

ポイント

スロットを活用する

子コンポーネントのボタンを作るとき、中身に <slot /> を入れる。

Children.vue

<button>
  <slot />
</button>

親コンポーネントで中身を記述できる。

Parent.vue

<children>
  {{ text }}
</children>

名前付きスロットを使うと、個別にスロットを指定できる。

Children.vue

<div>
  <slot name="hoge" />
  <slot name="fuga" />
</div>

Parent.vue

<children>
  <template #hoge>
    {{ hogeText }}
  </template>   
  <template #fuga>
    {{ fugaText }}
  </template>
</children>

メリット

• チーム開発で役割分担がしやすくなる
• コンポーネントの依存関係がわかりやすくなる

デメリット

• 開発の初期段階はレイアウトのイメージがつきにくい
  • 設計上、pages は最後に手を付ける
  • Storybook の導入がおすすめ
• Atomic Design の学習コストがかかる

まとめ

便利なものだけど、状況に応じて使い分けよう！