More than 3 years have passed since last update.

コンポーネント指向とは

Posted at 2020-12-24

概要

普段からマークアップ側で意識しているコンポーネント指向のイメージを
テキストで残しておこうと思い書きました。

そもそもコンポーネント指向とは、
webサイトにおける機能毎だったり、パーツ毎に作成し
それらを組み合わせて使うという考え方です。

実際にサンプルのサイトをイメージしながらやるとわかりやすいかもしれないです。

いらすとやで拾ってきたやつです↓

このサイトをコンポーネント指向で組んでいくと
大きく分けて

こうすることで仮にこのサイトをトップページだと仮定して
記事詳細ページなどでサイドバーが必要だったり、ポップアップが必要だったりした場合に
サイドバー、ポップアップを使いまわせるようになります。

また、どこまで細かくするかという話もありますが、
このサイトを例にすると

サイドバーと記事の見出しは同じ見た目になりそうなので
見出しを1つ作っておけばそれをサイドバーと記事の見出しに使えるし、
記事一覧のカードだけを作れば記事一覧、ポップアップでも記事のカードを使えるようになります。

こうすることで
同じアイテムのはずなのにトップページと○○ページでデザインが違っていたり、
細かいところで余白が若干違ったりという問題が起きてしまいます。
また、パーツを使い回すことで修正漏れなども減らすことができるので開発がしやすくなるかと思います。

最近ではreactやvueでもコンポーネント指向が取り入れられているので
意識してみるといいかもしれません。