調べてみた経緯
Reactを勉強して３ヶ月くらい経つが本を読んで 「Atomic Design」というデザインシステムという概念が出てきて「なんじゃこれ！？」って思い調べてみました。
ReactとAtomic Designの相性がかなり良いらしいす。
Atomic Designとは
Atomic Designとは、以下の5つの構造にページを分け、それぞれの役割を明確にし再利用可能なコンポーネントを作って行くことです。
- Atoms(原子)
- Molecules(分子)
- Organisms(有機体)
- Templates(テンプレート)
- Pages(ページ)
Atoms(原子)
Atoms(原子)とは、UIを構築する最小単位です。なのでそれ以上に細かく分割することはできません。
ToDoListのモックで例をあげると
このような構成のページをAtomに分けると以下のようになります。
- テキストフォーム
- 追加ボタン
- チェックボックス
- テキスト
- チェックボックス
- テキスト
のように分けることができます。
Atomsは、Atomic DesignかつWebサイトを構築する上で基本的なものであり重要な要素です。
Molecules(分子)
Molecules(分子)になると,UIがどんな意味を持ちどのように使われるかが具体性が出てきます。
先ほどのAtoms単体だけを見ると、何をしたらいいかがわかりませんよね？しかしMoleculesになると入力フォームがありボタンがあるので、「何か入力して送信するんだなー」とより具体的なインターフェイスになることがわかります。
Atomsを組み合わせて複雑なMoleculesになってしまうと、他の箇所で注意が必要。
Organisms(有機体)
Organisms(有機体)はAtomsやMoleculesが組み合わされて利用されます。AtomsやMoleculesとの大きな違いは再利用性があまり求められてないと言う点です。
Organismsの代表として ヘッダーが挙げられます。
Templates(テンプレート)
Templates(テンプレート)はワイヤフレームと同じで、ページに画像や実際のデータが反映される前の状態です。
Pages(ページ)
Pages(ページ)は、Templatesに対してページに画像や実際のデータを反映させたものです。
Atomic Designを使うメリット
- チームとしての共通概念が生まれる
- 構造的な考えが生まれる
- 開発スピードが早くなる
- トーン&マナーが生まれる
トーン&マナーはデザイン用語だそうです。こちらのサイトが詳しく載ってました
と言うメリットがあるそうです。デメリットとしては、ファイル量が多くなるそうです。
Reactのファイル構成
├── public // コンパイル済み各公開ファイル
│ └── assets
│ └── index.html
└── src
├── components // Reduxに依存しないReactのコンポーネントディレクトリ
│ ├── atoms
│ └── molecules
├── containers // Reduxとコネクトするコンポーネント
│ ├── organisms
│ └── pages
├── redux // ReduxのAction,Reducer,Storeを扱うディレクトリ
│ ├── middlewares // 主にAPI処理をまとめたディレクトリ（ReduxでいうとAction発行時にReducerの前でインターセプトする処理）
│ ├── modules
│ └── records
├── styles // 基本的なスタイルを定義する
│ ├── core
│ ├── foundation
│ └── utility
└── utils // 汎用的な処理をするUtil用ディレクトリ
[https://ichimaruni-design.com/2017/05/react-redux-atomic-immutable/:embed:cite]
調べてるとこんな感じに作っている方がいらっしゃいました。
気が向いたらAtomic Design+Redux+ReactでTodoListを作ってみようと思います。