2020/02/1 Phperkaigi 2020ルーキーズLT秋葉 誠一@akki_megane「明日からフロントもよろしく!」と言われたとき備えるAtomic Design でのフロントエンド設計
View Slide
自己紹介@akki_megane名前:秋葉 誠一好きな技術:PHP、Serverless会社:ROXX (2月に転職しました)趣味:スノボ、サバゲ、野球
前置きSPA (Single Page Application)で作りたい!はよくあること複雑化するフロントエンドに対して、バックエンドとフロントエンドで分業することも最近は多くなりました
前置きSPA (Single Page Application)で作りたい!はよくあること複雑化するフロントエンドに対して、バックエンドとフロントエンドで分業することも最近は多くなりましたが、そんなに都合よく人はいない
前置き明日からフロントもやって(またはやるしかない)
現代のフロントエンドコンポーネント指向での開発が一般的(GUI の部品を作る)
コンポーネント設計がむずい分け方とかよくわからん、、、粒度、役割、etcけど、揃えないとまさにカオス
コンポーネント設計がむずいそこで Atomic Design
Atomic Design
Atomic Design● web デザイナーのBrad Frost が提唱● ビジュアル的なデザインではなく「設計」という意味のほうが強いです● インターフェイスシステムを作成するための設計方法論● 5つの異なる階層で構成される● UIをまとまりのある全体とパーツの集合体であるととらえるメンタルモデル原典
Atomic DesignAtomic is 原子
Atomic DesignAtom(原子)が結合してMolecules (分子)を形成しMolecules (分子)はさらに結合して、より複雑なOrganisms (生物)を形成するこの考えをベースにUIシステムを構築する
Atomic Design1. Atoms (原子)2. Molecules (分子)3. Organisms (生物)4. Templates (テンプレート)5. Pages (ページ)
Atomic Design1. Atoms (原子)2. Molecules (分子)3. Organisms (生物)4. Templates (テンプレート)5. Pages (ページ)UIの構成する基本的な要素これ以上分解することのできない要素最も抽象的な要素基本的なHTML要素が含まれるラベル、インプットフォーム、ボタン
Atomic Design1. Atoms (原子)2. Molecules (分子)3. Organisms (生物)4. Templates (テンプレート)5. Pages (ページ)Atoms を組み合わせることで構成される要素複数のAtoms が組み合わさることにより目的をもった具体的な要素になる入力フォーム、テーブル
Atomic Design1. Atoms (原子)2. Molecules (分子)3. Organisms (生物)4. Templates (テンプレート)5. Pages (ページ)Atoms/Molecules/ 他のOrganisms を組合わせて構成される要素UIとしてセクションを形成するヘッダー、フッター
Atomic Design1. Atoms (原子)2. Molecules (分子)3. Organisms (生物)4. Templates (テンプレート)5. Pages (ページ)コンポーネントのレイアウトするページのコンテンツ構造を定義する
Atomic Design1. Atoms (原子)2. Molecules (分子)3. Organisms (生物)4. Templates (テンプレート)5. Pages (ページ)コンテンツの適用、最終的なUIを表示コンポーネントに具体的なコンテンツ(画像、テキスト、メディア)を入れ込む
Atomic Design依存の方向 上位層下位層
Atomic Design依存の方向 上位層下位層詳細な分割基準はないなにをどの層に分類するか決めるのはあなた
利点● チーム内での共通概念● 再利用性の高いコンポーネント● 階層構造でのコンポーネントの整理● コンポーネントの責務を分けることができる
利点● チーム内での共通概念● 再利用性の高いコンポーネント● 階層構造でのコンポーネントの整理● コンポーネントの責務を分けることができる実際にやってみて感じた最大利点はこれレイヤードアーキテクチャ的な考え方 +コンポーネントの責務分離(単一責任の原則)開発と保守がしやすい、テストも適用しやすい
まとめ
まとめ● Atomic Design いいぞ!● UIとはパーツ(コンポーネント)の集合体であるという意識● 厳格な設計原則ではないので、詳細はチームで作っていくのが大切
まとめというチャンスが来たときに備えましょう