アトミックデザインの分類を見直した
はじめに
sweeep株式会社エンジニアの今福です。
弊社ではアトミックデザインを参考にコンポーネントを作成しています。
運用する中で分類の基準を変更したので、その経緯についてまとめます。
アトミックデザインとは
パーツ・コンポーネント単位で定義していくUI手法です。
最小の単位から順に「atoms(原子)」「molecules(分子)」「organisms(生体)」「templates(テンプレート)」「pages(ページ)」とコンポーネントを分類し、小さいレベルのパーツを組み合わせていきます。
詳しく知りたい方はご参照ください。(アトミックデザインを考案したBrad Frost氏の記事)
メリット
- 一度作成したコンポーネントを再利用できる
- 統一感のあるUIを作成できる
- 保守、メンテナンスが楽になる
- エンジニアとデザイナー間で共通言語が生まれ、連携が容易になる
デメリット
- チームでの認識が統一していないと、分割粒度がバラバラになり機能しない
- ファイル数、記述量が多くなり、処理も複雑になりやすい
弊社での運用
導入目的
上記でメリットとしてあげたとおり、再利用性を高めることで保守・メンテナンスを容易にすること、UIの一貫性を保つことを目的としています。
また、コンポーネントの責務を明確にし複雑な階層化を避けることで、可読性・メンテナンス性を高めたいという狙いもあります。
分類基準
再利用性の有無、副作用の有無、ドメイン知識の有無を主な判断基準としています。
| 再利用 | 副作用 | ドメイン知識 | 役割 | |
|---|---|---|---|---|
| atoms | 可能 | なし | 含まない | 分割できない最小の単位 |
| molecules | 可能 | なし | 含まない | Atomを組み合わせて最小単位の機能の提供する |
| organisms | 可能 | なし | 含む | Molecule と Atom を組み合わせてレイアウトの（具体的な）画面の描画を行なう |
| pages | なし | あり | 含む | ライフサイクルや発火したイベントをPresenterに伝える |
*templatesはサービス全体のレイアウト指定として限定的にしか使用していないため、表には記載していません。
運用後に発覚した問題点
処理を伴うダイアログ（追加・編集フォームなど）の適切な分類が存在しませんでした。
-
ダイアログコンポーネントをpagesとした場合
- 再利用不可であるため、複数箇所で同じダイアログを使用したいときに用いることができない
- pagesからpagesを呼び出してしまう
-
ダイアログコンポーネントをorganismsとした場合
- ダイアログ内で発生したイベントはすべてpagesを経由してPresenterに伝える必要がある。
ダイアログから多くのイベントが発生する場合に、pagesの処理が肥大化してしまう - ダイアログ内でorganismsを使用したい場合、organismsからorganismsを呼び出してしまう
- ダイアログ内で発生したイベントはすべてpagesを経由してPresenterに伝える必要がある。
どちらも一長一短あるもののorganismsとして運用していたところ、pagesの肥大化が進行してしましました。
変更した点
再利用が可能なpageとしてdialogという分類を新たに設けました。
| 再利用 | 副作用 | ドメイン知識 | 役割 | |
|---|---|---|---|---|
| dialog | 可能 | あり | 含む | 再利用可能なpage |
これにより、dialog内で処理を完結できるようになりpagesの肥大化が解消されたとともに、イベントの受け渡しなく再利用できるようになり再利用性も高まったと思います。
ダイアログの呼び出し元と密な関係がないもの(クエリパラメーターでpropsを渡せる程度)のみ、dialogへの分類を可能としています。
というわけで、現状の分類基準は下記となります。
| 再利用 | 副作用 | ドメイン知識 | 役割 | |
|---|---|---|---|---|
| atoms | 可能 | なし | 含まない | 分割できない最小の単位 |
| molecules | 可能 | なし | 含まない | Atomを組み合わせて最小単位の機能の提供する |
| organisms | 可能 | なし | 含む | Molecule と Atom を組み合わせてレイアウトの（具体的な）画面の描画を行なう |
| pages | なし | あり | 含む | ライフサイクルや発火したイベントをPresenterに伝える |
| dialog | 可能 | あり | 含む | 再利用可能なpage |
おわりに
まずはセオリーどおりに始めてみましたが、運用に合わない点が出てきたので独自ルールを作成しました。
organismsが乱立してしまったりとまだまだな部分も多いですが、今後も改良していきよりわかりやすく運用しやすいものにしていきたいです。
最後に宣伝ですが、sweeepではエンジニアを募集しています。ご興味のある方は下記リンクよりご応募お待ちしております！
Discussion