概要
フロントエンドの開発において、VueやReactなどのJavaScriptフレームワーク・ライブラリを用いて開発することは現在の主流です。
その際の設計としてAtomic designなどを聞いたことがある人は多いでしょう。小さな部品に分けて、一つのページを作るとことですが、その根底にあるのがコンポーネント駆動開発(Componet Driven Development)です。
本記事では、CDDについての基本にについてにも触れていきたいと思います。
CDDとは
コンポーネント駆動開発(Componet Driven Development)とは、最小の基本コンポーネントをパズルのように組み合わせ、一つのページ組み立てる「ボトムアップ」方式の設計手法です。
ここでいう、最小の基本コンポーネントとは、ボタンや入力要素などのことです。
最近のユーザインターフェース（UI）は複雑になっています。よりUXの高いサービスが提供されるのが普通になっており、UI部分に多くのロジックを組み込む必要があります。
何も考えずに開発するとアプリケーションが成長するにつれて、複雑になるのが想像できます。最初のうちはいいかもしれませんが、成長に伴い、可読性が下がり、バグが多くなり、エンハンスにも時間がかかるということが起きかねません。
そこで、小さなコンポーネントに分けることで複雑性を緩和させます。コンポーネントは、アプリケーションのビジネスロジックから状態を分離することにより、互換性を実現します。これにより、コンポーネントを分解して再構成することで、さまざまなUIを構築できます。
改めて、コンポーネントは、UIの標準化された交換可能なブロックパーツです。これらは、UIの外観(UI部分)と機能(ビジネスロジック)をカプセル化します。
コンポーネント駆動開発のフロー
- 一つのコンポーネントを作成する
最小のコンポーネントを作成します。例えば、ボタン、アバター、入力要素などです。 - 最小コンポーネントを組み合わせる
1.で作成したコンポーネントを利用しつつ、よりサービスとして利用できるパーツを作成します。例えば、ヘッダー、フッター、モーダル、テーブルなどです。 - ページを組み立てる
1.2.で作成したコンポーネントを組みわせることで一つのページを作成します。例えば、トップページ、紹介ページなどです。 - データ、ロジックを追加しページを完成
API通信によりデータを取得する場合であれば取得しページ完成
メリット
- 品質
- コンポーネントレベルでテストが可能であり、品質が向上します
- 速度
- コンポーネントは複数のページにまたがって利用可能可能なので、ソースコードが少なくなります
- 可読性
- コンポーネントに分割するための一つのソースコードが小さくなり、みやすくなります
- 効率
- コンポーネント単位で作業をチームで分担することができます
atomic design
atomic designは、デザインシステムを作成するための方法論です。どのようにコンポーネントに分けるか？ディレクトリ名をどうするかを指標にしたものです。atomic designには5つの異なるレベルがあります。
(出典：https://bradfrost.com/blog/post/atomic-web-design/#atoms)
それぞれの段階を見ていきます。
atoms(原子)
atoms(原子)は物質の基本的な構成要素です。Webインターフェイスに適用されるatomsは、フォームラベル、入力、ボタンなどのHTMLタグです。
atomsには、カラーパレット、フォントなどのより抽象的な要素や、アニメーションなどのインターフェイスのさらに目に見えない側面を含めることもできます。
自然界の原子のように、それらはかなり抽象的であり、それ自体では役に立たないです。つまり、ある固定のサービスなどには依存してはいけないということです。ただし、すべてのグローバルスタイルが一目でわかるため、パターンライブラリのコンテキストでの参照としては適しています。
(出典：https://bradfrost.com/blog/post/atomic-web-design/#atoms)
molecules(分子)
原子を組み合わせ始めると、物事はより面白くて具体的になり始めます。moluculesは互いに結合した原子のグループであり、化合物の最小の基本単位です。これらの分子は独自の特性を持ち、設計システムのバックボーンとして機能します。
たとえば、atomsであるフォームラベル、入力、またはボタンは、それ自体ではあまり有用ではありませんが、フォームとしてそれらを組み合わせると、実際に意味のあることを行うことができます。
原子から分子を構築することは、「1つのことをしてそれをうまくやる」という精神を助長します。分子は複雑になる可能性がありますが、経験則として、再利用のために構築された原子の比較的単純な組み合わせです。
(出典：https://bradfrost.com/blog/post/atomic-web-design/#atoms)
organisms(生物)
分子は私たちに働くためのいくつかのビルディングブロックを与えてくれます。そして私たちは今それらを一緒に組み合わせてoirganisms(生物)を形成することができます。organismsは、分子のグループが結合して、インターフェースの比較的複雑で明確なセクションを形成します。
例えば、ヘッダー部分、モーダル部分などがあります。
(出典：https://bradfrost.com/blog/post/atomic-web-design/#atoms)
templates(テンプレート)
templatesは主に、ページを形成するためにつなぎ合わされたorganismsのグループで構成されています。ここでは、化学のアナロジーを打ち破り、クライアントと最終的な出力にとってより意味のある構成になります。
テンプレートでは、あるページのデザイン・レイアウト構成のみを形成します。この時点はレイアウトのみを指定し、実際にテキスト・画像などのデータは表示しないです。
(出典：https://bradfrost.com/blog/post/atomic-web-design/#atoms)
pages(ページ)
これは、templatesに実際に画像やテキストなどのデータを注入し、実際にユーザに見てもらう画面を形成します。
ページにあるものを切り替えることで、実際にWebサービスを提供します。
ページは最高レベルの忠実度であり、最も具体的であるため、通常、プロセスのほとんどの人がほとんどの時間を費やし、ほとんどのレビューが中心になっている場所です。
ページステージは、デザインシステムの有効性をテストする場所であるため、不可欠です。すべてをコンテキストで表示すると、ループバックして分子、生物、テンプレートを変更し、デザインの実際のコンテキストにより適切に対応できます。
(出典：https://bradfrost.com/blog/post/atomic-web-design/#atoms)
参考