コンテンツにスキップ

（記述中）設計：UI設計

コンポーネント駆動開発(CDD)

UIを組み上げるときにコンポーネントから作り、最後にページを作り上げる「ボトムアップ」の開発プロセスのこと。

Atomic Design

  • CDDにおける命名や粒度の一指標
  • 原子（atoms）、分子（molecules）、組織（organisms）、テンプレート（template）、ページ（page）
  • 粒度軸区別なので曖昧さがある
    • ラベル付きのボタンはatomsなのかmoleculesなのか
    • アイコン付き入力フォーム（フォーム＋ボタン＋アイコン）はmoleculesなのかorganismsなのか
    • 曖昧さが循環参照リスクになる

BCD Design

  • 粒度軸ではなく、概念軸（Base Case Domain）で切り分けることで曖昧性を廃する
  • Vuetifyのような汎用コンポーネントは基本的にBaseコンポーネントにあたる。

参考