転職用ポートフォリオで取り入れた Atomic Design のコンポーネント設計（Next.js）

アプリ開発の際のコンポーネント分割および管理方法に困ったことはありませんか？
最近、Atomic Designに関して学んだため、アウトプットとして記録いたします。

---

📌 使用ツール

• Next.js (App Router)
• TypeScript

---

📌 Atomic Designとは？

• UIを小さな部品から大きな部品へと組み合わせていく設計手法
• 5階層に分かれていますが、最初は Atoms / Molecules / Organisms の3つを使えば十分だと感じました
  → Next.jsのApp Routerとの相性が良いため。

Atoms： 最小単位（Button, Input, Spinnerなど）
Molecules： 小さな組み合わせ（FormField, DatePickerなど）
Organisms： 大きめの部品（SectionCard, GoalCardなど）
Templates / Pages： Next.jsの layout.tsx / page.tsx に相当のため割愛

---

📌 ディレクトリ構成例

src/
  components/
    design-system/
      atoms/
        Button.tsx
        Input.tsx
        Spinner.tsx
      molecules/
        FormField.tsx
      organisms/
        SectionCard.tsx

---

📌 実装例

atoms: Button

// atoms/Button.tsx
"use client";
type Props = { children: React.ReactNode } & React.ComponentProps<"button">;
export default function Button({ children, ...props }: Props) {
  return (
    <button
      {...props}
      className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
    >
      {children}
    </button>
  );
}

molecules: FormField

// molecules/FormField.tsx
import Button from "../atoms/Button";
export default function FormField() {
  return (
    <div>
      <label className="block text-sm font-medium">Name</label>
      <input className="mt-1 w-full rounded border px-2 py-1" />
      <Button>送信</Button>
    </div>
  );
}

organisms: SectionCard

// organisms/SectionCard.tsx
import { ReactNode } from "react";

export default function SectionCard({ children }: { children: ReactNode }) {
  return (
    <section className="rounded-md bg-white p-4 shadow">{children}</section>
  );
}

---

📌 まとめ

• Atomic Design を使うとコンポーネントを役割ごとに整理できる
• Atoms / Molecules / Organisms の3階層だけでも十分効果的
• Next.js の layout.tsx / page.tsx が Templates / Pages の役割を担う

転職を進める上でオリジナルアプリを開発しておりますが、
初めてのアプリでも設計意識を持って取り組めるのでおすすめです！