注目キーワード
  1. react
  2. docker
  3. インターン

Atomic Design読んでみた

フロントエンドのコンポーネント設計に悩むことが多かったので、Atomic Designに関する本を読んで勉強してみたのでその内容と使えそうだなと思ったところをまとめてみました。

ちなみに読んだ本は有名なこちらの本です。

本書では、UI設計のこれまでの問題をあぶり出し、設計の本質から、具体的な手順、UIテスト、現場でひっかかりやすいポイントまでを、インターネットテレビ「Abema TV」のUI設計で実践導入した著者が解説。

Atomic Designとは

アトミックデザインとは、webフロントエンドにおけるコンポーネントを化学の原子や分子のように組み立てていこうという考え方の設計手法です。具体的には、Atoms < Molecules < Organisms < Templates < Pages です。

Atoms

それ以上分轄できない最小単位の抽象化されたコンポーネント(例:ボタン・テキストインプット・テンプレート)

Molecules

Atomを組み合わせユーザーの具体的な動機を与えるコンポーネントでサポート的な機能を持たせる(例:検索フォーム)

Organisms

独立して成立するコンテンツで、これだけで存在しうる。

Templates

画面全体のレイアウト・コンテンツとプロダクトのUI機能を分離するために大事なレイヤー

Pages

実際のアプリケーション

という、5つの層に分けて設計をしていきます。役割が似ていてややこしい層もあるのですが、次のコンポーネント設計における2つのポイント(特に関心の分離)においてこの層分けが真価を発揮します。

コンポーネント化における重要な2つのポイント

これはオブジェクト指向における原則でもあります。

単一責任の原則

ひとつのコンポーネントはひとつのことにしか責任を持つべきでないという原則です。

例えば、表示に関する責任とデータの整形や条件分岐などのロジックを混合させるべきでないということです。
これらのことをやってしまうと、不具合が生じたときに問題の究明が遅くなったりテストがしにくかったりと保守性の問題に繋がります。

関心の分離

単一責任ではコンポーネント単位の話でしたが、こちらは層ごとの責任に関してです。
同じ層に属するコンポーネントは同じことに関心を持たせるようにすることで開発がしやすくなります。

具体的には、

Atoms:デザインの統一性
Molecules:行動を阻害しないコンテンツ
Organisms:行動を促すコンテンツ
Templates:画面全体のレイアウト
Pages:アプリケーションそのもの

です。

関心や責任を分離し一つの責務に関わることに集中できることで、開発やテストがしやすいだけでなくユーザビリティの向上にも繋がります。
また、上位の(より具体的な)コンポーネントの変更が下位のコンポーネントの影響することはありません。

具体的なTips

読んでいてなるほどなって思ったところをピックしました。

Atom層におけるテンプレート

Template層におけるテンプレートはアプリケーション全体に責任を持つので汎用的ではありません。例えば、共通で使えそうな2カラムのレイアウトを定義したり、Molecules, Organismsで使う共通のレイアウトを定義したりといったことが可能です。(ただしこれはそのコンポーネントの表示側に責任を持たせてもいいのかも)

各コンポーネント内をさらに分割する

Atomsは最小単位なんじゃないのか!って言いたくなると思いますが、それは利用上分割が不可能なだけでコンポーネント内では表示とロジックを分した方が綺麗で保守性の高いコードになります。

例の本では、presentationalとcontainerを分ける設計が紹介されていました。これによりロジックは同じだけど見た目が若干違う、またはその綺麗に実装できるようになります。
綺麗というのは、一つのビューに条件分岐が大量にあってどれが適用されるのかがわかりにくくて再利用生が低いものをいいます。

storybookによる手動テスト

storybookとは、各コンポーネントを単体でモックを作ることができるnpmのパッケージです。様々なパターンを簡単にテストできるだけでなく、ドキュメントとしても機能するので非常に便利です。

storybookの例

このような見た目でオンラインで公開することもできるので、エンジニア以外も簡単に確認することができます。

プラグインを入れることにより仕様のメモやアクションを定義することもできるようになります。またBackstop.jsを使うと複数のレイアウトを並べて検証ができるようになるようです。

本書では、UI設計のこれまでの問題をあぶり出し、設計の本質から、具体的な手順、UIテスト、現場でひっかかりやすいポイントまでを、インターネットテレビ「Abema TV」のUI設計で実践導入した著者が解説。

実際に何か作ってみようと思うのですが、いいものが思いつかなくてボタンだけ作って終わっているという、、w

また、以下のスライドでも設計について説明しているのでよかったら参考にしてください。