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

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

[ひとことで言うと、こんな記事]

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

[こんなひとにおすすめ]

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

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

[目次]

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

Atomic Designとは？

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

引用 Atomic Desigh

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

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

Atoms
Molecules
Organisms
Templates
Pages

Atoms

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

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

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

Molecules

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

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

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

Organisms

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

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

Templates

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

一覧テンプレート（template）<--[結合]-- ヘッダー（Organisms）＋一覧コンテンツ（Organisms） + フッター（Organisms）

Pages

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

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

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

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

Atomic Design(再掲)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

__Molecules__に関して

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

__Organisms__に関して

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

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

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

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