「明日からフロントもよろしく」と言われたときに備える Atomic Design

by akki

Slide 1

Slide 1 text

2020/02/1 Phperkaigi 2020 ルーキーズLT 秋葉誠一 @akki_megane 「明日からフロントもよろしく！」と言われたとき備える Atomic Design でのフロントエンド設計

Slide 2

Slide 2 text

自己紹介 @akki_megane 名前：秋葉誠一好きな技術：PHP、Serverless 会社：ROXX (2月に転職しました) 趣味：スノボ、サバゲ、野球

Slide 3

Slide 3 text

前置き SPA (Single Page Application)で作りたい！はよくあること複雑化するフロントエンドに対して、バックエンドとフロントエンドで分業することも最近は多くなりました

Slide 4

Slide 4 text

前置き SPA (Single Page Application)で作りたい！はよくあること複雑化するフロントエンドに対して、バックエンドとフロントエンドで分業することも最近は多くなりましたが、そんなに都合よく人はいない

Slide 5

Slide 5 text

前置き明日からフロントもやって (またはやるしかない)

Slide 6

Slide 6 text

現代のフロントエンドコンポーネント指向での開発が一般的 (GUI の部品を作る)

Slide 7

Slide 7 text

コンポーネント設計がむずい分け方とかよくわからん、、、粒度、役割、etc けど、揃えないとまさにカオス

Slide 8

Slide 8 text

コンポーネント設計がむずいそこで Atomic Design

Slide 9

Slide 9 text

Atomic Design

Slide 10

Slide 10 text

Atomic Design ● web デザイナーのBrad Frost が提唱 ● ビジュアル的なデザインではなく「設計」という意味のほうが強いです ● インターフェイスシステムを作成するための設計方法論 ● 5つの異なる階層で構成される ● UIをまとまりのある全体とパーツの集合体であるととらえるメンタルモデル原典

Slide 11

Slide 11 text

Atomic Design Atomic is 原子

Slide 12

Slide 12 text

Atomic Design

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Atomic Design Atom(原子)が結合してMolecules (分子)を形成し Molecules (分子)はさらに結合して、より複雑な Organisms (生物)を形成するこの考えをベースにUIシステムを構築する

Slide 15

Slide 15 text

Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms (生物) 4. Templates (テンプレート) 5. Pages (ページ)

Slide 16

Slide 16 text

Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms (生物) 4. Templates (テンプレート) 5. Pages (ページ) UIの構成する基本的な要素これ以上分解することのできない要素最も抽象的な要素基本的なHTML要素が含まれるラベル、インプットフォーム、ボタン

Slide 17

Slide 17 text

Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms (生物) 4. Templates (テンプレート) 5. Pages (ページ) Atoms を組み合わせることで構成される要素複数のAtoms が組み合わさることにより目的をもった具体的な要素になる入力フォーム、テーブル

Slide 18

Slide 18 text

Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms (生物) 4. Templates (テンプレート) 5. Pages (ページ) Atoms/Molecules/ 他のOrganisms を組合わせて構成される要素 UIとしてセクションを形成するヘッダー、フッター

Slide 19

Slide 19 text

Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms (生物) 4. Templates (テンプレート) 5. Pages (ページ) コンポーネントのレイアウトするページのコンテンツ構造を定義する

Slide 20

Slide 20 text

Atomic Design 1. Atoms (原子) 2. Molecules (分子) 3. Organisms (生物) 4. Templates (テンプレート) 5. Pages (ページ) コンテンツの適用、最終的なUIを表示コンポーネントに具体的なコンテンツ(画像、テキスト、メディア)を入れ込む

Slide 21

Slide 21 text

Atomic Design 依存の方向上位層下位層

Slide 22

Slide 22 text

Atomic Design 依存の方向上位層下位層詳細な分割基準はないなにをどの層に分類するか決めるのはあなた

Slide 23

Slide 23 text

利点 ● チーム内での共通概念 ● 再利用性の高いコンポーネント ● 階層構造でのコンポーネントの整理 ● コンポーネントの責務を分けることができる

Slide 24

Slide 24 text

利点 ● チーム内での共通概念 ● 再利用性の高いコンポーネント ● 階層構造でのコンポーネントの整理 ● コンポーネントの責務を分けることができる実際にやってみて感じた最大利点はこれレイヤードアーキテクチャ的な考え方　　　　　　　　＋コンポーネントの責務分離(単一責任の原則) 開発と保守がしやすい、テストも適用しやすい

Slide 25

Slide 25 text

まとめ

Slide 26

Slide 26 text

まとめ ● Atomic Design いいぞ！ ● UIとはパーツ(コンポーネント)の集合体であるという意識 ● 厳格な設計原則ではないので、詳細はチームで作っていくのが大切