最近はサーバーがApacheで無いことも多く、また開発環境においてもXAMPPやMAMPなどを使わず、Node.jsや他の簡易サーバーを使うことも多くなり、そのままではSSIが動かないケースが多くなりました。 SSIを代替させる方法はいくつかありますが、フロントエンドのみで解決するならば Vue.js のCDN版が適当だと思います。 Vue.js はSPA（Vue-CLIやVue-Roterなどを使って）として開発されるケースの解説が多く、CDN版はあまり目立ちませんが、jQueryと同じようにページに読み込んで使うことができます。単純にコードが読みやすくなりますし、SPAでなくとも使うメリットは多くあります。 今回は別ファイルのヘッダーやフッターを読み込んで表示する、SSIのインクルード命令のような機能を、Vueのコンポーネントという機能で実現してみます。 # コンポーネント・ファイルをつくる まずヘッダー（./my-header.vue）とフッター（./my-footer.vue）のコンポーネント・ファイルをつくります。 **./my-header.vue** Vue.component('my-header',{ template: `

ここはヘッダーです LINK1 LINK2

` } }) **./my-footer.vue** Vue.component('my-footer', { // -- template template:`` }); 「`（バッククオート）」で囲まれたHTMLがテンプレートとして表示されることになります。テンプレートのなかのHTMLは、１つのタグで囲まれていなければならないことに注意してください。今回のサンプルはそれぞれ「＜header＞＜/header＞」と「＜footer＞＜/footer＞」に囲まれたテンプレートです。 当然この中でVueの記述も使えるので、Vueのフィルターという機能を使って階層が変わっても正しくリンクされるようにしていきます。 ＜a :href="'「/」で始まるドキュメントからのパス' | convPath"＞ ※「`（バッククオート）」によるヒアドキュメントはES6（新しいJavaScript）なので、IE11では使えません。対応する場合は[Babel](https://babeljs.io/)でコンバートするか、バッククオートを以下のように変えて対応してください。 template: (function(){/* ～HTML～ */}).toString().match(/(?:/*(?:[sS]*?)*/)/).pop().replace(/^/*/, "").replace(/*/$/, ""), # 必要なファイルを読み込む 親ファイルとなるHTMLファイル（仮に「**親.html**」とします）にCDNのVue.js を読み込みます。ここではバージョン2を使っています。 現在エラーが出力される開発用を使っているので、公開時には「公開用」にすることをお忘れなく。 **親.html** ＜script src="//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"＞＜/script＞ ＜!--公開用 ＜script src="//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"＞＜/script＞ --＞ その後にコンポーネント・ファイルを読み込みます。 ＜script src="./my-footer.vue"＞＜/script＞ また、リンクの変換に使う変数「**zpath**」を定義しておきます。zpath には対象ページからドキュメントルートまでの相対パスを設定してください。ドキュメントルートに置かれたファイルならば zpath の値は**「.」**、ひとつ下の階層ならば**「..」**、**「../..」**、**「../..」**となります。 var zpath = '.'; # 親のVueとグローバル・フィルター **親.html**の＜body＞最後に、コンポーネントを制御する「親のVue」をつくります。 また、リンクを相対パスに変換するフィルター「**convPath**」を、コンポーネントからでも参照できる「グローバル・フィルター」をつくります。 // グローバル・フィルター Vue.filter('convPath', function(link){ if (link) return zpath + link; }); // 親のVue var app = new Vue({ el: '#app', }); # カスタムタグ これで設定は終了です。以下のカスタムタグを**親.html**の #app 内に記述することによって、コンポーネントのテンプレートが反映されるはずです。 # 最後に これを試した方は、このVueのコンポーネントという機能がSSIの代替としてでなく、他の様々な応用が可能だということに気付いていると思います。複数のUI部品を使い回すこと、またファイルを分けて作業できることは、コードの整理やチーム作業などにとても有利なはずです。