atomic design
アトミックデザインとは
簡潔にいうと パーツやコンポーネント単位でUIデザインを設計する手法のことです。
これだけでも覚えて帰ってください！
詳細解説をしている記事や動画
atom(原子)
UIの最小単位となるデザインパーツです。
私のところでは他のUIパーツに依存せず単体で成立することができているというのがAtomの基準でした。
ボタンやアイコンなどが主にこの階層に属します。
そしてこれらを組み合わせてこれから紹介するパーツを作っていきます。
molecules(分子）
いくつかのatomを組み合わせた集合体を指します。他のmoleculeと組み合わせることもできます。
が対応範囲はあくまでUIの部分のみでIF文や状態管理をこの階層ですることはできません。
If分を使えるのは次に紹介する organismです
しかし分子はデザインやUIの観点から再利用がしやすくで汎用性が高い特徴があります。
organism(生体)
単体で機能するアプリケーションパーツ（widget）のことで、原子と分子を組み合わせて構築されます。
organismは複数のコンポーネンを組み合わせてえ 機能を実現するためにつかうパーツとして利用されます。
例えばボタンを押したら色が変わる機能を搭載したい場合
UIはmoleculeによって構成されています。しかし変更する処理をmoleculesではできないです。
template
今までのatom molecule organism を組み合わせて構築されます。
しかし最終的なWebサイト画面には使わず、デザインの設計を行う際やUIの開発時に、使用されます。
最終的な画面に使うのは、templateを参考に実際にデータや状態を入れた page層で行われます。
ListViewを使いたい(Flutterのwidgetの一つ リストを作成できる）
ListView.builderを使用する予定だがtemplate層から利用することは可能か？
結論 ： ListView.builderを使うことは推奨されません。templateは、あくまでデザインの設計を行うためのものであるため、ListView.builderは使用できません。
しかしColumnで擬似的に再現することも推奨はしません。
あまり推奨はできません。
Columnを使うと、Atomic designプロセスを用いて、サイト全体のデザインの設計や開発のステップを行うことができません。 また幅が無限になってしまう可能性もあります。
Columnを使用せずに atom や molecule organism でデザインを構築すべきです。
おまけtoken
color_seed(詳しく)やspace_boxなど全ての領域で幅広く使用されているwidgetなどは
atomやmoleculeにとらわれず使用されるべきです。
atomやmoleculeに入ってしまうと依存関係がおかしくなってしまったりする可能性があるので
メリット
自由度が高い。使い回しがとても簡単に行える。デザインが統一されていることがほとんどなので、変更が全体に反映しやすい。下の層ほど具体化されていく。
デメリット
一貫性があるが、下位層に行けば行くほどグローバル変数的に結合してしまうため下の層ほどどこで使われているいかがわかりずらい。
結局pageに紐付いたorganismに紐付いたmoleculeに紐付いたみたいな、特定のpageにしか使われないのに全体として使われているものが多すぎるため pageが増えるほどわかりづらくなる
Discussion