新Vue.js「Vue 3」で便利に使えるさまざまな新機能を先取りで紹介

JavaScriptフレームワーク「Vue 3」の新機能紹介 第2回

　「Vue 3」は、JavaScriptフレームワークVue.jsの次期バージョンで、2016年にリリースされた「Vue 2」以来のメジャーバージョンアップです。Vue 3で導入される新機能のうち、前回は新しいコンポーネント記述形式「Composition API」を紹介しました。今回は、それ以外の主な新機能を説明していきます。

はじめに

　Vue.jsは、Webページのユーザーインタフェース（UI）を構築できるフレームワークです。2015年のバージョン1（Vue 1）、2016年のバージョン2（Vue 2）に続き、バージョン3（Vue 3）が開発中で、2020年第2四半期にリリース予定です。

　前回記事ではコンポーネントの新しい記述形式「Composition API」を紹介しましたが、他にもさまざまな新機能がVue 3で導入されます。本記事では、それ以外の主な新機能を抜粋して紹介していきます。

対象読者

• Vue 3の概要を把握したい方
• 新しいライブラリーを試してみたい方
• これからVue.jsをプロジェクトに採用する予定の方

必要な環境の準備

　本記事のサンプルコードは、以下の環境で動作を確認しています。

Windows 10 64bit版

• Node.js v10.18.1 64bit版
• Vue.js 3.0.0-beta.15
• Vue CLI 4.4.4
• Microsoft Edge 83.0.478.54

　本記事のサンプルコードは、Vue.jsのCLIツール「Vue CLI」を利用して生成しています。Vue CLIでVue 3対応プロジェクトを生成する方法は、前回記事を参照してください。

　サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「npm run serve」コマンドを実行して、Webブラウザーで「http://localhost:8080/」を開きます。

Composition APIだけではない、Vue 3の新機能

　Vue 3におけるComposition API以外の主要な新機能や変更点を、以下で紹介します。

複数のv-model

　従来、双方向データバインディングを実現するv-modelディレクティブはコンポーネントにつき1つだけ定義できましたが、Vue 3では複数定義できます。その方法を図1のサンプルで説明していきます。このサンプルでは、入力フォームを2個含むコンポーネントに、それぞれv-modelディレクティブで双方向データバインディングを設定していきます。

図1　複数v-modelのサンプル（p001-multi-vmodel）

　コンポーネントを利用する側で複数v-modelを設定するには、リスト1の通り「v-model:<変数名>」形式で記述します。ここではname（機種名）とvendor（メーカー）についてv-modelディレクティブを記述しています。

［リスト1］v-modelディレクティブの複数指定（p001-multi-vmodel/src/App.vue）

<multi-v-model v-model:name="name" v-model:vendor="vendor"/>

　リスト1の<multi-v-model>に対応する複数v-modelコンポーネントは、リスト2の通り実装します。

［リスト2］複数v-modelコンポーネントの実装（p001-multi-vmodel/src/components/MultiVModel.vue）

<template>
  <div class="multi-v-model">
    <div>
      <div>機種名：</div> <!--（1）-->
      <input v-bind:value="name" v-on:input="updateName($event.target.value)">
    </div>
    <div>
      <div>メーカー：</div> <!--（2）-->
      <input v-bind:value="vendor" v-on:input="updateVendor($event.target.value)">
    </div>
  </div>
</template>
<script>
export default {
  // v-modelディレクティブで指定されるプロパティ ...（3）
  props: {
    name: String,
    vendor: String
  },
  // コンポーネント設定処理 ...（4）
  setup(props, context) {
    // name変更時の処理 ...（5）
    function updateName(value) {
      context.emit('update:name', value) // 変更イベントを発生
    }
    // vendor変更時の処理 ...（6）
    function updateVendor(value) {
      context.emit('update:vendor', value) // 変更イベントを発生
    }
    return {
      updateName, updateVendor
    }
  }
}
</script>

　<template>部の機種名（1）とメーカー（2）を入力する<input>タグでは、v-bind:valueディレクティブにプロパティ（name、vendor）を、v-on:inputディレクティブに入力時のイベントハンドラーメソッド（updateName、updateVendor）を、それぞれ記述します。メソッドの引数には、入力値を表す「$event.target.value」を指定します。

　<script>部では、まず（3）のpropsで、コンポーネント外部から指定できるプロパティ（name、vendor）を設定します。次にsetupメソッド（4）の第2引数で、後述するemitメソッドを提供する変数contextを受け取ります。なお、第1引数のpropsは前回記事で説明したプロパティ変数ですが、このサンプルでは利用しません。

　nameやvendorが変更されたときの処理（5）、（6）では、context.emitメソッドでイベントを発生させます。第1引数はイベント名で「update：<プロパティ名>」とします。第2引数は変更後の値です。

　以上の実装により、コンポーネントを利用する側で「v-model:name」「v-model:vendor」ディレクティブによる双方向データバインディングが利用できるようになります。