コンポーネント設計のすゝめ__ベストプラクティスを学ぶLunch_LT_.pdf

Transcript

1. Copyright © aumo, Inc. All Rights Reserved.
   コンポーネント毎に責務の範囲を明確にしたら開発
   速度、保守性が向上して幸せになった話
   アウモ株式会社 村田 翔

   2023.10.04 コンポーネント設計のすゝめ 〜ベストプラクティスを学ぶLunch LT〜

   

   View Slide

2. Copyright © aumo, Inc. All Rights Reserved.
   • Atomic Design
   • Nuxt.js
   今回のキーワード
   

   View Slide

3. Copyright © aumo, Inc. All Rights Reserved.
   aumoについて
   

   View Slide

4. Copyright © aumo, Inc. All Rights Reserved.
   おでかけ情報サービスの「施設検索サービス」

   → 5ジャンルをドメイン区切りで展開、1つのコンテナで稼働させている構成

   今回の対象
   

   View Slide

5. Copyright © aumo, Inc. All Rights Reserved.
   課題
   

   View Slide

6. Copyright © aumo, Inc. All Rights Reserved.
   • サービスを跨いだ使い回しを想定したコンポーネント設計ではな
   かった
   • コンポーネント毎に固有値を持つような設計のため、類似した
   コンポーネントをサービス毎に用意する状況
   最初は1ジャンルのサービス展開であったため...
   

   View Slide

7. Copyright © aumo, Inc. All Rights Reserved.
   • Moleculesなのか？Organismsなのか？どのレベルに当ては
   めるべきか迷う
   • 状態管理はどこでするべきか？
   • プロパティで値渡しのバケツリレーになりがち
   • marginはどのレベルで定義するべきか などなど...
   Atomic Design※で遭遇しがちな問題に直面
   

   View Slide

8. Copyright © aumo, Inc. All Rights Reserved.
   Brad Frost氏が発案。構成要素を「Atoms(原子)、Molecules(分子)、Organisms(有機体)、
   Template(テンプレート)、Page(ページ)」の階層に分けた設計手法。

   ※Atomic Designとは
   

   View Slide

9. Copyright © aumo, Inc. All Rights Reserved.
   対応策
   

   View Slide

10. Copyright © aumo, Inc. All Rights Reserved.
    コンポーネント毎に責務の範囲を明確化
    レベル Atomic Design ディレクトリ 責務
    1 Atoms(原子) ~components/atoms ・最小UIコンポーネント
    2 Molecules(分子) ~components/molecules ・Atomsを組合せたUIコンポーネント
    3 Organisms(有機体) ~components/organisms
    ・複数のAtoms、Moleculesを持つUIコンポーネント
    ・ビジネスロジック
    ・状態管理(Dispatch/Render)
    4 Template(テンプレート) ~layouts ・下位レベルのコンポーネントを組み合わせた UIフレーム
    5 Page(ページ) ~pages
    ・アプリケーションのルート
    ・router関連の処理
    ・認証認可
    ・状態管理(Dispatch)
    Atomic Designに合わせて責務を区切る

    

    

    View Slide

11. Copyright © aumo, Inc. All Rights Reserved.
    最小単位のUIコンポーネント

    

    1. Atoms(原子)
    ▼ポイント

    ・プロパティで上位レベルから値を埋め込むため、データは基本的に利用しない

    ・外枠にmarginを持たせない

    

    View Slide

12. Copyright © aumo, Inc. All Rights Reserved.
    Atomsを組み合わせたコンポーネント

    2. Molecules(分子)
    ▼ポイント

    ・プロパティでOrganismsから値を埋め込むため、データは基本的に利用しない

    ・外枠にmarginを持たせない

    

    View Slide

13. Copyright © aumo, Inc. All Rights Reserved.
    複数のAtomsとMoleculesを組み合わせたコンポーネント

    3. Organisms(有機体)
    ▼ポイント

    ・状態管理、Storeから下位レベルのコンポーネントに埋め込む値を渡す

    ・外枠にmarginを持たせない

    

    View Slide

14. Copyright © aumo, Inc. All Rights Reserved.
    下位レベルのコンポーネントを組み合わせたUIフレーム

    4. Template(テンプレート)
    ▼ポイント

    ・レイアウトを定義するのに特化、データの受け渡しは行わない

    

    View Slide

15. Copyright © aumo, Inc. All Rights Reserved.
    アプリケーションのルート

    5. Page(ページ)
    ▼ポイント

    ・APIから必要な情報を取得し、Storeにcommitする

    

    View Slide

16. Copyright © aumo, Inc. All Rights Reserved.
    まとめ
    

    View Slide

17. Copyright © aumo, Inc. All Rights Reserved.
    • コンポーネントが再利用しやすい状態になる
    • 重複コードの排除による開発効率、保守性向上
    • 状態管理がカオス状態になることを避けることによる開発効
    率、保守性向上
    • 誰がコードレビューしても指摘のブレがなくなる
    コンポーネント毎に責務の範囲を明確化することで
    

    View Slide

18. Copyright © aumo, Inc. All Rights Reserved.
    ご清聴ありがとうございました
    テックブログで取組発信中
    

    View Slide