アトミックデザインの微修正

アトミックデザインとは

コンポーネントを以下の5つに分けるデザイン手法のことです。atomsが最も小さい単位でこれ以上分けられません。逆に、pagesは最も大きい単位で我々が見るウェブページそのものです。

• atoms
• molecules
• organisms
• templates
• pages

アトミックデザインへの批判あるいはケミカルジョーク

アトミックというのは、日本語で言うと原子的、分けられないという意味です。地球の表面において原子は通常存在できず分子でしか存在できません。しかし、atomsなコンポーネントは確実に存在します。
これは化学からしたら奇妙なことです。

モレキュラーデザイン

アトミックデザインには、細かすぎるという意見もあります。それほど細かく分けても、フロントエンドエンジニアにとってはあまり役に立たないことが多いと思われます。そのため、atomsとmoleculesを一緒にすることを提案します。
見た目が分けられるか分けられないかは関係なく、機能が分けられないのなら、すべてmoleculesにします。言い換えるとアトミックデザイン上のatomsとmoleculesをmoleculesにします。なぜならatomsな物質は存在できないから。便宜上、これをモレキュラーデザイン(molecular design)と呼ぶことにします。
例えば、ラベルとプルダウンが一緒になっているものは、どちらもプルダウンを選択するために存在するので、１つのmoleculesにすることができます。
このようにすることで、アトミックデザインのつらみを少し減らせます。