UIコンポーネント考 (1)

タンバリンの安部です。

Web開発やモバイル開発、UI開発を伴う多くの場面で「コンポーネント」という言葉を耳にするようになりました。 特にWebではWeb Componentsという技術もあり、多くの人がコンポーネントに関心を持っているのではないでしょうか。

では、そもそもコンポーネントとはなんでしょう?

再利用性がある?
独立している?
交換可能性がある?

Web分野のユーザインタフェースにおけるコンポーネント(以下、UIコンポーネントとする)はどのような概念として扱われるかを考えていきます。 今回はコンポーネントとは元々どういった概念を扱うのか、似た言葉や似た概念との比較を行います。 次回からはWebにおけるUIコンポーネントの考え方について、CSSやデザインツールの話を交えて考えていこうと思っています。

componentの語源と語義

componentは「構成要素」「部品」「成分」といったような意味があります。
語源としては com - pon - ent で分解され、それぞれ

分解した要素 語義
com 一緒に(類:company, collaborate, etc.)
pon 置く(類:deposit, post, etc.)
ent 人、もの(類:client, pendant, etc.)

となります。「一緒にまとめられたもの」といったニュアンスでしょうか。
詳しいことはこちらを参照してください。

英単語 component の語源と意味 - Gogengo! - 英単語は語源でたのしく

部品、という意味では日本語でも用いる「パーツ(parts)」という言葉があります。
part(s)はcomponentも含む「部品」という意味で、componentはその中でも「独立して動く部品」として分類されます。

オーディオ機器に「コンポ」というような言い方をしているのを聞いたことがあると思います。
これはオーディオステレオシステムの構築で、スピーカーやアンプ、CDプレーヤーなどの部品をそれぞれ購入して構成するコンポーネントステレオシステムの略語で、それぞれの部品は独立して動く製品で、それをいろんなメーカーや機種から選ぶことでシステムを構築する、といったものです。
スピーカーを構成する部品それぞれはオーディオシステムの構築時に独立して動作はしないため、「パーツ」として扱われ、スピーカーは「コンポーネント」として扱うことができます。

ある程度のスケールで構成された部品があるシステム上独立して/自己完結して動作するものがcomponent、というわけです。 日本語のニュアンスだと「構成部品」にはあまり自己完結性は感じられないのが難しいところですね。

componentとpartのニュアンスの違いについてはこちらもご覧ください。

component(コンポーネント)とpart(パーツ)の違い | ネイティブと英語について話したこと

moduleとの違い

module(モジュール)という言葉もよく使われますが、componentと比べてどのような違いがあるのでしょうか。
どちらもざっくりと「ある程度のかたまり」「部品の集まり」のような気がします。

moduleとの大きな違いは、「規格化されている」という部分です。
主には工業分野においてmoduleがそういう意味で扱われはじめたようですが、インターフェースが定められており、規格に沿っていればそのmoduleは交換可能である、というニュアンスがあります。componentはある程度の大きさで独立して扱える構成要素の部品群で、moduleは規格化されて交換可能な部品群であり、両者を満たすものもあれば満たさないものも考えられます。

ステレオコンポーネントシステムでいえば、スピーカーは接続部分のI/Oが同一であれば独立して扱えて規格化されて交換可能となります。これはmoduleでありcomponentです。ただ、独立して扱えないが規格化されている部品群はmoduleではあるがcomponentではないと言えます。
以下の記事が解説としてわかりやすいので合わせてご覧ください。

第29回 モジュール | 10分でわかるカタカナ語(三省堂編修所) | 三省堂 ことばのコラム

まとめ

  • componentはあるシステムにおいて、独立して動作する部品群である
  • partは部品全体を指す
  • moduleは規格化され、交換可能な部品群である

次回からはWebにおけるUIコンポーネントをどう定義するか、コンポーネントとそうでないものの区別の付け方、CSSやデザイン・JavaScriptフレームワークにおいてのコンポーネントの扱われ方などを考えていく予定です。