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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Atomic Design

    View full-size slide

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

    View full-size slide

  11. Atomic Design
    Atomic is 原子

    View full-size slide

  12. Atomic Design

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide