2018年12月11日 に投稿

すぐできる！VueとjQueryパッケージを連携させる方法

こんにちは！
九保すこひです（フリーランスのITコンサルタント、エンジニア）

さてさて、最近JavaScript業界では特にReact, Angular, Vueの３大フレームワークの登場でコーディングの基本構造が根本から変わってしまった感があります。

やはりこれらのフレームワークが人気となったのは、それまでJavaScriptでメインとされてきたｊQueryなかった、「実行ルールを決める」というコーディング形式が開発者に受け入れられたのだと考えています。

ただ、そうはいっても元々jQeuryも素晴らしいフレームワークであることは間違いなく、その結果ウェブ上には数え切れないほどのｊQueryプラグインが存在していることも事実です。そのため、無理に新しいフレームワークを使うよりｊQueryプラグインを利用するほうが開発効率が上がるケースもあったりします。

そこで！

今回は、私がメインで開発に使っているVueとｊQuery（プラグイン）を連携させる方法を紹介することにしました。

ぜひ開発の参考にしてみてくださいね。

※ 実行環境： Vue 2.5

やりたいこと（連携パッケージ）

今回Vueとの連携させるのは次の５つのjQueryパッケージです。
もしかすると、みなさんも過去に使ったことがあるのではないでしょうか。

  • Select2
  • datePicker
  • timePicker
  • dataTable
  • iCheck

そして、Vueとの連携はv-jquery-collaborationという名前のVueディレクティブを作成することで実装します。ディレクティブの中身はそれぞれのパッケージ名を指定します。

<select v-jquery-collaboration="'select2'">
</select>

なお、各パッケージは好みによってオプション設定ができるようになっていますので、次のように配列指定でオプションも設定できるようにします。

<select v-jquery-collaboration="['select2', options]">
</select>

また、やはりVueのメリットのひとつデータ・バインディングが使えるべきなのでv-modelも併用できるようにしましょう。

<select v-model="value" v-jquery-collaboration="['select2', options]">
</select>

では実際に開発していきましょう！

Vueの基本形とディレクティブ用のファイルを作成する

まずv-jquery-collaborationディレクティブ用のJSファイルを作り、パッケージ名とオプション値を取得できるようにします。

Vue.directive('jquery-collaboration', {
    inserted: function(el, binding) {

        var value = binding.value;
        var package = (typeof value === 'string') ? value : value[0];
        var options = (typeof value === 'string') ? {} : value[1];

        // ここで各種ｊQueryパッケージと連携

    }
});

そして、v-jquery-collaboration.jsとともにjQeury、Vueをcdnで読み込みます。

<html>
<head></head>
<body>
    <div id="app">

        <!-- ここにVueを含んだコード -->

    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
    <script src="/js/vue/directives/v-jquery-collaboration/v-jquery-collaboration.js"></script>
    <script>

        new Vue({
            el: '#app'
        })

    </script>
</body>
</html>

では次から各パッケージとの連携をみていきましょう！

ｊQueryパッケージとVueを連携させる

select2

まずは検索機能がついたセレクトボックスを使うことができるようになるselect2です。

CSSとJSはcdnで公開されているのでそれらを読み込みます。

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

そして、v-jquery-collaboration.js内はこうなります。

Vue.directive('jquery-collaboration', {
    inserted: function(el, binding) {

        // 省略

        if(package === 'select2') {

            $(el).select2(options).on('select2:select', function() {

                el.dispatchEvent(new Event('change'));

            })

        }

    }
});

ここで重要なのが、select2がv-modelと連携するためにchangeイベントを手動で送出している部分です。

そして、select2:selectイベントを使っているのは、ここをchangeイベントにしてしまうとchangeの無限ループになってしまうからです。

これで、次のようにすると自動的にselect2が使えるようになります。

<select v-jquery-collaboration="'select2'"> ... </select>

<select v-jquery-collaboration="['select2', options]"> ... </select>

<select v-model="select2Value" v-jquery-collaboration="['select2', options]"> ... </select>

datepicker

こちらもjQueryのプラグインとしては有名な、カレンダーから日付を入力することができるdatepickerです。

まずは、本体（jQuery UI）の読み込みます。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

そして、v-jquery-collaboration.jsです。

Vue.directive('jquery-collaboration', {
    inserted: function(el, binding) {

        // 省略

        if(package === 'datepicker') {

            $(el).datepicker(options).on('change', function() {

                el.dispatchEvent(new Event('input'));

            });

        }

    }
});

今回はchangeイベントでinputイベントを送出することでv-modelとの連携を実現しています。

使い方はこうなります。

<input type="text" v-jquery-collaboration="'datepicker'">

<input type="text" v-jquery-collaboration="['datepicker', options]">

<input type="text" v-model="datepickerValue" v-jquery-collaboration="['datepicker', options]">

timepicker

選択するだけで時間の入力ができるようになるtimerpickerプラグインです。

まずは本体の読み込みです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker@1.11.14/jquery.timepicker.min.css">

<script src="https://cdn.jsdelivr.net/npm/timepicker@1.11.14/jquery.timepicker.min.js"></script>

そして、v-jquery-collaboration.jsです。

Vue.directive('jquery-collaboration', {
    inserted: function(el, binding) {

        // 省略

        if(package === 'timepicker') {

            $(el).timepicker(options).on('change', function() {

                el.dispatchEvent(new Event('input'));

            });

        }

    }
});

datepickerと同じくinputイベントを送出することでv-modelと同期させています。

そして使い方です。

<input type="text" v-jquery-collaboration="'timepicker'">

<input type="text" v-jquery-collaboration="['timepicker', options]">

<input type="text" v-model="timepickerValue" v-jquery-collaboration="['timepicker', options]">

dataTable

検索やソート機能など通常のテーブルをより進化させたコンテンツにすることができるdataTableです。

まずはcdnから本体の読み込みです。

<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

続いてv-jquery-collaboration.jsです。

Vue.directive('jquery-collaboration', {
    inserted: function(el, binding) {

        // 省略

        if(package === 'datatable') {

            $(el).DataTable(options);

        }

    }
});

dataTableはv-modelと連携することはないのでイベントの送出は必要ありません。

そして使い方です。

<table v-jquery-collaboration="'datatable'">
    <thead>
        <tr><td>カラム</td></tr>
    </thead>
    <tbody>
        <tr v-for="i in 25"><td v-text="i"></td></tr>
    </tbody>
</table>

<table v-jquery-collaboration="['datatable', options]">
    <thead>
        <tr><td>カラム</td></tr>
    </thead>
    <tbody>
        <tr v-for="i in 25"><td v-text="i"></td></tr>
    </tbody>
</table>

テーブルのデータがv-forによって作成されていることに注目してください。
このようにVueでレンダリングしたものでもdataTableを利用することができます。

また、dataTableは<thead>と<tbody>を用意しないとエラーが発生しますので注意してください。

iCheck

最後に、通常のラジオボタンやチェックボックスをオシャレに装飾することができるiCheckです。

まずはcdnの読み込みです。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/minimal/_all.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>

そして、v-jquery-collaboration.jsです。

Vue.directive('jquery-collaboration', {
    inserted: function(el, binding) {

        // 省略

        if(package === 'icheck') {

            $(el).iCheck(options).on('ifChanged', function(){

                el.dispatchEvent(new Event('change'));

            });

        }

    }
});

今回はラジオボタンとチェックボックスなので送出するのはchangeイベントにしています。

※ なお、iCheckはクラス名をオプションで指定しないと表示されないので以下のようにして必ずオプションを指定してください。

new Vue({
    el: '#app',
    data: {

        // 省略

        icheckOptions: {
            checkboxClass: 'icheckbox_minimal',
            radioClass: 'iradio_minimal'
        }
    }
})

では使い方です。

ラジオボタンの使い方

<label v-for="i in 10">
    <input name="radio_1" type="radio" :value="i" v-jquery-collaboration="['icheck', options]"> {{ i }}
</label>

<label v-for="i in 10">
    <input name="radio_2" type="radio" :value="i" v-model="iCheckRadioValue" v-jquery-collaboration="['icheck', options]"> {{ i }}
</label>

チェックボックス

<label v-for="i in 10">
    <input name="checkbox_1" type="checkbox" :value="i" v-jquery-collaboration="['icheck', icheckOptions]"> {{ i }}
</label>

<label v-for="i in 10">
    <input name="checkbox_2" type="checkbox" :value="i" v-model="iCheckCheckboxValue" v-jquery-collaboration="['icheck', icheckOptions]"> {{ i }}
</label>

デモを用意しました

デモページを用意しましたので実際に体験してみてください。

ソースコードをダウンロード

今回実際に開発したソースコードを以下からダウンロードすることができます。すべてcdnを使っているので展開してすぐ体験することができますよ！

VueとjQueryパッケージを連携させるソースコード一式

npmでパッケージを公開しました

以下のコマンドでインストールできます。

npm i v-jquery-collaboration --save

※ IEはサポート外です。

お問い合わせ、お待ちしております。
開発のご依頼はこちら: お問い合わせ
どうぞよろしくお願いいたします！ by 九保すこひ

おわりに

ということで、今回は全盛期は過ぎたとはいえ、まだまだ大きな影響力をもっているｊQueryと、現在上り調子と言われているVue.jsを連携して使う方法を紹介しました。

現在は、bootstrapをvueだけで実行するVueStrapというプロジェクトができていたりと、今後はｊQueryの存在感は薄れていく方向にあるのかもしれませんが、ｊQueryとの連携もできるという事実をしっておくと、新しくVueやReactなどの新フレームワークを試しやすいのではないでしょうか。

ぜひみなさんも新しいJSフレームワークを使って開発効率を上げてくださいね。

ではでは〜！

このエントリーをはてなブックマークに追加       follow us in feedly  

あわせて読みたい！