調べてみた経緯

Reactを勉強して3ヶ月くらい経つが本を読んで 「Atomic Design」というデザインシステムという概念が出てきて「なんじゃこれ!?」って思い調べてみました。

ReactとAtomic Designの相性がかなり良いらしいす。

Atomic Designとは

Atomic Desginとは、以下の5つの構造にページを分け、それぞれの役割を明確にし再利用可能なコンポーネントを作って行くことです。

  • Atoms(原子)
  • Molecules(分子)
  • Organisms(有機体)
  • Templates(テンプレート)
  • Pages(ページ)

Atoms(原子)

Atoms(原子)とは、UIを構築する最小単位です。なのでそれ以上に細かく分割することはできません。

ToDoListのモックで例をあげると

atomicDesign2.png

このような構成のページをAtomに分けると以下のようになります。

atomic3.png

  • テキストフォーム
  • 追加ボタン
  • チェックボックス
  • テキスト
  • チェックボックス
  • テキスト

のように分けることができます。

Atomsは、Atomic DesignかつWebサイトを構築する上で基本的なものであり重要な要素です。

Molecules(分子)

Molecules(分子)になると,UIがどんな意味を持ちどのように使われるかが具体性が出てきます。

先ほどのAtoms単体だけを見ると、何をしたらいいかがわかりませんよね?しかしMoleculesになると入力フォームがありボタンがあるので、「何か入力して送信するんだなー」とより具体的なインターフェイスになることがわかります。

atoms3.png

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を作ってみようと思います。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.