九保すこひ@フリーランスエンジニア|累計300万PVのブログ運営中
さてさて、最近JavaScript業界では特にReact, Angular, Vueの3大フレームワークの登場でコーディングの基本構造が根本から変わってしまった感があります。
やはりこれらのフレームワークが人気となったのは、それまでJavaScriptでメインとされてきたjQueryなかった、「実行ルールを決める」というコーディング形式が開発者に受け入れられたのだと考えています。
ただ、そうはいっても元々jQeuryも素晴らしいフレームワークであることは間違いなく、その結果ウェブ上には数え切れないほどのjQueryプラグインが存在していることも事実です。そのため、無理に新しいフレームワークを使うよりjQueryプラグインを利用するほうが開発効率が上がるケースもあったりします。
そこで!
今回は、私がメインで開発に使っているVueとjQuery(プラグイン)を連携させる方法を紹介することにしました。
ぜひ開発の参考にしてみてくださいね。
※ 実行環境: Vue 2.5
目次
やりたいこと(連携パッケージ)
今回Vueとの連携させるのは次の5つの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]; // ここで各種jQueryパッケージと連携 } });
そして、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>
では次から各パッケージとの連携をみていきましょう!
jQueryパッケージと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
を使っているので展開してすぐ体験することができますよ!
npmでパッケージを公開しました
以下のコマンドでインストールできます。
npm i v-jquery-collaboration --save
※ IEはサポート外です。
おわりに
ということで、今回は全盛期は過ぎたとはいえ、まだまだ大きな影響力をもっているjQueryと、現在上り調子と言われているVue.jsを連携して使う方法を紹介しました。
現在は、bootstrapをvueだけで実行するVueStrapというプロジェクトができていたりと、今後はjQueryの存在感は薄れていく方向にあるのかもしれませんが、jQueryとの連携もできるという事実をしっておくと、新しくVueやReactなどの新フレームワークを試しやすいのではないでしょうか。
ぜひみなさんも新しいJSフレームワークを使って開発効率を上げてくださいね。
ではでは〜!