まずはそのまま.vueファイル化

まずはプロジェクトを作り、既存のHTMLファイルを取り込みます。この説明では次の想定で進めます。

• プロジェクトはvue-cliで作成

• 対象バージョンはVue.js 3で、クラス形式のコンポーネントではない関数ベースのコンポーネントを利用

• ルーターを利用

jQueryと比較した場合の、Vue.jsの大きく違うポイントは次の通りです。

• Vueは特定のノード以下のみをプログラムで変更可能にする

• 1つのHTMLを元にページ切り替えを実現できる（シングルページアプリケーション）

元のjQueryでシングルページアプリケーションを実現しているケースはほとんどないと思うので、いったん、元のプロジェクトは複数ページから構成されているものとして話を進めます。

まず、複数のページであっても、1つのHTMLとTypeScriptコードで実現します。今まで共通のヘッダーなどを個別に実装していた場合はベースのHTML側に書いておけば共通で利用されます。複数のページで違いの発生する部分のみを.vueファイルにします。

まずはjQueryをライブラリに追加します。

$ npm install jquery @types/jquery

次に、.vueファイルを作成します。これはHTML、CSS、スクリプトが1ファイルにまとまった、シングルファイルコンポーネントと呼ばれるものです。<template>にHTMLを書き、<scriptlang="ts">にはTypeScriptのコードを書きます。

DOM読み込み後に呼ばれるイベントハンドラでjQueryのイベント定義などを行っていました。jQueryの読み込み後のハンドラーは次のどちらかを設定していました。

• $(document).ready(function(){})

• $(function(){})

Vue.jsでは、ページごとにコンポーネントと呼ばれるオブジェクトを作成します。それが作成されるタイミングでsetup()メソッドが呼ばれますが、その中でonMounted()関数に登録したコードが実行時に呼ばれます。まずはそこにjQueryのコードを移植してしまいましょう。完成形は次の通りです。

<template><div>jQuery test page</div><buttonclass="pushbutton">button</button><divclass="panel"style="display: none; background-color: lightblue;">    hidden</div></template><stylescoped>.clickedButton{background-color:"yellow";}</style><scriptlang="ts">import$from"jquery";import{defineComponent,onMounted}from"vue";exportdefaultdefineComponent({name:"MyPage",setup(){onMounted(()=>{$(".pushbutton").click(()=>{$(".pushbutton").css("background-color","yellow");$(".panel").fadeIn();});});}});</script>

なお、このonMountedは作成時に一度だけ呼ばれます。その後、属性の変更などがあると、タグの再作成プロセスが走ります。差分のみの更新のはずですが、元の変更によってはイベントハンドラをつけたタグが再作成されたりすることもあり、イベントハンドラがなくなる可能性がもあります。このやり方はあくまでも移行のための暫定なので、本番環境にデプロイなどをしてはいけません。

ページを作ったら、そのファイルが表示可能になるように、ルーターに登録します。そのページのURLと、その時に使われるコンポーネントのペアを関連づけるものです。これで表示できるようになりました。

import{createRouter,createWebHistory,RouteRecordRaw}from"vue-router";importMyPagefrom"../views/mypage.vue";constroutes:Array<RouteRecordRaw>=[{path:"/",name:"MyPage",component:MyPage},];constrouter=createRouter({history:createWebHistory(process.env.BASE_URL),routes});exportdefaultrouter;

まずはここまでで動作することを確認しましょう。

クリックイベントの定義

Vueの作法でクリックイベントを設定しましょう。jQueryはHTMLの外でタグとイベントの関連付けを$.click()を使って行っていました。Vue.jsの場合は、テンプレートの中で関数を設定します。呼び出す関数はsetupの中で作成します。テンプレートでclickedという名前で呼びたい場合には次のように作成します。

import{defineComponent}from"vue";exportdefaultdefineComponent({name:"MyPage",setup(){// イベントハンドラを作成constclicked=()=>{$(".pushbutton").css("background-color","yellow");$(".panel").fadeIn();}// テンプレートで使う要素はsetupのレスポンスのオブジェクトとして返すreturn{clicked}}});

HTMLは次のようになります。素のHTMLのイベントハンドラの方に近くなります。ここまで動作することを確認しましょう。

<button class="pushbutton" @click="clicked">button</button>

jQueryとの大きな違いとしては、変更対象のHTMLタグの発見方法があります。jQueryはすでにあるHTMLのタグの中から変更対象を見つける必要があります。そのため、セレクターという機能に磨きをかけて、変更対象をすばやく確実に見つける機能を備えました。一方のVue.jsは、生成時に差し込みます。そのため、タグを探してくる「セレクター」という概念がありません。

クリックによるインタラクションをVue.js化

Vueでは一元管理されたデータを元にビューを更新するとすでに説明しました。その本丸に攻め入ります。その状態管理で利用するのがreactive関数です。引数にオブジェクトを渡すと、それがコンポーネントのデータ源として利用できます。これもテンプレートから利用するため、setup()の返り値で返します。

今回のサンプルは小さいので問題ありませんが、実用的なコンポーネントの場合、このreactive()の各要素にコメントを書いておいても良いでしょう。

clicked()の中は、単にこの状態を更新するだけになりました。

import{defineComponent,reactive}from"vue";exportdefaultdefineComponent({name:"jQuery",setup(){conststate=reactive({show:false// パネルの表示制御に使う});constclicked=()=>{state.show=true;};return{clicked,state};}});

テンプレート側はつぎのようになりました。この状態をみて、ボタンの方はクラスのON/OFFの切り替えを行い、パネルの方はCSSのスタイルの内容の変更を行っています。

:classは、オリジナルのVueのルールではv-bind:classでしたが、省略記法として:classも提供されています。実は、@clickもv-on:clickの省略形になります。

<button  @click="clicked"  :class="{ clickedButton: state.show }">  button</button><div class="panel" :style="{visibility: state.show ? 'visible' : 'hidden', backgroundColor: 'lightblue'}">  hidden</div>

単に表示のON/OFFを切り替えるだけであれば、v-ifやv-showといったディレクティブもあります1。

1

https://v1-jp.vuejs.org/guide/conditional.html

フェードイン効果を実現する

クリックしたタイミングでスタイルシートや表示のON/OFFの切り替え方法は学びました。本節のラストとして、フェードインを実現します。

jQueryのフェードインはふわっと表示させるときに利用します。デフォルト値は0.4秒での表示になります。また、透明度の変化のカーブの選択もできます。このあたりの複雑なパラメータの時間変化は、最新のCSSを使えば造作もありません。まずはフェードインのCSSクラスです。opacityとvisibilityが非表示状態で開始します。その後、クリックで追加のクラス設定があると最終的には完全表示になりますが、その途中経過で0.4秒かけて表示するためのtransitionが含まれています。

.hiddenPanel{opacity:0;visibility:hidden;}.hiddenPanel.fadeIn{opacity:1;visibility:visible;transition:opacity0.4s,visibility0.4s;}

すでに実装されているロジックで問題ありません。残る修正箇所はテンプレートのみです。

<divclass="panel":class="{hiddenPanel: true, fadeIn: state.show }":style="{ backgroundColor: 'lightblue' }">  hidden</div>

これで、クリックされた瞬間にfadeInクラスが付与されるようになりました。このCSSクラスは0.4秒かけて切り替えると実装されているため、jQueryのfadeIn同等の処理が実現できました。

Vue.jsの方が行数が長くなる？

jQueryの移植の基本について説明してきました。イベントのハンドリングとスタイルの切り替えはこれで問題がなくなったでしょう。

これらの処理はjQueryがもっとも得意とするものであり、Vue.jsの方がかなり行数が増えてしまっています。ここだけみるとVue.jsのメリットが少なく感じます。

しかし、Ajax的なロジックの実装を開始しはじめると複雑度は逆転します。サーバー通信して、取得してきたJSONを元にリストを表示するようなケースでは、jQueryの場合はプログラムの中でHTMLのDOM要素を作って挿入という処理になります。適切なHTML片を作って挿入するのは大変ですし、雑に実装するとXSSというセキュリティの穴があく恐れもでてくるため、jQueryでもmustacheやunderscore.jsのtemplate、handlebarsといったテンプレートエンジンの導入を検討し始めるところです。ロジックと表示の元データと表示のテンプレートが分離しにくいといった問題も出てきますし、コードの行数も爆発し始めます。表示以外に、編集や削除をしたいといった要件が出てきたらもうお手上げでしょう。

Vue.jsの場合はスクリプトはデータの保持のみになりますし、テンプレートによる結果のレンダリングは最初から行っていますので、複雑度は変わりません。v-forディレクティブでリストの表示も簡単です。

それ以外にjQueryの方が短く、コードが長くなってしまうケースとしては、jQueryプラグインを活用している場合があります。jQueryにはjQuery UIも含めた高度なコンポーネントの部品が数多くあります。これらはとても便利ですが、やはりデータと表示の分離がしにくく、うまくレールに乗っかれるような最速のパターンでは短かったとしても、例えばカレンダー部品で取得した情報を元にバリデーションを行って結果を画面に反映させたり、インタラクションが増えてくると周辺のコードが複雑化しがちです。

まだVue.js 3には対応していませんが、bootstrap-vueという人気のあるBootstrapをVue.js用にコンポーネント化したものもあります。複雑なフィルタリング機能などを実現するテーブルコンポーネントもcheetahgridなどのよりよい代替部品がすぐに見つかるでしょう。自分でコンポーネントを実装しなければならない場合を除けば、そこまで行数も変わらず実現できるでしょう。