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

社内勉強会用

デザイナーとフロントエンドエンジニアの境界をなくし、UI開発を加速させるためのコンポーネント設計入門
※フロントエンドエンジニア視点

[Keywords]
- 共通認識としてのデザインシステム
- 共通認識としてのコンポーネント設計

Transcript

1. 加速するコンポーネント設計入門 デザイナーとエンジニアの境界をなくしたい ダーシノ / @bc_rikko ※ フロントエンドエンジニア視点の話です
2. 入門する前に なぜ、「コンポーネント設計」が必要なのか
3. いままでのUI開発 デザイナー デザインツール上でオブジェクトを組み合わせてUIデザインをする 画像ファイルを出力し、フロントエンドエンジニアに渡す フロントエンドエンジニア 画像を元にUI（HTML/CSS）を実装する コンポーネント化は自分たちで考える
4. 「いままでのUI開発」のメリデメ メリット 分業されており責任境界がある お互いのことを知らなくても仕事が進められる デメリット 分業されており責任境界がある お互いのことを知らなくても仕事が進められる ※ 誤植じゃないです
5. デメリットを詳しく 境界があることでお互いの領域に意見を出しづらい（越権行為） お互いを知らないので何を求められているかがわかりづらい 複数の会社が参加する大規模プロジェクトならいいけど、同じ会社の人間なの でもっと協力したい
6. じゃあ、どうしたいのか？ UI開発を加速させたい UIデザイン、コード、ドキュメントを連携させたい デザイナーとエンジニアの境界をなくしたい
7. UI開発を加速させたい
8. 加速させるためには チーム全体で共通のコンテキスト（共通認識）を共有する その “手段” がデザインシステム （※目的ではない） デザインシステムの説明は本筋とずれるため割愛
9. デザインツールとコードを連携させる デザインツールとコードを連携させることで、以下のことができる（かもしれない） デザインシステムの土台になる 仮にデザインシステムを作らなくても、他の選択肢が取りやすくなる 共通のコンテキストですべてのリソースにアクセスできる
10. 加速する土台づくり コンポーネント設計
11. 共通のコンポーネント設計をするメリット デザインツールとコードを同期しやすくなる コンポーネントの粒度、命名規則、組み合わせ、トークンの種類が同じだと連携 が容易になる
12. 「見た目」ではなく「構造」を見る フロントエンドエンジニアは、UIデザインを「見た目」だけでなく「構造」を想像する <Field> <FieldLabel> <Label for="username">ユーザー名</Label> </FieldLabel> <FieldInput> <TextInput id="username"/> <Messages> <ErrorMessage>...</ErrorMessage> </Messages> </FieldInput> </Field>
13. デザインツールとコードが一致していたら 連携しやすそうじゃないですか？！ 余談: 現実世界とソフトウェアを同期させて開発する Domain-Driven Design という手法もある
14. コンポーネント設計入門
15. コンポーネント設計の目的 再利用しやすくすること 責務ごとに分類、管理できる デザイン・実装が統一される 各要素に名前をつけること 命名行為は「そのもの」の存在理由を明確にする cf. ジョシュアツリーの法則（名前がないものは見えない） 「見た目」だけでなく「構造」を意識すること プログラマチックな考え方だけど、デザイン分野でも応用が効く考え方
16. コンポーネント設計の方法論 コンポーネントをどの単位でつくるか Atomic Design など コンポーネントにどんな名前をつけるのか Vue.js スタイルガイド など いっぱいあるので今回紹介するのはこの2つ
17. コンポーネントをどの単位でつくるか
18. Atomic Design Atoms 最小のコンポーネント単位 Molecules Atoms を組み合わせたコンポーネント単位 Organisms Modecules （+ Atoms） を組み合わせたコンポーネント単位
19. Atomic Design（続き） Templates Organisms を組み合わせたコンポーネント単位 Pages Template に実際のデータを入れたもの
20. Atomic Design つらいって聞くけど？ 実際そんな声も聞こえてくるけど… チームで共有されたガイドラインがない方がつらい 合意がとれたガイドラインがあるなら Atomic Design にこだわる必要はな い 世の中、すべてを Atomic Design でカバーできるほど単純ではないので、 自分たちでルールを拡張しなきゃいけない
21. 実践 Atomic Design - Atoms Atoms 最小のコンポーネント単位 HTMLの1つの要素 ≒ Atoms SearchButton <button type="submit">Search</button> SearchInput <input type="search">
22. 実践 Atomic Design - Molecules Molecules Atoms を組み合わせたコンポーネント単位 SearchForm <div class="search-form"> <SearchInput /> <SearchButton>Search</SearchButton> </div>
23. 実践 Atomic Design - Organisms Organisms Molecules(+ Atoms) を組み合わせたコンポーネント単位 HeaderMenu <header class="header-menu"> ... <SearchForm> <SearchInput /> <SearchButton>Search</SearchButton> </SearchForm> </header>
24. 実践 Atomic Design Templates Organisms を組み合わせたコンポーネント単位 Pages Templates を組み合わせたコンポーネント単位（≒ページ） この2種は具体的な名前（ドメイン名）がつくことが多い
25. 世の中、そんなに単純じゃない Atomic Design のルールだけでは、どうしようもできないことがある 原理主義的になりすぎると運用が難しくなる <!-- Atoms だよね --> <Button>Submit</Button> <!-- Atoms？Molecules？ --> <Button> <Icon /> Submit </Button> Button は Atoms に分類できる Icon を含んだ Button はいったい Atoms or Molecules のどちらになるんだ？！
26. Atomic Design を拡張する
27. 分類をあきらめるという手も 原理主義的に分類すると違和感が生まれる Atomic Design の本質は「コンポーネントを分割すること」にあり、「グルー ピングすること」ではない（と都合よく考える） 極論「各要素がコンポーネントに分かれている」「コンポーネントを再利用して ページを構築している」という状況さえ手に入れば良い
28. 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変数みたいなもの
29. コンポーネントにどんな名前をつけるのか
30. 命名規則 - Vue.js スタイルガイド Atoms Base や App をPrefixにする htmlタグとコンフリクトするため複数単語で命名する 例: BaseButton 、 AppButton <AppButton type="submit">Submit</AppButton> <AppLabel for="search-text">Search...</AppLabel> <AppSearchInput id="search-text" />
31. 命名規則 - Vue.js スタイルガイド Molecules以上 複数単語をつける（htmlのタグとコンフリクトさせないため） 例: TodoItem 、 SearchForm ページに1つしか存在しないコンポーネントには The をつける 例: TheHeader 、 TheSidebar 密結合のコンポーネントは親の名前（ドメインの名前）をつける 例: TodoList > TodoListItem > TodoListItemButton
32. 命名規則 - Vue.js スタイルガイド（続き） Molecules以上 <TheHeader></TheHeader> <TodoList> {items.map(item => { return <TodoListItem data={item} /> })} </TodoList> <TodoListItem> <span>{ item.name }</span> <TodoListItemButton>...</TodoListItemButton> </TodoListItem>
33. まとめ デザイナーとエンジニアの境界をなくして、UI開発を加速させましょう 加速する土台として、デザインツールとコードを同期させましょう 同期させるために、コンポーネント設計をしましょう
34. 細かなことは一緒に決めましょう
35. 参考リンク Design Systems 101 | Nielsen Norman Group Atomic Design | Brad Frost Design Tokens Format Module | W3C Community Group スタイルガイド | Vue.js