HTMLファイルをモジュール化・コンポーネント化する方法を教えていただきたいです。

Question

HTML + CSS + jQueryでwebサイトを制作しています。
CSSはgulp、jsはwebpackでまとめることができるのは調べたことで分かったのですが、HTMLファイルも同じく分割して作成して、何かしらでまとめることは可能なのでしょうか。

• Header.html
• SideBar.html
• Footer.html

みたいな感じで、Webフレームワークで言うところのコンポーネントごとに開発したいと考えています。

ググったところ、「モジュール化を意識した設計をしよう」みたいな趣旨の記事は見つけられたのですが、具体的にファイルを切り分けて開発する方法については見つけられませんでした。

Answer 1

WEB標準の世界において、HTMLファイルを分けるのは、諦めた方がいいと思います。

残念ながら、HTMLの領域だけでそれらを解決する流れは上手くいっていません。

Google Chrome 73 で廃止

この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。
HTML インポート - Web Components | MDN

Web Components は JavaScript で書かれるので、ES の import を使えばモジュール化できると思いますが、それをやるぐらいなら React や Vue などのフレームワークを使った方がいいでしょう。