Atomic Designとの 上手な付き合い方 / better-relationship-between-atomic-design

Slide 1

Slide 1 text

Atomic Designとの  上手な付き合い方 Takanori Oki

Slide 2

Slide 2 text

自己紹介 • Takanori Oki（@takanorip） • フロントエンドエンジニア • React / Nuxt.js / Polymer ... • フォントが好き • 前職で1年くらいAtomicDesign運用経験あり

Slide 3

Slide 3 text

たぶん前の人達と同じような話をします

Slide 4

Slide 4 text

私的な感情論なのであまり真面目に捉えないでください

Slide 5

Slide 5 text

Slide 6

Slide 6 text

みんな Atomic Design に真面目すぎるんじゃない？

Slide 7

Slide 7 text

真面目すぎる • コンポーネントの分け方の議論に時間を  かけすぎて、実装が進まない • 設計の手助けをしてくれるはずのものが  設計を難しくしてる、本末転倒 • 全てに満足することはできない

Slide 8

Slide 8 text

「コンポーネントの設計しっかりしなきゃ…」「これはMolecules? Organisms?」

Slide 9

Slide 9 text

つらい！！

Slide 10

Slide 10 text

つらくならないためには「大雑把に」付き合うことが大切

Slide 11

Slide 11 text

最小単位を意識する • コンポーネントを作る際は最小単位（Atom）だけ意識する • Molecules か Organisms かは大した問題じゃないし、早すぎる最適化を生む危険もある • ある程度全体が見えてきてから考えたほうが良い

Slide 12

Slide 12 text

「正解はない」 • Atomic Design は概念 • 正解はないので、チームやプロダクトに  合わせた階層構造を考える必要がある • 厳密になりすぎず、ゆとりを持つことが必要 • が、ルールは必要

Slide 13

Slide 13 text

ルールを整備することで考えることを減らす

Slide 14

Slide 14 text

基本再利用しないものとしてコンポーネントをつくる

Slide 15

Slide 15 text

重要なのは Templates/Pages と Organisms 以下の分離

Slide 16

Slide 16 text

責務を分離する

Slide 17

Slide 17 text

Template/Pagasは Storeに接続され、アプリケーション全体の状態を知っている

Slide 18

Slide 18 text

Organisms以下のコンポーネントはそのコンポーネントのことしか知らない

Slide 19

Slide 19 text

デザイナーを巻き込むこと

Slide 20

Slide 20 text

デザイナー重要 • そもそも、エンジニアだけでこういう話を  するのは良くない • デザイナーに Atomic Design の概念を  デザインフローに組み込んでもらう • コンポーネントの単位はデザイナーに決めてもらうのが良いかも

Slide 21

Slide 21 text

Atomic Designをちゃんと機能させるにはデザインと実装両方の知識が必要！

Slide 22

Slide 22 text

僕の理想 • デザイナーがコンポーネントをデザインする段階で、おおよその階層を決める（Atoms/ Molecules/Organizms） • 実装時に不都合がある場合は、エンジニア側から相談し解決

Slide 23

Slide 23 text

コンポーネントのデザイン管理 • コンポーネントごとのデザイン管理は  Figmaが優秀（ただし有料プランのみ） • コンポーネントを保存でき、同じチーム内のプロジェクトで使い回せる • エンジニアもコンポーネントの  デザイン一覧を確認できるので便利