Atomic Designについて勉強してみた① (概要)

Atomic Designについて、「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」を購読して勉強&実務で得た知識の整理しました。
そこで、いくつかの記事に分けて備忘録も兼ねてまとめていきたいと思います。
今回は概要Atomic Designの概要です。

前提知識：コンポーネントベースのUI開発について

UIを部品ごとに分けて設計する手法のことです。

導入する利点は？？

開発者目線

・テストがしやすい。部品ごとに品質の担保が可能。
・部品の再利用性が高まる。
・コンポーネント間は疎結合の状態になるので、実装の影響範囲を絞ることができる。思わぬバグなどの回避
・並行して開発が可能なため開発速度を向上できる

ユーザー目線

・共通の部品で画面が構成されるため、利用方法が理解しやすい。

個人的には、コンポーネント間が疎結合になることがかなり助かっています。(実装時に気にする箇所が少なくなりますし、バグ発生原因の特定も容易になります。)
それでは、本題のAtomic Designについて見てみます。

Atomic Designとは

コンポネートベースでの開発のフレームワークです。
アメリカのWEB DesignerであるBrad Frost氏が提唱しました。
UIをどのような単位で分割すれば良いか示してくれます。

Atomic Designでは、UIを５つのレイヤーに分割します。(それぞれのレイヤーの具体的な説明は別記事で行います。)
・Atoms(原子)
最小のコンポーネント(ボタンなど)
・Molecules(分子)
ユーザーの動機に答え、具体的な役割を持たせたコンポーネント(検索フォームなど)
・Organisms(有機体)
独立して機能が成立するコンポーネント
・Templates(テンプレート)
・Pages(ページ)

出典元：https://atomicdesign.bradfrost.com/chapter-2/　

この図を見ると、Atomsが集まってMoleculesが構成され、Molecules&Atomsが集まってOrganismsができる、といった階層構造になっていることがわかるかと思います。

階層化することにより、
・上位の階層の変更が下位のコンポーネントに影響を与えることがない(気にする影響範囲が少ない)
・UIデザインのどこに問題があるかが顕在化しやすい(ボタンに問題があるのか、ページの構成に問題があるか、など)
といったメリットを享受できます。

また基本的なルールとして
「小さなコンポーネントが大きなコンポーネントを含まない」という依存の方向性
が存在します。Moleculesの中にOrganismsは含まない、といった具合です。

Atomic Designではコンポーネントの簡単な分類方針のみが示されているので、具体的な部分は自分たちで決める必要があります。
私の担当するプロダクトでも、導入初期段階はチーム内で方針をすり合わせながら細かいルールを設定していきました。
ここのルール作りを詳細にやればやるほど、後の開発で悩む時間が減り、効率的だと感じました。

Atomic Designで開発するときに役立つツール

Story Book

https://storybook.js.org/
こちらは、コンポーネントを整理しカタログ化できるツールです。
開発中にどのようなコンポーネントがあったか忘れてしまうor把握していないことで余計なコンポーネントを作成してしまったり、コンポーネントの確認に時間を使ってしますことはよくあります。Story Bookを使用することでコンポーネントの見た目と概要を即座に確認できるので、そのような事態を防ぐことができるほか、開発スピードの向上にもつながります。

まとめ

今回はAtomic Designの概要についてまとめてみました。別記事でもう少し深ぼって書いて行きたいと思っています！

参考文献

• 五藤佑典, 「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」, 技術評論社, 2018

• Atomic Design by Brad Frost https://atomicdesign.bradfrost.com/