Zenn
🔬

Atomic Designによる比喩の限界が私達を苦しめる

2021/11/07に公開
Next.js
TypeScript
Atomic Design
tech

Next.jsのプロジェクトでAtomic Designや亜種に初めて触れてみて気づいたこと

今更ですが、

  • ようやく皆さんがおっしゃっている、「Atomic Designをプロジェクトに取り入れるのは難しい」というのを少し実感しました。...難しい！！！

こちらの記事など、多くの例を読んでみて、難しい課題だと認識しました。

まえおき

  • 科学的な例えを思いつき多くの開発者の支持を得たBrad Frost氏に尊敬の念を抱いています。
  • だからこそ、変な忖度なしに、自分の率直な所感を綴りたいと思い、部分的にFrost氏の提唱案に否定的な表現を使っていると受け取れる箇所がありますのでご理解頂けると幸いです。

私たちを苦しめているのは、Atomic Designによる比喩の限界ではないか。

アプローチの方向性に違いがある

身の回りの身近な物体を化学の原則に沿って細く分割していくことと
(Web)デザインをパーツに切り出して細かく分割していくこととの間には、
一見同じような手法を取っているようで、
その手法は逆行しているように思えた。

どのように逆行していると感じたのかを表に纏めてみる。

背景 (Context) 方向性 (Thought Process)
化学の世界 (小さい方から => 大きい方へ)
ブレない最小単位が最初に存在し、
それを組み合わさり、大きなものを構成していく。
(Web)デザインの世界 (大さい方から => 小さい方へ)
画面単位(Pages)単位のイメージが最初に存在し、
物質粒度の仕組みに従って、
デザイナーやエンジニアが各々に、
多少無理に小さな方向へ分割していき、
再利用可能な最小単位を切り出していく。

なぜそう感じたのか。
理由を２つ思いついた。

  1. 最小単位の定義にブレが生じる余地があるかどうか
  2. 概念の飛躍の大きさ

(原因1) 最小単位の定義にブレが生じる余地があるか否か

C(炭素)原子についていえば

  • C(炭素)
    • 陽子数(Proton)： 6
    • 中性子数(Neutron)： 6
      • 2, 3, 4, ...,15, 16が確認されているが本筋と逸れるので割愛
    • 電子数(Electron)： 6

電子配置と周期表

化学ではブレが生じる余地がない

最小構成単位が３種類の素粒子(up quark, down quark, electron)であり、この３つを組み合わせることで、この地球の全てのものができているという原理原則において、最小構成単位についてブレが生じる余地がないと思う。

高価な金、銀、銅であれ、
身近な水素、酸素であれ、
放射性物質のウラン、プルトニウムであれ、
細かく分解していくと
この３種類の素粒子の数が違うだけである。

だからこそ、錬金術に挑んだ科学者が多いことも、耳にしたことがある方も多いのではないかと思う。

かつて世の中には錬金術というものが存在していました。たとえば「水銀を金に変えてみせます！　そのための設備が必要ですので、投資を！」と言って権力者たちからお金をだましとる方法です。
　ところが、「世の中の物質はすべて原子の組み合わせからできており、原子自体は変化しない」という原子論が登場してからは、それまでなんとなくあやしいと思われていた錬金術が、詐欺のツールだとはっきりしました。原子論にしたがえば、水銀の原子と金の原子は別物ですから、水銀から金を生みだすことはできないのです。化学の世界では、今でもこれは正しいわけです。
　ところが、原子の中身を調べ、その中の原子核までを知ると、陽子と中性子の組み合わせしだいで、どんな原子もつくることが可能だとわかりました。つまり、錬金術は、化学的には不可能でも、物理学的には可能なのです。水銀の原子核の陽子と中性子の数を変えれば、金をつくり出すことは原理的に可能です。ただし、原子核の組み合わせを変えるには、とてつもないコストと手間がかかりますので、ふつうに金を採掘したほうが、はるかに安あがりなのですがね。

一方で、人工的に定める概念で最小単位についてのブレが生じる余地はあるか

Atomic Designのatom (人工的に定める再利用可能な最小単位)

私たち開発者が少なくとも一度は参照しているAtomic Designの提唱者Brad Frost氏のAtomic Designの定める「最小単位」を見ると、以下の６つの具体例が挙げられていることがわかる。

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.

Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.

Frost氏の掲げる最小構成単位の具体例（６つ）

  1. Label
  2. Input
  3. Button
  4. Color palette
  5. Font
  6. Animation

人間（開発者）によって、最小単位の定義に
ブレが生じる余地があるかどうかというと
YESであるように思う。

(原因2) molecule(分子)からorganism(有機体)への概念の飛躍が大きい

organismという用語は、化学の背景では"Organic Chemistry(有機化学)"を強く想起させる。

検索エンジンで、organism, chemistryとググると、Organic Chemistryに関する記事ばかりが現れる。

organismという単語は、どちらかいうとBiology(生物学)の分野における用語を想起させる。

生物学の研究において、例えば生化学に特化すると、
Molecule (分子)に主眼をおいて議論を交わすことはあっても（例：DNAの塩基配列に注目する際に、核酸塩基のアデニン）、Atom (原子)に着目して議論を展開している論文を見る機会はほとんどなかったように思う。

用語 (Term) 背景 (Context)
Atom 化学
Molecule 化学、生物学
Organism 生物学 (生化学も含めて)

コンテクストにブレがあることも、またAtomic Designを実践する際に難しさをもたらす原因になっている可能性がある。

もしScience(科学[生物学・化学・物理学などの集合論])に例え続けるならば、ジャンルを特定(化学なのか生物学なのか、それとも物理学なのか)して、分類(Pure Substance / Compound[Water: H20], Mixture / homogenerous [Air: N2, O2, Ar...])を細かくしていくと可能かもしれない

AllMatters/
├─ Mixtures/
│  └─ HomogeneousMixtures/
│     └─ Air
│        ├─ N (窒素)
│        ├─ O (酸素)
│        └─ Argon (アルゴン)
├─ PureSubstances/
│  └─ Compounds/
│     └─ Water
│        ├─ H (水素)
│        └─ O (酸素)
補足

Frost氏が「誤解を生まないようにハッキリさせておきたいのですが、Atomic DesignはWebデザインに主眼をおいて考えているものではなく、あくまでデザイン全般に主眼をおいて作成した思考パターンなのです」と、公言していることは心得ています。

I show this non-web example because atomic design tends to get misinterpreted as an approach to web-specific technologies like CSS and JavaScript. Let me be clear about this: atomic design has nothing to do with web-specific subjects like CSS or JavaScript architecture. In chapter 1 we discussed the trend toward modularity in all aspects of design and development, which includes CSS and JavaScript. These are fantastic trends in CSS and JavaScript, but atomic design deals with crafting user interface design systems irrespective of the technology used to create them.

あとがき

チームの中でどのようにルール決めをするか、という答えが出にくい課題に対して少しずつ例を見ていきながら、知見を深めていきたいと思います。

Discussion