コンポーネント（Component）

コンポーネント（Component）とは、特定の役割をひとまとまりにした、再利用できる部品のことです。ソフトウェアでもハードウェアでも使われ、「組み合わせて全体を作る」という考え方を表しています。

現実世界に例えると、コンポーネントは規格のそろったブロックのようなものです。一つひとつは単純ですが、組み合わせ方しだいで何でも作れます。壊れたら、その一つだけを取り替えれば済みます。

使われる分野

なぜ部品に分けるのか

理由は三つに集約されます。同じものを何度も書かずに済む、直す場所が一か所にまとまる、担当を分けて並行して作れる。規模が大きくなるほど、この三つの効き目が積み上がっていきます。

画面の部品としての使い方

いま最もよく使われる意味です。ボタンや入力欄を部品として定義しておき、必要な場所に置いて使い回します。デザインを変えたいときは、その部品の定義を直せば、使われているすべての場所へ反映されます。

入れ子にできる

組み合わせ方に特徴があります。小さな部品を組み合わせて中くらいの部品を作り、それをさらに組み合わせて画面全体を作ります。木の枝のように広がる構造になり、どこにどの部品があるかが見通しやすくなります。

外から値を渡して使い分ける

再利用の要がここです。同じ部品でも、外から渡す値を変えることで、表示する文字や色を変えられます。似た見た目のものを別々に作らずに済み、部品の数そのものを抑えられます。

状態を持たせるかどうか

設計で最初に迷うのがここです。渡された値を表示するだけの部品と、開いているか閉じているかといった状態を自分で覚えている部品があります。前者のほうが単純で使い回しやすいため、状態はなるべく上位の部品にまとめ、末端は表示に徹させるのが定石です。

部品の一覧を作る

規模が大きくなると欠かせない取り組みです。どんな部品があり、どう使うのかを一覧できるページを用意しておくと、同じものを別々に作ってしまう無駄を防げます。デザイナーと開発者の共通の土台にもなり、見た目の統一にも役立ちます。

モジュールとの違い

近い言葉があります。モジュールは「機能のまとまり」を広く指し、コンポーネントは「組み合わせて使うことを前提にした部品」を指すという違いがあります。ただし現場では、あまり厳密に区別されずに使われています。

分けすぎると散らかる

設計上の落とし穴です。細かく分けすぎると、どこに何があるか分からなくなり、かえって手間が増えます。二度以上使われるか、単体で意味が成り立つか。この二つを目安に、切り分ける粒度を決めるのが現実的です。

あわせて知っておきたい用語

• モジュール：
  機能ごとに分けたプログラムのまとまりです。
• React：
  画面を部品の組み合わせで作るための仕組みです。
• フレームワーク：
  アプリの土台となる、ひな型のような仕組みです。
• ライブラリ：
  よく使う機能をまとめた部品集です。