コンポーネントをいい感じに整理しよう（Atomic Design）
概要
先日、作成中のBINGOアプリのミーティングで「コンポーネントをいい感じに整理しよう」となり、コンポーネント整理についていろいろ調べました。その時に、Atomic Designを調べたので自分なりにまとめてみました。 なお、本記事はアプリ開発初心者が書いているため、一部事実と異なる場合があるかもしれません。本記事を参考にする際は、気を付けてください。
そもそもコンポーネントって何？？
世の中のアプリケーションはコンポーネント指向という考え方で作成されていることが多いです。コンポーネント指向はざっくり言うと、コンポーネントをたくさん作ってそれらを組み合わせて一つのアプリを作ろうって感じです。
まてまて、コンポーネントってなんだよって思う方もいるかもしれません。コンポーネントは日本語にすると「部品」ですが、その名の通りアプリケーションを構成する部品を指します。アプリケーションにおける部品とはボタン,入力フォーム,ヘッダー,フッダーなどなどです。例として、下の図ではBINGOアプリを構成しているコンポーネントたちを紹介しています。
ここまで読んでよくわからねーよって方は、車を製造する場面を考えてみてください。一つの車を作るとき、フレームやエンジン,ハンドル,座席などなどいろんな部品を組み合わせて作られてますよね。これらがアプリケーションでいうコンポーネントになるわけです。
コンポーネント整理とは
ここまで来たらコンポーネント整理が何をすることなのか想像できるのではないでしょうか。コンポーネント整理とは、作成したコンポーネントをわかりやすくフォルダ分けしようって話です。先ほどの車の話で言えば、各部品を倉庫に保管するときに乱雑に置くのではなく、ある程度グループ分けして保管しましょうってことです。その方が、探している部品やほしい部品が見つけやすいですよね。 アプリケーションでも同じことが言えます。大きなアプリケーションになるとコンポーネントの量も増えていきます。このコンポーネントってどんな働きをするっけ？って時に作成したコンポーネントのコードを見に行くわけですが、なかなか見つからないとイライラするし、効率悪いですよね。だから、コンポーネント整理が大切なわけです。 コンポーネント整理の方法はいろいろあります。例えば、コンポーネントの大きさで分けたり、機能ごとで分けたり、など様々な方法が考えられます。その一例としてAtomic Designと呼ばれる方法が多くのアプリケーション開発で使われています。
Atomic Designとは
いよいよ本題です。Atomic Desinはコンポーネントの大きさで分けて整理します。各コンポーネントを小さい順にAtoms（アトム） ,Molecules（モレキュール）,Organisms（オルガニズム）,Templates（テンプレート）,Pages（ページ）の5段階で分類します。
下の図は開発したBINGOアプリをAtomic Desinに従って分類した図です。下位の階層のコンポーネントを組み合わせて上位のコンポーネントが作られ、Pages近づくにつれてコンポーネントの大きさが大きくなっていることが分かると思います。
それぞれの階層についてもう少し詳細に解説します。
Atoms
最も基本的なUI要素です。ボタン、インプット、ラベル、アイコン、色、フォントなど、最小単位のパーツが含まれます。単体ではあまり意味を持たず、スタイルや小さな動作のみを持つことが多いです。
Molecules
複数のAtomsを組み合わせた小さなコンポーネントで、ひとつのまとまった機能を持ちます。例えば、ラベルと入力フィールドを組み合わせた「フォーム入力」や、「アイコン付きのボタン」などが該当します。複数のAtomsを組み合わせたときに、特定の機能を果たすように設計します。
Organisms
複数のMoleculesやAtomsを組み合わせて、より複雑なUIパーツを形成します。UIの中で独立した機能ブロックとなることが多く、ヘッダーやフッター、サイドバーなどの大きなコンポーネントに当たります。Organismsレベルではレイアウトや構造が加わり、画面の一部としての役割を果たします。
Templates
rganismsやMoleculesを組み合わせ、画面全体のレイアウトや構造を作り上げる土台となります。コンテンツが配置される場所を示す「骨組み」として機能します。Templatesは基本的なレイアウトのみを含み、まだ具体的なコンテンツ（テキストや画像）は挿入されません。
Pages
Templatesにデータを組み込んだアプリケーションの完成形です。ユーザーに対して提供される最終的なページとしての役割を果たします。
Atomic Designのメリット
再利用性の向上
Atomic Designでは小さな構成単位（Atoms）から始まり、組み合わせによって複雑なコンポーネントを形成するため、ページ間やプロジェクト間で簡単に使い回せます。再利用性が高いことで、同じコードやデザインを複数箇所で流用でき、開発やデザイン作業を効率化できます。
一貫性の確保
Atomic Designを使うと、各コンポーネントに対して色やフォントサイズなどのデザインルールを設定できるため、全体で統一された見た目を保ちやすくなります。 例えば、どのページでも同じボタンコンポーネントを使用するようにすれば、サイト全体が統一されたデザインに見え、ユーザーにも分かりやすくなります。 これにより、アプリの統一感も自然と維持でき、利用者にとって一貫性のある操作体験が提供できます。
効率的な開発
Atomic Designでは、各階層のコンポーネントを小さい単位から組み合わせて作るため、チーム内で役割分担がしやすくなります。 例えば、デザイナーや開発者がそれぞれAtoms、Molecules、Organismsを担当し、並行して作業することができます。また、既に作成済みのコンポーネントがある場合は、新たに作成する手間を省けるので、すでに存在する部品を組み合わせるだけで作業を完了できます。 こうして効率的に作業を進められるので、プロジェクトの全体的な開発スピードが上がります。
保守性の向上
もし個別のページで異なるボタンのデザインが設定されていた場合、従来の方法ではすべてのページで変更する必要がありますが、Atomic Designを使えば、一か所の変更だけで他のページにも変更が行き渡るため、メンテナンスが非常に簡単になります。 例えば「ボタンの色を変更したい」といった場合も、Atomsで定義したボタンのデザインを変更するだけで、サイト全体に自動的に反映されます。 また、コードがモジュール化されているので、バグが発生した際も特定のコンポーネントだけを修正すれば良く、問題箇所を特定しやすいという利点もあります。
スケーラビリティ
Atomic Designは、既存のコンポーネントを組み合わせてUIを構築するため、プロジェクトの拡張が容易です。 例えば、新しいページや機能を追加する場合でも、AtomsやMoleculesを組み合わせてページを構成すれば、すでに作成したコンポーネントを活用できるため、ゼロから作る必要がなくなります。 また、新たに作成するコンポーネントも、Atomic Designのルールに従うことで、既存のデザインとの整合性が保てるので、プロジェクトが大きくなってもUIの品質を落とすことなく管理できます。
BINGOではどうしたの？？
結論から言うとAtomic Designは採用せずに、ボタン関係のコンポーネントやアイコン関係のコンポーネントなど、同じような機能を持つコンポーネントでまとめました。主な理由は2つあります。
- 新入生にとってAtomic Designがわかりずらい可能性がある
- 各階層の認識をメンバー内で統一しないと、適切でない階層に新しいコンポーネントを入れてしまう可能性がある。
新入生が理解しやすい構成という観点で考えると、Atomic Designは理解すると便利かもしれませんが、少々複雑に感じる人もいるだろうといった意見から機能で分類することになりました。
最後に
コンポーネント整理はコードの可読性を上げるためには必要不可欠です。しかし、その方法はいろいろあり、Atomic Designはその一つにすぎません。プロジェクトの規模や作業期間、プロジェクトメンバーなどによって最適なコンポーネント整理方法は異なります。Atomic Designをベースに階層を増やしたり、減らしたりしてもいいし、独自の分類ルールで整理してもいいと思います。自分のプロジェクトに合った方法を使ってみてください。