「Nuxt.js」の基本、「Vue.js」の利用方法を知ろう

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第2回

v-onディレクティブによるイベント処理

　Vue.jsのイベント処理は、v-onディレクティブを利用して「v-on:<イベント名>」形式で記述します。v-onディレクティブの利用方法を、ボタンのクリックとキー入力のイベントハンドラーを実装した図4のサンプルで説明します。

図4：v-onディレクティブのサンプル（p004-v-on）

　v-onディレクティブには、イベントハンドラーのメソッド名を設定します。リスト8では、クリックイベントに対応する「v-on:click」に、イベントハンドラーのgreetメソッドを設定しています。

［リスト8］v-onディレクティブの記述（p004-v-on/pages/index.vue）

<button v-on:click="greet">ご挨拶</button>

　イベントハンドラーに与える引数を含めてv-onディレクティブに設定することもできます。特に、JavaScriptのイベント変数が必要な場合は、引数に「$event」を設定します。リスト9では、キーが押下後に離された時のイベント「v-on:keyup」のイベントハンドラーで、押下されたキーの文字列をイベント変数から取得して画面に表示します。処理の詳細はサンプルコードを参照してください。

［リスト9］イベント変数を利用する場合の記述（p004-v-on/pages/index.vue）

<input v-on:keyup="onKeyUp($event)">

［補足］イベント修飾子とキー修飾子

　v-onディレクティブには、イベント処理の内容を補足する「イベント修飾子」を追加できます。フォームのサブミットボタンにクリックイベントを設定したリスト10の例では、v-on:clickに「.prevent」というイベント識別子を追加して、デフォルトの動作（＝フォームのSubmit）をキャンセルしています（イベント変数のpreventDefaultメソッドと同じ効果です）。

［リスト10］イベント修飾子の記述（p004a-v-on-modifier/pages/index.vue）

<form>
  <input type="submit" v-on:click.prevent="onFormSubmit" value="Submitボタン">
</form>

　また、v-onディレクティブに「キー修飾子」を追加して、特定のキーに対するイベントを設定できます。リスト11では、v-on:keyupに「.enter」というキー修飾子を追加して、Enter（改行）キーが押下された場合のみkeyupイベントが発生するようにしています。

［リスト11］キー修飾子の記述（p004a-v-on-modifier/pages/index.vue）

<input v-on:keyup.enter="onKeyUpEnter">

　イベント修飾子やキー修飾子の詳細は、イベントに関する公式ドキュメントを参照してください。

［補足］v-bindとv-onの省略記法

　v-bindとv-onでは省略記法を利用できます。省略記法では、「v-bind:href」を「:href」、「v-on:click」を「@click」と記述します。

条件分岐と繰り返し

　Vue.jsでは、「v-if」ディレクティブで条件分岐、「v-for」ディレクティブで繰り返しを利用できます。以下で利用方法を説明していきます。

v-ifディレクティブによる条件分岐

　v-ifディレクティブの利用方法を、図5のサンプルで説明します。ラジオボタンの選択で、表示される文言の内容が変わります。

図5：v-ifディレクティブのサンプル（p005-v-if）

　図5のサンプルにおけるv-ifディレクティブの記述を、リスト12に示します。

［リスト12］v-ifディレクティブの記述（p005-v-if/pages/index.vue）

<div v-if="radioValue === 'ios'"> <!--（1）-->
  あなたはiOSが好きなんですね。
</div>
<div v-else-if="radioValue === 'android'"> <!--（2）-->
  あなたはAndroidが好きなんですね。
</div>
<div v-else> <!--（3）-->
  その他が好きとはマニアックですね。
</div>

　（1）のv-ifディレクティブで、ラジオボタンの選択値が格納されるradioValueが「ios」の場合に表示される内容を記述します。v-ifディレクティブの直後に、（2）のv-else-ifディレクティブや、（3）のv-elseディレクティブを記述すると、複数条件の分岐を記述できます。

v-forディレクティブによる繰り返し

　v-forディレクティブの利用方法を、図6のサンプルで説明します。配列に格納されたスマートフォンの情報を一覧表示します。

図6：v-forディレクティブのサンプル（p006-v-for）

　スマートフォンの情報を格納するphoneList配列は、<script>でリスト13の通り記述して、id、vendor、modelのプロパティを含むJavaScriptオブジェクトの配列を設定します。

［リスト13］phoneList配列の設定（p006-v-for/pages/index.vue）

phoneList: [
  { id: 1, vendor: 'Apple', model: 'iPhone XS' },
  { id: 2, vendor: 'Apple', model: 'iPhone XS Max' },
（略）
]

　phoneList配列の内容を一覧表示するv-forディレクティブの記述は、リスト14の通りです。

［リスト14］v-forディレクティブの記述（p006-v-for/pages/index.vue）

<ul>
  <li v-for="phone in phoneList" v-bind:key="phone.id"> <!--（1）-->
    {{ phone.vendor }}: {{ phone.model }} <!--（2）-->
  </li>
</ul>

　（1）でv-forディレクティブに「phone in phoneList」と設定すると、phoneList配列の各要素をphone変数として取得できるので、（2）の通り{{ }}記述でphone変数のプロパティを指定して画面表示できます。

　なお、リスト14（1）の「v-bind:key」は、リストの各データを一意に表すキーとなるデータ項目を設定する記述です。Vue.jsはv-bind:keyに設定された項目で各データを一意識別して、配列の更新時に、更新された箇所だけを再描画します。

まとめ

　本記事では、JavaScriptフレームワークNuxt.jsがUIの構築に利用するVue.jsについて、基本的な利用方法を説明しました。データバインディングやイベント処理、条件分岐や繰り返しの機能を利用して、動的なWebページをVue.jsの機能で作成できます。

　次回は、Webページ遷移を実現する、Nuxt.jsのルーティング機能を説明します。

参考資料

• Nuxt.js
• Vue.js