Help us understand the problem. What is going on with this article?

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

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

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


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

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


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

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

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


[目次]

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

Atomic Designとは?

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

引用 Atomic Desigh

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

Introduce-atomic-design-as-refactoring-01

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

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

Atoms

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

Introduce-atomic-design-as-refactoring-02

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

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

Molecules

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

Introduce-atomic-design-as-refactoring-03

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

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

Organisms

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

Introduce-atomic-design-as-refactoring-04

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

Templates

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

Introduce-atomic-design-as-refactoring-05
- 一覧テンプレート(template)<--[結合]-- ヘッダー(Organisms)+ 一覧コンテンツ(Organisms) + フッター(Organisms)

Pages

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

Introduce-atomic-design-as-refactoring-06

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

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

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

Atomic Design(再掲)

Introduce-atomic-design-as-refactoring-01

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

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

って急になりませんよね?(笑)

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

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

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

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

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

Introduce-atomic-design-as-refactoring-07

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

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

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

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

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

AtomicDesign.009

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

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

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

Introduce-atomic-design-as-refactoring-09

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

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

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

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

Moleculesに関して

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

Organismsに関して

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

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

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



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

h0ng0yut0
https://hongo.dev 自分を表す言葉は「Webなんでも屋さん」 (多岐に実績があり、ひとことで表せないのが悩み) エンジニア, ビジネスに沿ったシステム戦略立案, Web分析とCVR改善, SEO対策, プロセス改善, 開発ディレクター, 開発チームマネジメント, etc…
https://hongo.dev/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away