銀行員からのRailsエンジニア

銀行員からのRailsエンジニア

銀行員から転身したサービス作りが大好きなRailsエンジニアのブログです。個人で開発したサービスをいくつか運営しており、今も新しいサービスを開発しています。転職して日々感じていること、個人開発サービス運営のことなどを等身大で書いていきます。

【読書まとめ27】Atomic Design 〜 堅牢で使いやすいUIを効率よく設計する

個人で開発しているサービスに Atomic Design を採用しているのですが、雰囲気で使っており一度体系的に学びたいと思いこの本を読みました。

Atomic Design やその周辺知識をまとめて得ることができたので読んで良かったです。

後から見返せるように、ポイントを簡潔にまとめました。 

f:id:ysk_pro:20200825083937p:plain

Atomic Designとは

 

コンポーネントベースでの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を使った豊富なサンプルがあり、さらにテストにも言及しており学ぶことがとても多かったので、ご興味ある方はぜひご覧ください。

この本を読んで、個人開発しているサービスのコンポーネントの分け方で改善したいところが色々と出てきたので、どんどん実践していこうと思います。