Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

akki
February 11, 2020

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

akki

February 11, 2020
Tweet

More Decks by akki

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. Atomic Design

    View Slide

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

    View Slide

  11. Atomic Design
    Atomic is 原子

    View Slide

  12. Atomic Design

    View Slide

  13. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  25. まとめ

    View Slide

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

    View Slide

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

    View Slide

  28. まとめ
    というチャンスが来たときに備えましょう

    View Slide