uni memo

アトミックデザインとは

アトミックデザインとは

atomic designについて読んで、考えていく

http://atomicdesign.bradfrost.com/table-of-contents/

おそらく2016年くらいに提唱された概念らしい

reactが普及し始めたのを受けて考えたのだろうか

atomic design方法論

http://atomicdesign.bradfrost.com/outline/

化学のアナロジーで定義している

  • atoms, molecules, organisms, templates, pagesの5つからなる

atoms(原子)

これ以上分割できない単位

分割されていると、簡単に共通語彙(文脈のようなもの?)を作れる

抽象的かつ有用なものであることが大事

コンポーネントとしてはボタンや、タグが該当するだろうか

molecules(分子)

原子がくっついたもの

抽象的かつ文脈依存しないものであることが大事

コンポーネントでいうとラベル、インプットフォーム、ボタンなどの原子が集合したものが分子、すなわち検索フォームになる

organisms(有機体)

分子や原子の集合体

明確に別れており、役割はひとつ

再利用可能なインターフェースを持ち、移植可能であるなどの特徴を持つ

テーブルなどの単位だろう

templates

ここから化学とのアナロジーとは関係なくなってくる

ページ単位での文書。コンテンツの構造に特化している

コンテキストは、構成要素である分子や有機体から流れてくる

pages

templateのインスタンス、実際のコンテンツを流したもの

感想

es6以前のコードの組み方は全体のバランスをみて、cssやjsを組むことが多かったような気がする

その場合はページ単位で見ていくので、サイトとしてトンマナを合わせるときに頭の中でレンダリングしていた

es6以降ではatomic desingというか、コンポーネントの概念がでてきてから、部品単位で見た目や動きを考えればよくなったため見た目部分の共有がしやすくなったように思う

参考

  • 提唱者(Brad Frost氏)のサイト http://atomicdesign.bradfrost.com/

  • 解説記事 https://uxdaystokyo.com/articles/glossary/atomic-design/

2024, Built with Gatsby. This site uses Google Analytics.