この記事は、ラクスパートナーズ AdventCalendar 2025の14日目の記事です。
（個人で25日連続投稿にチャレンジ中のカレンダーになります）
今回は、コンポーネントの設計のAtomic Designについてまとめたいと思います。
Atomic Designとは
フロントエンドを開発する上で、「コンポーネントの構成をどうするか？」は誰もが頭を悩ませる分野だと思います（こんな記事を書いておいてなんですが、私もずっと悩んでおります笑）。
そこで、コンポーネントを効率的に再利用できるよう考案された設計手法がAtomic Designです。
Atomic Designは5つの要素で構成されており、これらを組み合わせることで画面を作っていきます。
こちらAtomic Designの公式ドキュメントです。全て英語ですが、読み切ると
「Atomic Designってこういう考え方なのか！」
というのがわかると思います。
Atoms
コンポーネントの最小の単位です。
- ボタン
- 入力欄(inputやtextarea)
など、ほぼHTML要素のみでこれ以上分解できない、というものが挙げられます。
Molecules
Atomsを組み合わせて構成されています。
- よくある検索フォーム（ボタンと入力欄）
などが挙げられます。
Organisms
AtomsやMoleculesを組み合わせて構成されていますが、OrganismsにOrganismsを使用しても良いとされています。
- ヘッダーやフッター
- サイドメニュー
などが挙げられます（人によっては上記を「Template」に分類しています）。
Template
Organisms以下を組み合わせて構成されています。
ページのレイアウトを表現しており、データは保持しないことが多いです（その名の通り、ページを表示するための「テンプレート（雛形）」として使います）。
プロジェクトにもよると思いますが、
- （画像やテキストなどのデータを流し込んでいない）投稿記事一覧
などが挙げられるのではないかなと思います。
Pages
Atomic Designにおいて、最終的に作られる要素です。
実際のデータをTemplateに流し込んだものがPagesとなります。
- （実際の画像やテキストなどのデータを流し込んで表示した）投稿記事一覧
※ 実際にコンポーネントとして切り出すのはOrganisms以下で、TemplateやPagesを作る機会はない今のフロントエンド開発ではないと思います
そうはいっても難しい
ここまでAtomic Designについてまとめてみましたが、そうはいってもAtomic Designを完璧に適用するのは難しいと考えています。
- 人によってAtomsやMolecules、Organismsの定義の認識が違う
- 汎用の部品を作ったが、プロジェクト固有の機能を持った部品が必要になり、再利用が難しい
そこで、個人的に大事と感じた考え方や良いと思った構成をまとめてみたいと思います。
無理にコンポーネントに切り出さない
いろんな方が記事に書いていますが、私も絶対にコンポーネントとして切り出す必要はないと思います。
無理にコンポーネント化しても、どうしても後で作り直しが発生したり、「コンポーネントに切り出したけど全然使わないじゃん…」といったこともあるためです。
「この部分はいろんな画面で使っているから、コンポーネントに切り出そう」
「デザイナーと認識合わせした結果、決定ボタンをプロジェクト全体で同じ見た目にする必要があるのでAtomsにしよう」
といった形で、開発を進めていく中でコンポーネント化するのが良いと思います（ボトムアップではなく、トップダウンで作っていく）。
チームでAtoms、Molecules、Organismsの定義を確認する
当たり前かもしれませんが、チーム内でAtoms、Molecules、Organismsの定義を確認することが大事です。
特に、コンポーネント内でAPIを呼び出しても良いかは重要だと感じています。
基本的には、コンポーネント内でAPIを呼び出すのは避けた方が良いと思いますが、プロジェクトによっては必要になる可能性もあるので、認識合わせしておくことが大事です。
汎用コンポーネントは「common」、特有の機能を持つコンポーネントは「features」
タイトルの通り、汎用的に使うコンポーネントは「common」、ページ特有の機能を持つコンポーネントは「features」にまとめる、というディレクトリ構成の考え方です。
commons
┗ atoms
┗ molecules
┗ organisms
features
┗ atoms
┗ molecules
┗ organisms
上記のように、commonsとfeatures以下にatoms、molecules、organismsを作っていきます（小規模なプロジェクトなら、atomsは作らなくても良いかもしれません）。
以上となります。
私自身も汎用のページネーションを作ろうとしましたが、結局ページごとに作るハメになった経験があります。
Atomic Designはあくまで設計なので、
記事にしたもの、正直今でもどういう構成にすればベストかに迷っています笑
よければ皆様の考えもぜひコメントしていただけると嬉しいです！
ここまで読んでいただき、ありがとうございました。
参考
公式ドキュメントに加えて、以下の記事も参考にさせていただきました。
ありがとうございました🙇♂️