Atom

最小単位

ボタンとか、アイコンとか

Molecule

Atomを組み合わせて作られる要素

単一の機能を持つ

Organism

HeaderとかFooterがよく例に挙げられる

Moleculeとの違いがわからなくなる

Moleculeと異なり複数の役割を持つ

Template

ワイヤーフレーム

Page

実際のデータを注入するところ

Oranigms, Template, Pageは 機能ではなくレイアウトとしての役割を持つ？ref

「機能としての役割」はそれ以下のもので完結させる

なのでこれら3つは、レイアウトに関する単一責任を持つ、のか

スタイルの話

以下の2つに分けられる ref

見た目のスタイル

小さいコンポーネント一つ一つの見た目

例えばボタンとか？

レイアウトのスタイル

配置や、子に対する見た目

再利用性を高めるための2つの制限

子は親の"レイアウトのスタイル"を知ってはならない

子はmarginなどを持つな

親は子の"見た目のスタイル"を知ってはならない

Package by Featureの考え方と完全に反しているんだよな

Viewだからやりづらい、というのはある

が、「絶対にここのfeatureでしか使わないだろ」というのをmoleculesとかに入れる意味はないと思う

packages/ と commons/ を作って、後者の中をatomic designにしたりすればいいのでは？

実装

拡張

吉井健文氏のAtomic Redesign

UIを基準にではなく、依存関係を軸にレイヤーを分ける

rinciples、Basics、Components、Templates、Features、Applications

Identity、Elements、Components、Compositions、Layout、Pages

分類しない(?)

atoms, helpers, standalone, template, pages

科学的なメタファーではなく音楽のメタファーを使う

ハーモニー、メロディ、リズム

アクセシビリティの観点で粒度を分ける

そのテスト

参考

様々なatomic design拡張の紹介