AtomicDesign

友人と共同開発を始め、AtomicDesignについてあらためて学んだ。

これまでVue2.0にて個人開発を行っていたサイトにてもAtomicDesignを採用していたつもりであったが、全くうまく使えていないと再認識した。

「Atoms」にてHTMLのタグ単位レベルで使用し、
部品としては、「Atoms 」「Molecules 」「Organisms 」で完結し、
同じコードを共通化していきたい。

markdawnの表使えへんの。。。

| レベル | Atomic Design | ディレクトリ | 役割 | データの利用 | その他 |
|-------|--------------|-------------|-----|------------|-------|
| 1 | Atoms | components/atoms | 最小UIコンポーネント | 基本的に× | ・外枠にmarginを持たせない <br/>・処理はorganismsまでemitする |
| 2 | Molecules | components/molecules | Atomsを組み合わせたUIコンポーネント | 基本的に× | ・外枠にmarginを持たせない <br/>・処理はorganismsまでemitする |
| 3 | Organisms | components/organisms | 複数のAtoms,moleculesを組み合わせたUIコンポーネント | ○（Dispatch/Render：StoreからGetterにて下位レベルのコンポーネントに埋め込む値を渡す）|・外枠にmarginを持たせない <br>・ビジネスロジック |
| 4 | Templates | layouts | 下位レベルのコンポーネントを組み合わせたUIフレーム | ×（レイアウトを定義するために特化） | |
| 5 | Pages | pages | アプリケーションのルート | × （Dispatch：APIから情報を取得しStoreにcommitのみ可） | ・router関連処理<br>・認証許可 |

参考