Vue.jsのCDNを利用して、PHPを使わずにファイルのコンポーネント化してみた。

複数ページにまたがるサイトの場合、
ヘッダーやフッターなどのコンポーネント化（同じパーツを共通化）したいなーと思うときがあります。

そのときに、PHPだとinclude("ファイル名")でファイルを別に出来ますが、
PHPが使えない方法だと、ちょっと面倒です。

今回は、PHPが使えない場合、Javascriptだけでコンポーネント化する方法があります。

jQueryのajaxを使う方法

ajaxはAPI取得などの外部ファイルの読み込みに使うイメージが強いと思いますが、実は同じサーバー内のHTMLファイルを読み込むことも可能です。
javascriptとして

index.html

function header(){
    $.ajax({
        url: "header.html",
        cache: false,
        success: function(html){
            document.write(html);
        }
    });
}

を記載し、HTML部分には

index.html

<script>header();</script>

を記載すると、共通化できるそうです。
ただ、設置の階層によってパスが変わることはないので、
CSSなどを相対パスにしている場合は別途調整が必要そうです。

参考

個人的にはVue.jsを使う方法がおすすめ！

ヘッダーとフッターのみでしたらjQueryのやり方でも支障ありませんが、
いっぱいあると管理が大変になりますよね。
その時におすすめなのが、Vue.jsを使う方法です！

Vue.jsでコンポーネントを扱うにはVue CLIを使う方法が一般的ですが、
設定したりする負担を考えると、気軽に作りにくくなりますよね...
その時に使うのが「http-vue-loader」です。

CDNを読み込ませる

まずは、VueのCDNとhttp-vue-loaderのCDNを設置します。

index.html

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>

Javascriptを設定する

CDNを設置したら、Javascriptを書きます。

index.html

    new Vue({
        el: '#app',
        components: {
            'component-name': httpVueLoader('component.vue'),
        },
    })

'component-name'→ コンポーネントを設置するのに指定するタグ名
httpVueLoader('component.vue')→component.vueを読み込む
といった意味になります。

複数設置する場合は、

    components: {
        'component-name': httpVueLoader('component.vue'),
        'component-name2': httpVueLoader('component2.vue')
    },

といった感じで、カンマでつなげて設定します。

HTMLを設定する

先程書いたVueに従って書いていきます。
IDにappを指定し、指定したコンポーネント名(component-name)をタグとして設置します。

index.html

<main id="app">
    <component-name></component-name>
    ...
</main>

コンポーネント化として別にしたファイルは、<template>というタグを作成し、その中でパーツを作成します。
ちなみに、<template>タグの直下に複数設置は出来ないようなので、1つに囲うか別コンポーネントにする必要がありそうです。

component.vue

<template>
   <タグ>
        ...
   </タグ>
</template>

jQueryと一緒に使いたい場合

jQueryのプラグインなどを使いたいときもあるかと思います。
Vue.jsはjQueryと一緒に使えますが、記載する場所がとても大事です。

Vueにはライフサイクルという概念がありまして、実行したいタイミングにより、書く場所が変わってきます。

例えば、

Vue.jsでHTMLを一通り作成 → jQueryで動きを指定する

という流れで利用したい場合、Vue.jsの下に記載しても動いてくれません。
その場合はupdated:function(){...}の中に記載することで動いてくれます。

new Vue({
    el: '#app',
    components: {
        'component-name': httpVueLoader('component.vue'),
    },
    updated: function() {
        $('#abc').addClass('.efg');
    }
})

慣れるまでは大変ですが、逆に慣れてしまえばどのタイミングにどのようなスクリプトが動くのかが分かりやすいので、jQuery単体よりも見やすいと思います