この記事の目的
- Reactの理解とアウトプット、振り返り用
- Reactでよく使われている基本的な技術を言語化できるようする
Atomic Designとは
Atomic DesignとはUI設計の考え方で、「小さなUIコンポーネントを組み合わせて1つのページを作っていこう」というものになります。
- 画面要素を5段階に分け、組み合わせることでUIを実現
- コンポーネント化された要素が画面を構成しているという考え方
- React用ではなく、もともとはデザインの考え方
- モダンjavascript（コンポーネント）と相性が良い
5段階のコンポーネント
Atoms(原子)・Molecules(分子)・Organisms(生体)・Templates(テンプレート)・Pages(ページ)という単位に分かれています。
| 名称 | 役割 |
|---|---|
| Atoms(原子) | 最小でそれ以上分解できない要素 例：ボタン/入力テキストボックス/アイコン 等 |
| Molecules(分子) | Atomの組み合わせで意味を持つデザインパーツ 例：アイコン+メニュー名/プロフィール画像+テキストボックス/アイコンセット 等 |
| Organisms(生体) | AtomやMoleculeの組み合わせで構成される、単体である程度の意味を持つ要素群 例：入力エリア/サイドメニュー 等 |
| Templates(テンプレート) | ページのレイアウトのみを表現する要素（実際のデータは持たない） 例：ヘッダー、サイドメニュー、コンテンツエリア等のレイアウト情報 等 |
| Pages(ページ) | 最終的に表示される1画面 例：ページ遷移毎に表示される各画面 |
メリット
- 細分化しているため、小さな単位で問題を捉えられる
- コンポーネントを使い回すことにより全体のデザインに一貫性が出て再利用性も高い
- このコンポーネントが何をするものなのか分かり易い
Atomic Designまとめ
- 小さな単位で問題を捉えられる
-デザインに一貫性が出て再利用性も高い - わかりやすくメリットはあるが、無理して取り入れて分けるのではなく、まずは書いて定期的にコンポーネント分割したほうがよさそうと感じました。