3. Atomic Design

Atomic Designについて

Atomic Designはコンポーネントを分割する際の指針となる考え方です。
物質の構成要素のメタファーを用いて、Atoms, Molecules, Organisms, Templates, Pagesという粒度に分けてWebサイトを構成するコンポーネントを整理することを目標とします。

AtomsはボタンやフォントなどUIコンポーネントの最小の構成要素です。
このプロジェクトではcomponents/atoms/というディレクトリに配置しています。

Moleculesは複数のAtomを組み合わせて作られる構成要素です。
このプロジェクトではcomponents/molecules/というディレクトリに配置しています。

Organismsは複数のMoleculeを組み合わせて作られる構成要素です。
このプロジェクトではcomponents/organisms/というディレクトリに配置しています。

Templatesは複数のOrganismを組み合わせて作られるページの枠組みです。
Nuxt.jsではTemplatesはcomponents/以下ではなく、layouts/というディレクトリに配置します。

PagesはTemplateから実際に描画される具体的な各ページです。
Nuxt.jsではpages/というディレクトリに配置します。