アトミックデザインをReactで導入してみた

# アトミックデザインとは
>アトミックデザインとは、フロントエンドライブラリーであるAngular、Vue、Reactでコンポーネント単位で開発する際に、最も小さい単位からコンポーネントを設定し、コードの再利用を最大化する方法論です。

https://zenn.dev/bizlink/articles/b5c8985af8407a

# 構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3329005/18eb21ca-db73-411c-0c80-81e724002f03.png)

(翻訳・引用元: [Atomic Design Chapter2](https://atomicdesign.bradfrost.com/chapter-2/#atomic-design-is-for-user-interfaces))

## 実際のコード例
https://www.crunchtimer.jp/blog/15849

# 今、意識的にできているか確認してみた
1. ATOMS（基本的な要素である原子）
    >最も小さくこれ以上分解できない要素。
    例）ボタン、アイコン、テキストボックスなど。

    :::note info
    inputタグに関しては、できていた
    (タグ一個に対して、デザインだけのために切り分けるのはコストが高い)
        :::
       
1. MOLECULES（原子の組み合わせたグループである分子）
    > Atomを組み合わせて意味を持つデザインパーツ。
    例）アイコンメニュー、プロフィール画像＋テキストボックスなど。

    :::note warn
    これも一部できていた（フォルダ構成はORGANISMSと混合していた）
        :::

1. ORGANISMS（原子と分子の組み合わせて構成されるやや複雑な有機体）
    > AtomやMoleculeの組み合わせで構成される単体である程度の意味を持つ要素群
    例）サイドメニュー、ブログなどの一つの投稿、ヘッダーなど。

    :::note warn
    できていた（フォルダ構成はMOLECULESと混合していた）
        :::

1. TEMPLATES（UIの骨組となる上記をまとめたグループのテンプレート）
    > ページのレイアウトのみを表現する要素。
    例）Webサイトのヘッダー、フッター、サイドバー、レイアウト情報など。

    :::note alert
    意識したことがなく、下記PAGESとあわせて書いていた
        :::

1. PAGES（実際の内容をテンプレートで組み込んだものであるページ(Pages)）
    > 最終的に表示される一画面
    例）ページ遷移毎に表示される各画面

    :::note warn
    TEMPLATESとPAGESを合わせていた
        :::        

# メリット・デメリット
:::note info
- メンテナンス性
- 再利用性
- デザインの一貫性
- 可読性
:::

:::note alert
- 人によって設計概念が違い、区別が難しい
- ファイルが増加する
:::

https://zenn.dev/miya_tech/articles/1da21ede685707

https://qiita.com/takeiin/items/7f187d1b848e8e8e46fd


## どういうところでみんな失敗するのか？
- 人によって設計概念が違い、区別が難しい
     > チームで認識を統一していないと分割粒度がバラバラになる。
      構成を5段階を明確に正しく分けるのが難しい。
      
    どのサイトを見ても、`MOLECULES`　と　`ORGANISUMS` の区別が難しいと書いてあった
    ※自分も同じ状態になっていた

## 回避案
- 違う方法（bulletproof-react）を取り入れる

https://zenn.dev/t_keshi/articles/bulletproof-react-2022#%E3%81%9D%E3%82%8C%E3%81%A3%E3%81%A6%E3%81%A9%E3%81%86%E3%81%AA%E3%81%AE%EF%BC%9F%E3%80%81bulletproof-react

- 境界線を明確にする

https://qiita.com/takano-h/items/8731d8e7413d7b1f6d7b

# まとめ
基本チームで粒度を揃える(Devs × Des)

https://www.slideshare.net/slideshow/atomic-design-for-agile-ui-development-100961721/100961721#140

https://zenn.dev/magicmoment/articles/components_driven_202305

https://qiita.com/kei-tamiya/items/cd34c120a860f20622dd


## 判断基準

### ATOMS（基本的な要素である原子）
- tag１つならデザイン流用のみのため`CSSクラス`対応でよさそう
- 機能的にこれ以上分割できないUI
    - 文字だけあったも、画像だけあっても役に立たないなら意味なし
- ~~`children`を含む一つのタグのラッパー扱いのもの~~
    - ~~`<div> {children} </div>`こんなやつ~~
    
### MOLECULES（原子の組み合わせたグループである分子）
- 最小単位の機能`ATOMS`やタグを組み合わせてユーザーの具体的な動機に応える機能単位
    - 何のために「ボタンを押させるのか」
    - 何のために「入力させるのか」
- タイトルと入力欄、カード一枚、ウィジェットなど
- `ORGANISMS`から複数呼び出される機能
    
### ORGANISMS（原子と分子の組み合わせて構成されるやや複雑な有機体）
- `ORGANISMS` `MOLECULES` `ATOMS` で構成される要素
- 単体コンポーネントでユーザーに与える情報が完結する
- カードリスト、入力フォーム、サイドバー、ヘッダーなど
- `children`を含むページのレイアウトを担うもの（サイドバーやヘッダー、セクションタグとかも）

### TEMPLATES（UIの骨組となる上記グループのテンプレート）
- Reactの組み方次第で子要素のみレンダリングすればいらないかも
- Reduxでは、効果を発揮するらしい

### PAGES（実際の内容をテンプレートで組み込んだものであるページ）
- 最終的に表示される一画面

## フォルダ構成

```
src
├─ component
│    ├─ atoms
│    ├─ molecules
│    ├─ organisms
│    ├─ templates
│    └─ pages
・・・
```

# 参考記事

https://tech.leverages.jp/entry/2022/04/25/152335

https://uxdaystokyo.com/articles/glossary/atomic-design/

https://qiita.com/Kazuhiro_Mimaki/items/3d9a8594064aab5119da

https://www.techpit.jp/courses/109/curriculums/112/sections/842/parts/3121