「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」を読んでコンポーネント設計を学んだ

4/25に発売された「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」を読みました。
ちょうど中~大規模なサービスにおけるコンポーネントの設計で悩んでいたところで、良きタイミングで良書を読めたので、著者の五藤さんには本当に感謝です🙏

Atomic Design ～堅牢で使いやすいUIを効率良く設計する

コンポーネントの設計という観点で個人的に特に学びがあった、参考になった部分をメモがてら以下にまとめていきます。
(Atomic Designって何?という方は、 Atomic Designの考え方と利点・欠点 に概要がわかりやすくまとまっているのでオススメです)

■MoleculesとOrganismsの分け方(3章5節)
本書を読むまではMoleculesとOrganismsの境界が曖昧でモヤッとしてたのですが、
Molecules -> 独立して存在できない(ヘルパーなコンポーネント)
Organisms -> 独立して存在できる(スタンドアローンなコンポーネント)
という説明で大分クリアになりました。

■デザインカンプからコンポーネントを分割する(4章2節)
例として通知一覧ページをもとに、
・Atoms
・Molecules
・Organisms
の分類について図示と共に具体的な例が書かれていて参考になりました。

■ロジックと表示に関する責務を分離する(4章4節)
責務の分離の実装方法として、
・コンテナーコンポーネント
・プレゼンターコンポーネント
をサンプルコードと共に詳しく紹介されていて参考になりました。

■コンポーネントに適切なスタイルを与える(4章5節)
レイアウトしやすいコンポーネントのポイントとして、
・座標値 (position/top/bottom/left/right)
・幅、高さ (width/height)
・余白 (margin)
・浮動、解除 (float/clear)
辺りは極力関心を持つべきではなく、外からスタイルを設定できるようにすべきとあり、実装例を含めて参考になりました。

全体を通して

・Atomic Designの事例はまだまだ少ないと思うので、大規模サービス(AbemaTV)で得た知見としてatoms,molecules,organismsの分類例を知れるということは大きな価値だと感じました。
・サンプルコードがReactなので、Reactを触ったことがない方への敷居は若干高い印象を受けました。(自分はVueを利用する想定なので脳内でVueで実装するならこうかな？と思考しながら読みました)
・storybookなどでどういったコンポーネントがどの粒度に属しているのかを一覧化することは、指標がブレないようにする意味でも有用だろうと感じました。(特に規模が大きくなってコンポーネントの数が増えてきたとき)
・デザイナー陣から理解得ることの難しさや導入の障壁については「たしかに」と納得したのですが、弊社のデザイナー陣はガリガリとコードも書いてるしエンジニアの考え方も持ち合わせているので、その辺りは安心して導入できそうだなと感じました。ただ、予め方向性とルールはきちんとすり合わせないと痛い目見そうですね。

Atomic Designが気になっている方にはもちろんオススメできますが、実装例としてReactのサンプルコードの記載も多いので、Reactを勉強する過程で入門書の次の参考書としても有用なのではないかと思いました。