【Vue.js】コンポーネントの設計について(Atomic Design等）

基本方針

• どのような親コンポーネントから使用されたとしても耐えうるように疎結合なインターフェイスにする。
• コンポーネントは再利用されることを意識した設計にする。（親コンポーネントに依存しない設計にする。）

分割の方法

ページをいくつかの要素に分割してツリー状に構成することを考えます。

例

以下のように階層化してコンポーネントを分割していきます。PowerPointなどに図に書き出すなどした方が良いでしょう。

• ナビゲーションバー
• サイドバー > カテゴリーアイテム
• メインコンテンツ > アイテム

これを考えることができればどのような粒度でコンポーネントを分けるかが見えてきます。

表示コンポーネントとコンテナーコンポーネントに分ける

ストアへのアクセスが「コンテナーコンポーネント」に制限されるので表示コンポーネントの再利用性が高くなるというメリットがあります。

表示コンポーネント

見た目を表現するためだけのものでストアへのアクセスはせずに外部のAPIリクエストも持ちません。イベントをコンテナーに伝えたり、ストアからのデータをpropsでコンテナ経由でもらいます。

コンテナーコンポーネント

動作にフォーカスを当てたもので、ストアに対してアクションを発行したりデータをストアから取得できたりします。

Atomic Design

2013年にBrad Frost氏によって考案された設計手法です。コンポーネントを下記の5つの段階に分けて管理するデザイン手法です。

• Atoms(アトムス）
• Molecules(モルキュース）
• Organisms(オーガニズムス）
• Templates(テンプレーツ）
• Pages(ページス）

Atoms

ボタンやラベル、カラーパレット、フォント等の最小要素です。以下のように実装します。atomsの中でもさらにbuttonなどパーツごとにカテゴリー分けするとパーツを探しやすくなります。

Molecules（モルキュール）

ラベル付きのフォーム等、複数のAtomで構成したものです。

Organisms

ログインフォーム、コメントフォーム、ナビゲーションバー等のMoleculesより複雑なコンポーネントです。アメブロではここのコンポーネントがストアにアクセスし状態を保持できるという規約を設けています。

Templates

Organismsを組み合わせたワイヤーフレームです。これを見ればページ構成が説明できます。layoutですね。Next.js使っているならlayoutはデフォルトで要素として保持しているので、不要かもしれません。

Pages

実際のデータをTemplateに当てはめたものです。Next.js使っているならpageはデフォルトで要素として保持しているので、不要かもしれません。

ヘッダー

グローバルヘッダーとして全体共通コンポーネントとして設計することが重要になります。具体的な実装としてはslotなどを使うと良いでしょう。