個人で開発しているサービスに Atomic Design を採用しているのですが、雰囲気で使っており一度体系的に学びたいと思いこの本を読みました。
Atomic Design やその周辺知識をまとめて得ることができたので読んで良かったです。
後から見返せるように、ポイントを簡潔にまとめました。
Atomic Designとは
- UIコンポーネントを5つの階層に分類する
コンポーネントベースでのUI開発のメリット
- 再利用性が高い
- 再利用されることで、統一された使い勝手をユーザーに提供できる
- コンポーネント毎に独立しているので、複数人で並行して実装しやすい
- コンポーネント単位でテストできる
各階層について
小さい方から1つずつ説明します。
Atoms
- これ以上UIとしての機能性を破壊しない最小単位。使い回しやすいように、抽象的な機能だけを持つように作られる
- (例)ボタン、テキストフォームなど
- (関心事)デザインの統一性
Molecules
- 機能を組み合わせてユーザーの具体的な行動に応える機能の単位
- (例)Atomsのボタン、テキストフォームなどを組み合わせた検索フォームなど
- (関心事)行動を阻害しない操作性
Organisms
- 独立して成立するコンテンツを提供する
- (例)ユーザーの投稿を表示するコンポーネント
- (関心事)ユーザーの行動を促すコンテンツ
Templates
- 具体的なコンテンツを持たないページの雛形。OrganismsやMolecules、Atomsのコンポーネントを実際のページの通りに配置する
- (関心事)画面全体のレイアウト
Pages
- Template層のコンポーネントに実際のコンテンツを流し込んで、ユーザーが実際に触れるもの
- 各ページに1つ作られ、この層は再利用されない
コンポーネントを階層化するメリット
- 全体を考慮する必要がなく、1つの層の関心事に集中できる
- 同一層に属するコンポーネントであれば差し替えやすく、A/Bテストなどもスムーズに行うことができる
- 更新頻度の高い上位層(Pages、Template)のUIコンポーネントの変更が、下位層に影響しない
知っておくと役に立ちそうなこと
-
MoleculesとOrganismsの分け方
-
-
どちらに含めるか悩むケースは多いので、次のような判断基準で分けるのがよい
-
-
-
Organisms:独立して存在できるコンポーネント(単体で見たときに意味が分かる)
-
- 命名について
-
-
-
Atoms:Button, Image, Text
-
-
-
Molecules:SearchForm, Pagenation
-
-
-
Organisms:Header, NotificationList
-
-
-
Templates:MyPageTemplate, ContactTemplate(Orgainsms層との名前の重複を避けるため、共通してTemplateを後ろにつける方法がよく使われる)
-
-
-
Pages:MyPagePage, ContactPage(Template層のコンポーネントに実際のデータを適用したものがPages層なので、Template層のTemplateをPageに変えると分かりやすい)
-
-
ReactはコンポーネントベースでUI開発することに特化したJavaScriptライブラリで、Atomic Designと相性がよいため一緒に使われることが多い
おわりに
ここまでお読みいただきありがとうございます。
本書ではReactを使った豊富なサンプルがあり、さらにテストにも言及しており学ぶことがとても多かったので、ご興味ある方はぜひご覧ください。
この本を読んで、個人開発しているサービスのコンポーネントの分け方で改善したいところが色々と出てきたので、どんどん実践していこうと思います。