加速するコンポーネント設計入門 / Component Design as an Accelerator

by ダーシノ

Slide 1

Slide 1 text

加速するコンポーネント設計入門デザイナーとエンジニアの境界をなくしたいダーシノ / @bc_rikko ※ フロントエンドエンジニア視点の話です

Slide 2

Slide 2 text

入門する前になぜ、「コンポーネント設計」が必要なのか

Slide 3

Slide 3 text

いままでのUI開発デザイナーデザインツール上でオブジェクトを組み合わせてUIデザインをする画像ファイルを出力し、フロントエンドエンジニアに渡すフロントエンドエンジニア画像を元にUI（HTML/CSS）を実装するコンポーネント化は自分たちで考える

Slide 4

Slide 4 text

「いままでのUI開発」のメリデメメリット分業されており責任境界があるお互いのことを知らなくても仕事が進められるデメリット分業されており責任境界があるお互いのことを知らなくても仕事が進められる ※ 誤植じゃないです

Slide 5

Slide 5 text

デメリットを詳しく境界があることでお互いの領域に意見を出しづらい（越権行為）お互いを知らないので何を求められているかがわかりづらい複数の会社が参加する大規模プロジェクトならいいけど、同じ会社の人間なのでもっと協力したい

Slide 6

Slide 6 text

じゃあ、どうしたいのか？ UI開発を加速させたい UIデザイン、コード、ドキュメントを連携させたいデザイナーとエンジニアの境界をなくしたい

Slide 7

Slide 7 text

UI開発を加速させたい

Slide 8

Slide 8 text

加速させるためにはチーム全体で共通のコンテキスト（共通認識）を共有するその “手段” がデザインシステム（※目的ではない）デザインシステムの説明は本筋とずれるため割愛

Slide 9

Slide 9 text

デザインツールとコードを連携させるデザインツールとコードを連携させることで、以下のことができる（かもしれない）デザインシステムの土台になる仮にデザインシステムを作らなくても、他の選択肢が取りやすくなる共通のコンテキストですべてのリソースにアクセスできる

Slide 10

Slide 10 text

加速する土台づくりコンポーネント設計

Slide 11

Slide 11 text

共通のコンポーネント設計をするメリットデザインツールとコードを同期しやすくなるコンポーネントの粒度、命名規則、組み合わせ、トークンの種類が同じだと連携が容易になる

Slide 12

Slide 12 text

「見た目」ではなく「構造」を見るフロントエンドエンジニアは、UIデザインを「見た目」だけでなく「構造」を想像するユーザー名 ...

Slide 13

Slide 13 text

デザインツールとコードが一致していたら連携しやすそうじゃないですか？！余談: 現実世界とソフトウェアを同期させて開発する Domain-Driven Design という手法もある

Slide 14

Slide 14 text

コンポーネント設計入門

Slide 15

Slide 15 text

コンポーネント設計の目的再利用しやすくすること責務ごとに分類、管理できるデザイン・実装が統一される各要素に名前をつけること命名行為は「そのもの」の存在理由を明確にする cf. ジョシュアツリーの法則（名前がないものは見えない）「見た目」だけでなく「構造」を意識することプログラマチックな考え方だけど、デザイン分野でも応用が効く考え方

Slide 16

Slide 16 text

コンポーネント設計の方法論コンポーネントをどの単位でつくるか Atomic Design などコンポーネントにどんな名前をつけるのか Vue.js スタイルガイドなどいっぱいあるので今回紹介するのはこの2つ

Slide 17

Slide 17 text

コンポーネントをどの単位でつくるか

Slide 18

Slide 18 text

Atomic Design Atoms 最小のコンポーネント単位 Molecules Atoms を組み合わせたコンポーネント単位 Organisms Modecules （+ Atoms）を組み合わせたコンポーネント単位

Slide 19

Slide 19 text

Atomic Design（続き） Templates Organisms を組み合わせたコンポーネント単位 Pages Template に実際のデータを入れたもの

Slide 20

Slide 20 text

Atomic Design つらいって聞くけど？実際そんな声も聞こえてくるけど… チームで共有されたガイドラインがない方がつらい合意がとれたガイドラインがあるなら Atomic Design にこだわる必要はない世の中、すべてを Atomic Design でカバーできるほど単純ではないので、自分たちでルールを拡張しなきゃいけない

Slide 21

Slide 21 text

実践 Atomic Design - Atoms Atoms 最小のコンポーネント単位 HTMLの1つの要素 ≒ Atoms SearchButton Search SearchInput

Slide 22

Slide 22 text

実践 Atomic Design - Molecules Molecules Atoms を組み合わせたコンポーネント単位 SearchForm

Slide 23

Slide 23 text

実践 Atomic Design - Organisms Organisms Molecules(+ Atoms) を組み合わせたコンポーネント単位 HeaderMenu ... Search

Slide 24

Slide 24 text

実践 Atomic Design Templates Organisms を組み合わせたコンポーネント単位 Pages Templates を組み合わせたコンポーネント単位（≒ページ）この2種は具体的な名前（ドメイン名）がつくことが多い

Slide 25

Slide 25 text

世の中、そんなに単純じゃない Atomic Design のルールだけでは、どうしようもできないことがある原理主義的になりすぎると運用が難しくなる Submit Submit Button は Atoms に分類できる Icon を含んだ Button はいったい Atoms or Molecules のどちらになるんだ？！

Slide 26

Slide 26 text

Atomic Design を拡張する

Slide 27

Slide 27 text

分類をあきらめるという手も原理主義的に分類すると違和感が生まれる Atomic Design の本質は「コンポーネントを分割すること」にあり、「グルーピングすること」ではない（と都合よく考える）極論「各要素がコンポーネントに分かれている」「コンポーネントを再利用してページを構築している」という状況さえ手に入れば良い

Slide 28

Slide 28 text

Design Token Atoms より小さい単位のトークン（≠ コンポーネント） Typography Colors: --color-(black|white|red|blue|green|yellow) Spacing: --spacing-(xxs|xs|sm|md|lg|xl|xxl) Shadow: --shadow-(1|2|3|4|5) …… CSS変数みたいなもの

Slide 29

Slide 29 text

コンポーネントにどんな名前をつけるのか

Slide 30

Slide 30 text

命名規則 - Vue.js スタイルガイド Atoms Base や App をPrefixにする htmlタグとコンフリクトするため複数単語で命名する例: BaseButton 、 AppButton Submit Search...

Slide 31

Slide 31 text

命名規則 - Vue.js スタイルガイド Molecules以上複数単語をつける（htmlのタグとコンフリクトさせないため）例: TodoItem 、 SearchForm ページに1つしか存在しないコンポーネントには The をつける例: TheHeader 、 TheSidebar 密結合のコンポーネントは親の名前（ドメインの名前）をつける例: TodoList > TodoListItem > TodoListItemButton

Slide 32

Slide 32 text

命名規則 - Vue.js スタイルガイド（続き） Molecules以上 {items.map(item => { return })} { item.name } ...

Slide 33

Slide 33 text

まとめデザイナーとエンジニアの境界をなくして、UI開発を加速させましょう加速する土台として、デザインツールとコードを同期させましょう同期させるために、コンポーネント設計をしましょう

Slide 34

Slide 34 text

細かなことは一緒に決めましょう

Slide 35

Slide 35 text

参考リンク Design Systems 101 | Nielsen Norman Group Atomic Design | Brad Frost Design Tokens Format Module | W3C Community Group スタイルガイド | Vue.js