ReactでAtomic Designを用いたコンポーネント設計について

こんにちは。エンジニアの砂町です。
今回はReactのコンポーネント設計のことについてお話ししようと思います。

Reactで開発する際、再利用などを考慮してコンポーネントを分割していくと思うのですが、どのように分割するのが正解なのかって難しいですよね。
色々調べてみても正解はなく、プロジェクトの規模や会社によっても異なるのかなという印象です。
今回は一例としてAtomic Designという設計手法をご紹介します。

Atomic Designとは

先ほどコンポーネントの分割に正解はないと言いましたが、共通している部分としては、部品（コンポーネント）を組み合わせて一つの画面を作っていくということです。
部品を組み合わせて画面を作っていくことで、下記のようなメリットが得られ、開発効率の向上に繋がります。

管理（メンテナンスやテスト）がしやすい
再利用によりコードの量を減らせる
複数人による並行実装が行いやすい

また、Atomic Designでは、Uiの粒度を化学の原子に見立てて設計していきます。
粒度には下記のようなものがあります
・Atoms（原子）
・Molecules（分子）
・Organisms（有機体）
・Templates（テンプレート）
・Pages（ページ）

コンポーネント設計について

では原子に見立てて分けた粒度のそれぞれの役割を見ていきます。

Atoms層は、最小単位の機能を担うコンポーネントになります。
「ボタン」などがそれに当たります。

Molecules層は、AtomsやMoleculesを組み合わせたりして作ったコンポーネントです。
Molecules自体で独立した意味を持つコンポーネントになるのではなく、他のコンポーネントのヘルパー的な役割を担います。
ボタンと入力エリアという部品を組み合わせて作った「検索フォーム」などがそれに当たります。

Organisms層も、AtomsやMoleculesを組み合わせたりして作ったコンポーネントです。
Moleculesとの違いは、コンポーネントで完結できるコンテンツ（独立して存在できるコンポーネント）を提供しているという点です。
SNSなどの投稿一覧部分のカードがそれに当たります。（いいねボタン、ユーザー名、テキストなどのまとまり）

Templates層は、ページ全体のレイアウトに対する責任を担います。
ログイン前のレイアウト、ログイン後のレイアウトなどがそれに当たり、具体的なコンテンツは含みません。

Pages層は、コンテンツとコンポーネントを繋ぐもので、Templateに実際のコンテンツを配置したものとなります。
データを各コンポーネントに流したり、ルーティングと繋げたりするのもPages層で行います。