むずかしく考えない Atomic Design 〜リファクタリング的に実施してはいかが？〜

以下ページの転載になります。ご了承ください。

[むずかしく考えない Atomic Design 〜リファクタリング的に実施してはいかが？〜 - Yuto Hongo Portfolio](https://hongo.dev/blog/introduce-atomic-design-as-refactoring)

---

[<u>ひとことで言うと、こんな記事</u>]


__Atomic Designの思想を学ぼう。そして、現実のアーキテクトに落とし込むのは、共通化リファクタリングのように一歩ずつ無理なく頑張ろう！__


---


[<u>こんなひとにおすすめ</u>]


- Atomic Design の考え方の基礎を知りたい方
- フロントエンドのマークアップやCSSの管理に悩んでいるが、理想と現実に苦しめられている方

私もフロントエンドは不得意な分野です。不得意だからこそ、無理せず勉強していこうと思いますの、よろしくお願いいたします。

---

[<u>目次</u>]

- Atomic Designとは？
- __既存システムを持っている方は無理しないで!アプローチを変えればただの共通化リファクタリングです！__
- 「Moleculesだ！」「Organismsだ！」とかは難しいので、チームで話し合う

---

## Atomic Designとは？

公式ホームページがございますので、こちらを引用させていただきます。

>引用 [Atomic Desigh](https://atomicdesign.bradfrost.com/ "Atomic Design by Brad Frost")

Atomicと名が付いているだけあって、化学方程式のようなものにインスパイアされた考え方だそうです。

![Introduce-atomic-design-as-refactoring-01](//images.ctfassets.net/yyxwl1h0rr37/1K0oMa2Hl4veaYL7HJy8ly/47bea3eaabd4a697bbc8bb1dd90b5c41/AtomicDesign.002.png?w=720&q=20)

Atomic Designはデザインを考える際に、以下の5つのヒエラルキーからなるとしています。それぞれ解説していこうと思います。

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

### Atoms

日本語で「原子」です。ページを構成する最小粒度の単位を示すそうです。以下のような例があります。

![Introduce-atomic-design-as-refactoring-02](//images.ctfassets.net/yyxwl1h0rr37/72yTGaHu2mueXl0iFBMZb5/56b0681c9efe03741ffdb9881256c0ad/AtomicDesign.003.png?w=720&q=20)

- ラベル（h1,h2...）
- ボタン（button）
- インプット（input type="text"など）
- ロゴ画像（img）

html標準で準備されているようなものの単位が多そうです。それぞれにデザインを当てることもあるので、イメージしやすいかと思います。

### Molecules

日本語で「分子」ですね。「原子」が結びついて1つの「分子」になるように、意味のあるAtomsが複数あり、1つの役割になっているようなものを指すようです。以下のような例があります。

![Introduce-atomic-design-as-refactoring-03](//images.ctfassets.net/yyxwl1h0rr37/4CHk0gJLgFDJ2RIamVrdHy/702ab2d8dbbf8ce0100515f5fb40ddba/AtomicDesign.004.png?w=720&q=20)

- ブログカード   <--\[結合]-- 画像（Atoms） + ラベル（Atoms） + テキスト（Atoms）
- 検索機能（Molecules） <--\[結合]-- インプット（Atoms） + ボタン（Atoms）

1つの責任しか持たせないようなまとめ方がいいそうです。

### Organisms

複数の Atoms / Molecules / 他のOrganisms で構成される比較的複雑なものだそうです。以下のような例があります。

![Introduce-atomic-design-as-refactoring-04](//images.ctfassets.net/yyxwl1h0rr37/5uJrvZkHnbJV4jQ069Gpbo/12e017538916b413fb943ab8cce84952/AtomicDesign.005.png?w=720&q=20)

- サイドメニュー（Organisms） <--\[結合]-- ボタン（Atoms） + ボタン（Atoms）...
- ヘッダー（Organisms）<--\[結合]-- ロゴ（Atoms）+ サイドメニュー（Organisms）

### Templates

ページデザインを示すものだそうです。ここで気をつけなければいけないことは、ページ自体の内容の違いではなく、__ページのデザイン構造のみを表現したもの__であるという点だそうです。以下のような例で表現できるでしょう。

![Introduce-atomic-design-as-refactoring-05](//images.ctfassets.net/yyxwl1h0rr37/3EyzNl69fpXdPQYAxphuxm/2ee183473416f42a94d69a6e39fd0bfd/AtomicDesign.006.png?w=720&q=20)
- 一覧テンプレート（template）<--\[結合]-- ヘッダー（Organisms）＋ 一覧コンテンツ（Organisms） + フッター（Organisms）

### Pages

ここはみなさんがイメージする「ページ」ってものと同じではないでしょうか？1つ1つのページ自体を指すようです。

![Introduce-atomic-design-as-refactoring-06](//images.ctfassets.net/yyxwl1h0rr37/15psPUdrEQFfc4xNJ8HUY2/dfc281e834d785a5555dc72ecf726c72/AtomicDesign.007.png?w=720&q=20)

- TOPページ　<- TOPテンプレート（Template）
- 仕事ブログ一覧ページ　<-- 一覧テンプレート（Template）
- 仕事ブログ記事ページ　<-- 記事テンプレート（Template）
- プライベートブログ一覧ページ　<-- 一覧テンプレート（Template）
- プライベートブログ記事ページ　<-- 記事テンプレート（Template）

Templateとしてデザインのみを分離しているので、内容の違うページでも同じテンプレートを利用することが可能なわけです。

## 既存システムを持っている方は無理しないで。アプローチを変えればただの共通化リファクタリングです！

Atomic Design(再掲)

![Introduce-atomic-design-as-refactoring-01](//images.ctfassets.net/yyxwl1h0rr37/1K0oMa2Hl4veaYL7HJy8ly/47bea3eaabd4a697bbc8bb1dd90b5c41/AtomicDesign.002.png?w=720&q=20)

アトミックデザインの基本思想はなんとなくわかりました。各単位でまとめていけば、デザイン関連のリソースの管理は楽になりそうですよね。

__「よっしゃ〜！じゃ、利点しかないので速攻導入します！」__

__って急になりませんよね？（笑）__

一気に既存サイト適応させていこうとすると、以下のデメリットがあると思います。

- Atoms,Molecules,Organisms,Templatesの設計を全部詰め切る
- 次回リリースまでに作られる、フォルダやファイルの変更が極大

のように、ほぼリニューアルとなるわけです。。。

すごく考え方はシンプルなのですが、__Atomic Designの「解説」の順番と全く逆の順番で「開発」していきませんか？__　という提案です。


### 例1. 共通のデザインのPageをTemplateに共通化する

![Introduce-atomic-design-as-refactoring-07](//images.ctfassets.net/yyxwl1h0rr37/48ed5wVt6FRD2WNfU5ZZHk/2d31a041aeed49b86dc0f82de3085d64/AtomicDesign.008.png?w=720&q=20)

- 仕事ブログ一覧Page　
- プライベートブログ一覧Page　

デザインが一緒なので、__ブログ一覧Template__を新規作成する。

そして、__無理なく１つ共通化したらデプロイ！__

### 例2. 共通のパーツを持った複数TemplateからOrganismを共通化する

例1と同じようにブログ記事テンプレートのようなものを作成したとする

![AtomicDesign.009](//images.ctfassets.net/yyxwl1h0rr37/18mvoBUEMz8QUKh1rKpILX/fc749dd5f990b609d624b192c8092aaf/AtomicDesign.009.png?w=720&q=20)

共通している部分として、__ヘッダーOrganism__などを共通化する。

そして、__無理なく１つ共通化したらデプロイ！__


### 既存サイトにAtomic Designを適応していくイメージ図

![Introduce-atomic-design-as-refactoring-09](//images.ctfassets.net/yyxwl1h0rr37/1FCNQeNSq3SuXGHo2d4jhP/824a437c5e9e9eff95e9ef7ead92353d/AtomicDesign.010.png?w=720&q=20)

広さ（ページの種類）と深さ（Atomic Designのヒエラルキー）両軸で少しづつ共通化と横展開をしていくのが良いかと。

そうすれば__1個の共通化や1個の横展開にて、デリバリーが可能。無理なくエンハンスすることが可能__なわけです。

## 「Moleculesだ！」「Organismsだ！」とかは難しいので、チームで話し合う

Atomic Designの公式にもあるのですが、結構以下の点は論点になりやすい部分だと思います。

__Molecules__に関して

- 「単一機能」とは、__どの範囲でもって「単一機能」__とするか

__Organisms__に関して

- Organismsは__他のOrganismsを含むことが可能__であるので、Organisms内になにか階層が生まれる

上記問題を解決するために、新たなカテゴリ分けをつくるなども解決策としてあるでしょう。

いずれにせよ__チームで話し合ってください__。みんなの共通認識が大事です。


---



---

最後までお読みいただき、誠にありがとうございます。様々なことを学んでいきたいと思っていますので、アドバイス等いただけると幸いです。