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

Transcript

1. Copyright © aumo, Inc. All Rights Reserved. コンポーネント毎に責務の範囲を明確にしたら開発 速度、保守性が向上して幸せになった話 アウモ株式会社 村田 翔
 2023.10.04 コンポーネント設計のすゝめ 〜ベストプラクティスを学ぶLunch LT〜

2. Copyright © aumo, Inc. All Rights Reserved. • Atomic Design • Nuxt.js 今回のキーワード
3. Copyright © aumo, Inc. All Rights Reserved. aumoについて
4. Copyright © aumo, Inc. All Rights Reserved. おでかけ情報サービスの「施設検索サービス」
 → 5ジャンルをドメイン区切りで展開、1つのコンテナで稼働させている構成
 今回の対象
5. Copyright © aumo, Inc. All Rights Reserved. 課題
6. Copyright © aumo, Inc. All Rights Reserved. • サービスを跨いだ使い回しを想定したコンポーネント設計ではな かった • コンポーネント毎に固有値を持つような設計のため、類似した コンポーネントをサービス毎に用意する状況 最初は1ジャンルのサービス展開であったため...
7. Copyright © aumo, Inc. All Rights Reserved. • Moleculesなのか？Organismsなのか？どのレベルに当ては めるべきか迷う • 状態管理はどこでするべきか？ • プロパティで値渡しのバケツリレーになりがち • marginはどのレベルで定義するべきか などなど... Atomic Design※で遭遇しがちな問題に直面
8. Copyright © aumo, Inc. All Rights Reserved. Brad Frost氏が発案。構成要素を「Atoms(原子)、Molecules(分子)、Organisms(有機体)、 Template(テンプレート)、Page(ページ)」の階層に分けた設計手法。
 ※Atomic Designとは
9. Copyright © aumo, Inc. All Rights Reserved. 対応策
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に合わせて責務を区切る
 

11. Copyright © aumo, Inc. All Rights Reserved. 最小単位のUIコンポーネント
 
 1. Atoms(原子) ▼ポイント
 ・プロパティで上位レベルから値を埋め込むため、データは基本的に利用しない
 ・外枠にmarginを持たせない

12. Copyright © aumo, Inc. All Rights Reserved. Atomsを組み合わせたコンポーネント
 2. Molecules(分子) ▼ポイント
 ・プロパティでOrganismsから値を埋め込むため、データは基本的に利用しない
 ・外枠にmarginを持たせない

13. Copyright © aumo, Inc. All Rights Reserved. 複数のAtomsとMoleculesを組み合わせたコンポーネント
 3. Organisms(有機体) ▼ポイント
 ・状態管理、Storeから下位レベルのコンポーネントに埋め込む値を渡す
 ・外枠にmarginを持たせない

14. Copyright © aumo, Inc. All Rights Reserved. 下位レベルのコンポーネントを組み合わせたUIフレーム
 4. Template(テンプレート) ▼ポイント
 ・レイアウトを定義するのに特化、データの受け渡しは行わない

15. Copyright © aumo, Inc. All Rights Reserved. アプリケーションのルート
 5. Page(ページ) ▼ポイント
 ・APIから必要な情報を取得し、Storeにcommitする

16. Copyright © aumo, Inc. All Rights Reserved. まとめ
17. Copyright © aumo, Inc. All Rights Reserved. • コンポーネントが再利用しやすい状態になる • 重複コードの排除による開発効率、保守性向上 • 状態管理がカオス状態になることを避けることによる開発効 率、保守性向上 • 誰がコードレビューしても指摘のブレがなくなる コンポーネント毎に責務の範囲を明確化することで
18. Copyright © aumo, Inc. All Rights Reserved. ご清聴ありがとうございました テックブログで取組発信中