フロントエンドのコンポーネント設計に悩むことが多かったので、Atomic Designに関する本を読んで勉強してみたのでその内容と使えそうだなと思ったところをまとめてみました。
アトミックデザインの本読んでるんやけど、今まで綺麗に書けてなかったコードで気になってたところを綺麗に線引きしてくれてる感がすごい
そして、やっぱreactの柔軟なコンポーネントが好きやなと
— 宮川 竜太朗 (@DragonTaro1031) February 2, 2019
ちなみに読んだ本は有名なこちらの本です。
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のパッケージです。様々なパターンを簡単にテストできるだけでなく、ドキュメントとしても機能するので非常に便利です。
このような見た目でオンラインで公開することもできるので、エンジニア以外も簡単に確認することができます。
プラグインを入れることにより仕様のメモやアクションを定義することもできるようになります。またBackstop.jsを使うと複数のレイアウトを並べて検証ができるようになるようです。
実際に何か作ってみようと思うのですが、いいものが思いつかなくてボタンだけ作って終わっているという、、w
また、以下のスライドでも設計について説明しているのでよかったら参考にしてください。