コンポーネント

フロントエンド開発の現場では、画面全体を一度に組み上げるのではなく、ボタンやフォームといったUI部品を先に設計・実装し、それらを組み合わせてページを完成させるアプローチが主流になっています。この手法が コンポーネント駆動開発（CDD: Component-Driven Development） です。 CDDはUIの再利用性・テスト容易性・デザインの一貫性を同時に高められる設計手法ですが、ツール選定や粒度設計で迷うケースも少なくありません。ここでは、CDDの基本原則からツール比較、フレームワーク別の実装手順、そして導入時に陥りやすい失敗パターンまでを実務の観点で整理します。 コンポーネント駆動開発（CDD）の定義と基本原則 CDDはボトムアップ方式のUI構築手法です。従来のページ単位のトップダウン開発と異なり、最小のUI部品（コンポーネント）から設計を始め、それらを段階的に組み合わせて画面全体を構成します。 ボトムアップ設計の流れ CDDにおける設計フローは次の4段階で進みます。 最小部品の設計: ボタン、テキスト入力欄、アイコンなど、これ以上分割できない要素を定義 複合部品の組み立て: 最小部品を組み合わせて検索バーやカードUIなどの中規模コンポーネントを構築 セクション単位の統合: 複合部品をまとめてヘッダー、サイドバー、フッターなどのページセクションを形成 ページの完成: セクションを配置し、ルーティングやデータ取得ロジックを接続 この流れにより、各コンポーネントは単体で動作確認やテストが可能な状態を保てます。 CDDが解決する3つの課題 課題 従来手法での問題 CDDによる解決 UI の不整合 ページごとにボタンの見た目や挙動が異なる 共通コンポーネントを使い回すため一貫性を維持 テスト困難 ページ全体を起動しないとUIを確認できない コンポーネント単位で独立してテスト可能 デザイン変更の影響範囲 修正箇所が散在して把握しにくい コンポーネント1箇所を修正すれば全ページに反映 Atomic Designとの関係 — そして「その先」の分類手法 CDDにおけるコンポーネント分類の定番として知られるのが、Brad Frost氏が2013年に提唱したAtomic Designです。化学の概念をUIに当てはめ、5段階の階層を定義しています。 階層 名称 具体例 第1層 Atoms（原子） ボタン、ラベル、アイコン 第2層 Molecules（分子） 検索フォーム（入力欄 + ボタン） 第3層 Organisms（生体） ヘッダー（ロゴ + ナビ + 検索フォーム） 第4層 Templates ページレイアウトの骨格 第5層 Pages 実データが入った最終画面 「Atomic Designは古い」と言われる背景 検索トレンドを見ると「アトミックデザイン 古い」「アトミックデザイン 代替」といったキーワードの検索需要が増えています。批判の主なポイントは以下のとおりです。 分類の曖昧さ: MoleculesとOrganismsの境界が開発者によって異なり、チーム内で認識がずれやすい 過剰な階層: 5階層すべてを律儀に適用すると、ディレクトリ構造が深くなり管理コストが増大する 機能ベースとの相性: ドメインや機能単位でディレクトリを分けるアーキテクチャ（Feature-Slicedなど）と噛み合わない場面がある Atomic Designに代わる分類アプローチ 実務ではAtomic Designをそのまま採用するのではなく、プロジェクトの規模に合わせてシンプル化した分類が増えています。 ...