コンポーネント指向とは

2 min read読了の目安(約2600字

はじめに

こんにちは。高校2年の樅山です。
2020/11 から始まった、ものづくりをする高校生のための新しい団体、Palettteが主催する Palettte Advent Calendar 2020 の1日目の記事となります。

免責事項

中間テスト期間中に必死になって書いたので、もし事実に合わない点があればご指摘いただければ幸いです。

コンポーネント指向とは

そもそもコンポーネントとは何でしょうか。
素直に「構成要素」「部品」などと訳せますが、プログラムを行う上で扱うコンポーネントとは、ソフトウェアコンポーネントのことを指します。
ソフトウェアコンポーネントは単なる部品や構成要素のことではなく、何をしたいのかによって巨大なプログラムを分割[1]したもののことです。

例えば、簡易なToDoリストを開発する際にも、入力フォームは新規ToDoの作成にも、既存ToDoの編集にも利用しますが、「ユーザーからToDoデータを受け取る」という目的だけに絞って入力フォームを作成して使いまわせば、新規ToDo作成用の入力フォームと既存ToDo編集用の入力フォームをそれぞれ用意する必要はなくなります。
それに加えて、もし入力フォームに修正が必要になった場合でも、予め共通の入力フォームであれば、修正コストも低くなるでしょう。
ここで、ユーザーからデータを受け付けるという目的で分割されたプログラム(関数?クラス?何で分割するかは場合によります)は ソフトウェアコンポーネント であると言えます。

このようにコンポーネントを作成し、プログラムの再利用性を高め、変更にも柔軟に対応できる仕組みを コンポーネント指向 と呼びます。

最近はWebのフロントエンド開発でコンポーネント指向という言葉をよく聞くようになり、コンポーネント指向は最新の設計技法だと勘違いしてしまうかもしれません。
しかし、コンポーネント指向は1970年代ごろに提唱された概念です。その後、1990年ごろからソフトウェア工学の設計分野の一つ Component-based software engineering (CBSE)として扱われています。

再利用性

コンポーネントはその性質上、再利用性が高いというメリットがあります。
先ほどの簡単な例のように、同じ機能やUIによって分割したコンポーネントは、複数のケースに使い回すことができます。

また、コンポーネントはインターフェースを経由して、他のコンポーネントと相互に通信することができます。
完全に利用場面が一致しているようなコンポーネントでは再利用するにも使い辛くなってしまいますが、例えばあるユーザーデータをプロフィール画面を表示するコンポーネントに渡せば、様々なユーザーのプロフィール画面を表示することができます。

ここで、インターフェースを経由するのは、通信するコンポーネントが自分の内部実装について深く知る必要をなくすためです。
他のコンポーネントと通信する際に、内部実装について干渉される可能性があるということは、コンポーネント同士の依存が深くなってしまい、コンポーネントが独立しない危険があります。
ここでのメリットは 再利用性 でしたが、コンポーネントの依存が深いことによって再利用性を低めてしまうことは本末転倒です。
そこで、コンポーネントが外部と通信する情報のみを扱ったインターフェースを経由することで、再利用性を保つことができるのです。

宣言的UIライブラリであるVue.jsを例に、具体的に説明します。
インターフェースを介さないというのはつまり、

this.$parent

で親コンポーネントのデータに直接アクセスして干渉するのと同等です。
しかし、これはコンポーネント同士の依存を深めます。コンポーネントAが、親コンポーネントA-Pを前提に実装を書いた場合、別のコンポーネントBはコンポーネントAを用いることはできなくなります。

そこで、propsemitを用いて、データをやりとりします。これがインターフェイスを介した通信です。
こうすることで、任意のコンポーネントが任意のコンポーネントを扱えるようになります。

Atomic Design

最後に、Atomic Design という設計方法について紹介します。
Atomic Designとは、Webサイトの全体的なUIが統合された状態に管理するためには、UIやプログラムを体系的に管理するデザインシステムを運用することが必要だという思想のもと誕生しました。

WebフロントエンドのView層で用いられることが多い手法で、コンポーネントを、Atoms、Molecules、Organisms、Templates、Pagesという5種類に分類して扱います。

Atomsは原子のように[2]最小単位で、これ以上分けられないような最小限のコンポーネントを扱います。
Moleculesは「分子」のことで、Atomsをいくつか組み合わせることによって作れる意味を持つコンポーネントを扱います。
Organismsは「生体」のことで、AtomsやMoleculesを組み合わせることによって作れる、機能を持つコンポーネントを扱います。
Templatesは名前通りテンプレートで、Organismsを嵌め込んでいくことで様々な機能を持つコンポーネントを扱います。
Pagesは「ページ」のこと[3]で、最終的に完成するWebページを扱います。

コンポーネント指向はすでに強力な考え方ですが、より効率よくUIを扱うためにいろいろな設計技法が誕生しています。

終わりに

コンポーネント指向はとても面白くワクワクする手法です。
ぜひ、普段の開発にも取り入れてみると良いかもしれません。

脚注
  1. 何をしたいかによってプログラムを分割することを 関心の分離 と呼びます。 ↩︎

  2. ここでは、クォークに分割できるだろう、といった野暮な議論は扱いません。人間には原子も小さすぎます。 ↩︎

  3. 文書作成ソフトではない ↩︎