「Atomic Design」についての備忘録です。
Code Gridの記事を参考にしています。「Atomic DesignとCSS設計」
概要
- 100ページ分のコーディングは10ページ分のコーディングに比べて10倍ではない
- 多数の画面で使われるUIを組みわせて作る
UIの構造
- Atoms(原子)
- Molecules(分子)
- Organisms(組織)
- Templates(テンプレート)
- Pages(ページ)
各構造について
- あらゆるものが原子の集まりでできてるように、ページもAtomsの集まりである
- Atomsはこれ以上、分けられない単位のUIである
- Atomsが組み合わさっってMoleculesになる
- Moleculesが組み合わせってOrganismsとなる
- Organismsの集まりでページのフレームであるTemplateを作るが、そこには具体的なコンテンツの入ってない空っぽのページ枠組みである
- 具体的なテキストや画像を入れ込んでPagesを作る
導入の利点
- コンポーネント単体でクロスブラウザ対応、パフォーマンス、アクセシビリティをテストすることができる
- サイトに登場するUI群をまとめることで、不要なUI/共通化できるUIを整理することができる
Vueに導入するときのディレクトリ構成
components
/Atoms
/A_title.vue
/A_button.vue
/A_label.vue
/A_textField.vue
/Molecules
/M_list.vue
/M_FormInput.vue
/Organisms
/O_selectionList.vue
/O_Form.vue
/Templates
/hoge.vue
/fuga.vue
/Pages
/hoge.vue
/fuga.vue