ReactのAtomic Design入門！初心者でもわかるUIコンポーネント設計の基本
生徒
「Reactって部品を分けて作れるって聞いたんですが、どうやって考えればいいんですか？」
先生
「Reactはコンポーネントという部品を組み合わせて画面を作ります。その設計を助ける考え方がAtomic Designです。」
生徒
「名前が難しそうです…。パソコンを触ったことがなくても理解できますか？」
先生
「大丈夫です。レゴブロックや料理に例えながら、順番に説明します。」
1. Reactとコンポーネントとは何か
Reactは、画面を小さな部品に分けて作るJavaScriptのライブラリです。 この部品のことをコンポーネントと呼びます。 たとえば、ボタン、文字の表示、入力欄などもすべてコンポーネントです。
パソコンを触ったことがない人でも、家を建てる場面を想像するとわかりやすいです。 壁、ドア、窓といった部品を組み合わせて一つの家ができます。 Reactでも同じように、小さな部品を組み合わせて画面を作ります。
2. Atomic Designとはどんな考え方か
Atomic Designは、UIコンポーネントを段階的に分けて考える設計方法です。 名前の由来は、原子というとても小さな単位から始まる考え方です。
大きく分けて、Atoms、Molecules、Organisms、Templates、Pagesという段階があります。 この記事では、初心者向けにReactでよく使う前半の考え方を中心に説明します。
難しい言葉に見えますが、要するに「小さい部品から少しずつ大きな部品を作る」ということです。
3. Atoms（最小単位のコンポーネント）
Atomsは、これ以上分けられない一番小さな部品です。 文字、ボタン、アイコンなどがこれに当たります。
料理で例えると、塩や砂糖のような調味料です。 単体では料理になりませんが、とても重要な存在です。
function Button(props) {
return (
<button>
{props.label}
</button>
);
}
export default Button;
4. Molecules（少しまとまった部品）
Moleculesは、Atomsを組み合わせて作る少し大きな部品です。 たとえば、文字とボタンをセットにした表示などが該当します。
料理で言うと、調味料を混ぜて作るタレのようなものです。 単体で使える形になります。
import Button from "./Button";
function MessageBox() {
return (
<div>
<p>ここにメッセージが入ります</p>
<Button label="確認" />
</div>
);
}
export default MessageBox;
5. Organisms（画面の一部分を構成する）
Organismsは、Moleculesを組み合わせて、画面の一部として使える形にしたものです。 ヘッダーやフォームのまとまりなどが代表例です。
家で言うと、キッチンやリビングのような部屋単位のイメージです。 これだけで「役割」がはっきりします。
import MessageBox from "./MessageBox";
function Header() {
return (
<header>
<h1>サイトタイトル</h1>
<MessageBox />
</header>
);
}
export default Header;
6. Atomic DesignとReactの相性が良い理由
Reactはもともとコンポーネントを再利用する考え方で作られています。 そのため、Atomic Designの段階的な部品分けととても相性が良いです。
一度作った小さなコンポーネントは、何度でも使い回せます。 修正が必要になったときも、一か所直すだけで済みます。
7. 初心者がAtomic Designを使うときの注意点
最初から完璧に分けようとすると、逆に混乱してしまいます。 まずは「これは部品として使い回せそうか？」という視点を持つだけで十分です。
小さく作って、後から分けることもできます。 ReactとAtomic Designは、成長しながら改善していける設計です。
8. Atomic Designを意識した簡単な画面構成例
最後に、全体を組み合わせるイメージを見てみましょう。 小さな部品が集まって、一つの画面になる流れです。
import Header from "./Header";
function App() {
return (
<div>
<Header />
<p>ここがメインの内容です</p>
</div>
);
}
export default App;
