コンポーネントとは

ここで言うコンポーネントは、サイトやアプリケーションを制作する上での考え方と、その周辺の技術のことを指します。

再生可能な部品（コンポーネント）を作り、組み立てて、構築していくことです。
見た目だけでなく機能も含めて、再利用可能な部品にする必要があります。

コンポーネント制作で利用するいくつかの技術

思いつくものは、下記になります。

BEM

CSSの命名規則です。
部品単位で命名していくので、コンポーネント指向と言って良いでしょう。

Webコンポーネント（Web Components）

ブラウザにネイティブで実装されている技術のひとつです。
それぞれブラウザの実装に差があり、そのままでは使いにくいのが現状です。

React、Angular、Vueなど

シングルページアプリケーションを作るときに選択されるライブラリです。
これらモダンなjsを利用すると、必然的にコンポーネントを作ることになります。

どうやって、コンポーネントを作成するのか

私も明確に答えを持っているわけではないですが、作業を進めてみて、思ったことを書いてみます。
結局、どこまでコンポーネントに含めるか、その判断が難しいです。

最小の部品を考える

まず、最小のコンポーネント（部品）がないと、それより大きいものを作ることができません。
どうやって最小のコンポーネントを作れば良いでしょうか。

似たコードをまとめる

最小の部品に関わらず、当たり前の話かもしれません。
まず、似たコードは、同じコンポーネントにできる可能性が高いです。

適度に機能があるもの

HTML、CSS、JavaScript、それぞれ機能を持ったものを最小にしましょう。
重複したコードであっても、コピペせずにすぐに再現できるのであれば、コンポーネントにしなくても良いです。

全体に関わるものは共通

全体に関わりそうなものは、全体共通にして、個別に管理しないようにします。
似たものをまとめていくと、被ることは多くないですが、そういうものが出たとき、無理にコンポーネント化しないように意識します。

手を動かして、試行錯誤する

これも当たり前の話ですが、完璧に部品分けするのは、難しいです。
巻き戻ってやり直すことも検討します。

レイアウト情報があるコンポーネントは、最小にしない

位置などのレイアウト情報があるものは、最小のコンポーネントの親になる可能性が高いです。
後から変わりようのないコンポーネントでない限り、最初に作るコンポーネントではないです。

メリットとメデリット

制作にかかる時間とその必要性が、それぞれメリットとデメリットになります。

メリット

頻繁に変更や追加などが行われても対応できます。
特に、大規模なコンテンツになると、効果が期待できます。

デメリット

コンポーネントを想定したり、制作するために時間がかかります。
また、更新がないコンテンツでは、効果がありません。

通常のWebサイトでの活かし方

ライブラリなどを使用する場合は、それに従っていくことになると思います。
そうではないとき、どのようにコンポーネント指向を取り入れると良いでしょうか。

テンプレートエンジンを利用する

テンプレートエンジンを利用することで、コンポーネントをイメージした制作ができると思います。

案件の仕様があえば、PHPなどでも構わないです。
静的コンテンツを納品する場合は、npmから選択すると良いでしょう。

複数ページある静的Webサイト制作は、Node.js（gulp + Swig）で生成する！

スタイルガイドを作る

スタイルガイドを作ると、コンポーネントのようなものを構築していくことになるので、イメージしやすいです。

まとめ

コンポーネントを作っていくと、時間がかかる割に、効果を感じないことがあるかもしれません。
しかし、面倒臭がらずにやっていると、後半の作業時間がどんどん短くなる上、修正にも時間がかからなくなります。
頑張りましょう！

それでは、また！