コンポーネント設計とは
コンポーネントとは、部品という意味です。
開発では、特定の機能を持つプログラム部品のことを指します。
そしてコンポーネント設計とは、ソフトウェアやシステムを再利用可能な部品に分割し、それらを組み合わせて構築する設計手法です。
単体のコンポーネントで特定の機能を持つため、単体だと完成しないのですが、組み合わせることで意味を成します。
コンポーネント設計のメリット・デメリット
メリット
-
再利用性
一度コンポーネントを作成すれば他の機能でも同様のコンポーネントを使用できるため、複数の画面で使いまわすことができる -
影響範囲が狭い
修正や機能追加などを部品単位で行えるため、影響範囲を特定できる -
UIの一貫性
デザインや操作性などを統一できるため、認識のずれが起きづらい -
テストのしやすさ
コンポーネント単位でテストできるため、細かいバグなどを見つけやすい
デメリット
コンポーネント設計をする際は以下の点に気を付ける必要があります。
-
分割のし過ぎによる複雑化
コンポーネントを細かくしすぎると管理が難しくなる -
依存関係
コンポーネント間の結合が強いと、修正時に影響範囲が広がる -
設計スキル依存
複数人で開発する際、粒度を合わせてコンポーネント設計する必要があり、粒度が合わないと管理しづらくなる
実際に使用する際の具体例
ログイン機能があるものを作成するとします。
今回は、Atomic Design の考え方で作成する具体例を挙げます。
- Atom
- ユーザー名入力欄
- パスワード入力欄
- ログインボタン
- Molecule
- 「ユーザー名入力欄 + パスワード入力欄 + ログインボタン」を合わせたフォーム
- Organism
- Moleculeのフォームにテキストやパスワードを忘れた場合などのリンクを合わせた一個の塊
- Template
- Organismで作成した塊にヘッダーやフッターなどを追加
- Page
- Templateで作成したものにテキストの追加など行う