CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 「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)
図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」ディレクティブによる双方向データバインディングが利用できるようになります。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

連載:JavaScriptフレームワーク「Vue 3」の新機能紹介
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5