2019/11/14「Atomic Design」 で学ぶコンポーネントUI 設計
UI設計の「Atomic Design」という手法について書かれた本です。 Atomic Designとはざっくり言うと、小さいコンポーネントを組み合わせて大きなコンポーネントを作っていくという特長を持つ、設計フレームワークの一つです。一番小さな部分をAtomic すなわち原子として設計していきます。
アプリのUI開発において、学べる点が多そうだと思い手に取りました。
Reactをつかった実装例も掲載されています。結構厚めの本で内容は盛り沢山。UI設計に関わる人のみでなく、エンジニア・デザイナーにも学びが多い本でした。
実装例が豊富に掲載されており関連内容としてテストに関する内容も多く、とても参考になりました。 ReactをはじめとするWebプラットフォームでの開発はもちろん、ReactNativeによるアプリの開発にも大きく活かせると感じています。
概要
- UI設計の現状
- コンポーネントベースのUI開発
- Atomic DesignによるUI設計
- コンポーネント設計の実践
- UIコンポーネントのテスト
- 現場におけるコンポネント・ベース開発のポイント
UI設計の現状
直感的なUI
直感的なUIについてわかりやすい定義がありました。
「UI is Communication」の著者 Everett N.McKayの定義だそうです。以下引用します。
- UIの見た目から与えられる情報が適切なこと
- UIが期待通りに動作すること
- UIが効率的で最小の工数で目的を達成できること
- UIが適切なタイミングでフィードバックを返すこと
- ユーザーがミスを犯してもすぐに修正可能なこと
- ユーザーが安心してアプリケーションを遷移できること
- それ以外でストレスがないこと
css命名規則 BEM
Block、Element、Modifierの3つのパターンのクラスセレクターで実装するcssの設計手法。 クラスセレクターを読むだけで要素の役割を把握できます。 それでもCSSの言語的な仕様によって制限され、なかなかコンポーネント化による再利用には難易度があります。
- Blockは 独立しており再利用が可能なコンポーネント
.menuや.search-formなど - Elementはコンポーネントを構成するパーツ
.men__linkや.search-form__inputなど - Modifierは変化を加えることを示す
.search-form__input_disableなど
コンポーネントベースのUI開発
メリット
- コンポーネント単位でテストが可能
- 不具合のリスク・ポイントを減らせる
- メンテナンスしやすい
- 解決する問題が小さくなる
コンポーネントは部品、つまり単語
UIとは会話です。コンポーネントは部品であり、会話における単語と通じる部分があります。 複数の単語の組み合わせで会話ができるのと同じです。
同じ単語を異なる意図・用途で使ったり、それと似たような感覚です。
コンポーネントの4つの特長
- カプセル化されている
- 置換可能である
- 再利用可能である
- 別のコンポーネントを組み合わせて作成可能
単一責任の原則と関心の分離が重要だそうです。
Atomic DesignによるUI設計
Atomic Designの粒度
- Atoms 原子
- Molecules 分子
- Organisms 有機体
- Templates テンプレート
- Pages ページ
うち、上記3つは化学の用語を用いており、それらは開発者が認識する用語になっているそうです。 それ以外の2つはクライアントなどにも共有すべきものという切り分けになっています。
Molecules か Organisms か
粒度によってはややこしいものもある印象です。
独立して存在できるものは「Organisms」、他のコンポーネントの機能を助けるものは「Molecules」に該当します。
動作を行うもののみはMoleculesで、その対象となる情報も含めたものがOrganismsといったところですかね。
コンポーネント設計の実践
本の例では、node,yarn,Storybookを使って実装をしています。StorybookやReactの使い方も丁寧に書かれているので、npmを利用したことがあるくらいの経験があれば十分に試すことができる優しさです。
ここからサンプルのソースコードが多くなります。私が思っていたよりもガッツリなので、開発をやっている人にはとてもおもしろい内容です。 逆に設計が中心でプログラミングの役割を持たない人には、すこし重たいかもしれません。 できれば目を通しておくと役に立つと思います。
UIコンポーネントのテスト
テストのやり方や実装方法が書かれています。テストフレームワークJestを使ったテストのやり方が書かれており、大いに役に立ちました。
コンポーネント設計はテストや管理もやりやすくなります。そのあたりの恩恵をもれなく手に入れるために、ぜひこのあたりは開発者に読んでほしいと思いました。
ユーザービリティテスト
Lighthouseの利用に加えてaXeの利用がおすすめ。
Chromeの拡張機能として公開されています。developer toolからチェックができ、報告の内容・修正方法もわかりやすく便利でした。対象箇所のハイライト・修正案の提示など詳細な報告が得られます。
私は試しませんでしたが、Jestで実行させることもできるようです。そうなると逐次実行する必要なくためとても便利です。時間があったら試してみます。
現場におけるコンポネント・ベース開発のポイント
実際の現場で起こりがちな、トップダウン対ボトムアップの構図についての考察がされています。 コンポーネント設計にはそれぞれの協力が必要となり、開発フローの変更も求められることがわかります。
おわりに
概念的な話より実装的な内容が多かったように思います。サンプルコードもたくさんありますし、デザイナーよりもエンジニアよりの内容だったのか私は興味をもてました。
テスト関連の情報も豊富に載っています。今まで取り組んでいなかった方もテストをしっかり行うという目的で、Atomic Designは良い手法なのではないかと感じます。
ソースコードがあまりにも無法状態なため、どこからテストをかけばいいかわからないというプロジェクトも多いと思います。そういったものも解決できるように、予めテストや運用・保守も視野に入れて設計の段階から取り組むことが大切です。
