概要

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

コンポーネント指向とは

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

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

サンプルのサイト

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

どう分割するか

このサイトをコンポーネント指向で組んでいくと
大きく分けて
- header
- サイドバー
- 記事一覧
- ポップアップ
という感じになるかと思います。

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

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

• header
• サイドバー
  • サイドバーの見出し
• 記事一覧
  • 記事のカード
• ポップアップ
  • 記事のカード

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

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

まとめ

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