Atomic Design
業務でAtomic Designについて学ぶ機会があったので理解度の確認程度に書いてみる
間違っている箇所があれば指摘してください
Atomic Designとは
- サービスが大きくなるにつれて複雑になっていくファイルを部品ごとに分けて開発しやすくするためのデザインパターン(component指向という)
- 開発しやすくすると言ったが元々はデザインの考え方の一つ
- ちなみにcomponent指向で作るのに適しているフレームワークはReact.js,Vue.js,Riot.jsなどがある
使われている理由
- 今までやってきた一つのHTMLファイルに記述していく形式だと、一部を変更するだけでも手間がかかる
- そこでHTML内の要素をcomponent化することによって一部を変えたいときはそのcomponentをいじるだけで良くなる
- レイアウトもcomponentを入れ替えるだけで簡単にレイアウトを変えられる
Javascriptは一つのファイルしか読み込んでくれない
- component指向だとjsファイルは分けられている
- じゃあどうやって読み込むのか
- 例えばwebpackというものを使えば、モジュール化(部品で分けられているもの)されたjsを一つのjsにまとめてくれる
- cssとかもうまくまとめてくれる
- Webpackについて詳しく知りたいのならこの記事がオススメ
Webpackってどんなもの？ - Qiita
とにかくバンドルするツールが必要！！
Atomic Designの粒度(分け方)
Atomic Designには決まりがあってcomponentをどの程度で分けるのかというのが定義されている
- Atoms 原子
- 一番細かく分ける部品、ボタンだったらとりあえずボタンを押された時に関数を実行するだけな部品
- 例 : button,textinputなど
- Molecules 分子
- componentをまとめたもの、Organismsの一部として使われたりする部品
- 例 : 検索フォームなど
- Organisms 有機体
- こちらもcomponentをまとめたもの、Moleculesと違うのはこれ一つで何をしているかがわかる(成り立つ)部品
- 例 : ニュース記事の一つ分の記事など
- Templates テンプレート
- componentを当てはめていくための枠組みを作る部品
- 例 : ページのレイアウト
- Pages ページ
- 実際に作成したcomponentをはめ込んで行って実際のページを作る部品
- componentで分ける時に結構2と3で悩むが、2はサポート役 3はメインみたいな感じで覚えておけば分けやすいかも？
まとめ
- Atomic Designを学んでいる中で、これを知っているか知っていないかでかなり開発のしやすさに差が出るなと思った。
- component指向を知らない人が作り方を学ぶのならとりあえず簡単な部品を合わせた何か一つを作るだけで理解できそう
用語
- component : 一つの部品
- Webpack : node.jsで動くjsたちをまとめるツール