ha6_6ruブログ

主にフロントエンドの技術ネタを中心にしていく予定です。

Vue3の始め方

はじめに

Vue.js 3.0リリースに併せて、Vue.jsをハンズオン形式で学習する書籍を出版しました。 書籍では、Vue3への移行情報や新機能の中心になっているComposition APIを解説しています。 書籍の宣伝を兼ねて、2020年10月時点のVue3の取り組み方について解説します。 多大に宣伝を含みますが、ご了承ください。
最初に結論を。しばらくは公式ライブラリとUIコンポーネントライブラリの対応状況をウォッチし、Vue3の本格的な採用は様子見することを個人的におススメします。

Vue3の新機能

https://v3.vuejs.org/guide/migration/introduction.html#notable-new-features

Vue3の新機能をいくつか取り上げて紹介します。

Composition API

https://v3.vuejs.org/guide/composition-api-introduction.html

新しく導入されたコンポーネントの記述スタイルです。 次のプラグインを使うことで、Vue2でも一部の機能を除いて利用可能です。

書籍ではComposition APIを中心に解説しています。 Vue3と言えばComposition API、という感じでネット上にも情報が溢れていますのでここでは紹介を割愛します。

Teleport

https://v3.vuejs.org/guide/teleport.html#teleport

teleportタグで囲まれたコンテンツを、toで指定した場所に描画させることができる機能です。 公式ドキュメントのサンプルは次のとおりです。記述方法を確認してみてください。

template: `
  <button @click="modalOpen = true">
    Open full screen modal! (With teleport!)
  </button>

  <teleport to="body">
    <div v-if="modalOpen" class="modal">
      <div>
        I'm a teleported modal! 
        (My parent is "body")
        <button @click="modalOpen = false">
          Close
        </button>
      </div>
    </div>
  </teleport>
`,
template: `
  <h2>This is a parent component</h2>
  <teleport to="#endofbody">
    <child-component name="John" />
  </teleport>
`

Fragments

https://v3.vuejs.org/guide/migration/fragments.html

公式ドキュメントのサンプルを見ればわかると思いますが、templateタグ直下に複数のタグを並べることができるようになりました。

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

Breaking Changes

https://v3.vuejs.org/guide/migration/introduction.html#breaking-changes

Vue3のBreaking Changesをいくつか取り上げて紹介します。

Global API

インスタンスの生成やグローバルコンポーネントの登録など、グローバルAPIがインスタンスAPIに変更されています。 また、Vue.nextTickは次のようにインポートして使うなど、APIの見直しが行われています。

import { nextTick } from 'vue'

v-modelの変更

:valueが:modelValueに、@inputが@update:modelValueに変更されました。 v-bindディレクティブの.sync修飾子が廃止され、v-modelを使う形になります。 また、次の公式ドキュメントのサンプルのように、複数のv-modelを設定できるようになりました。

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

フィルターの廃止

メソッドで代用が効くため、Vue3で廃止されました。

$listenersの廃止

Vue3では、イベントリスナーは$attrsにマージされたため、$listenersはVue3で廃止されました。

.native修飾子の廃止

v-onディレクティブの.native修飾子が廃止されました。

Events API

$on、$off、$onceが廃止されました。

実験的な機能

次の機能が試験的に実装されています。

ライブラリの対応状況

https://github.com/vuejs/vue-next

Vue RouterがRCになりましたが、Vuexやその他周辺ライブラリはβの状態です。

UIコンポーネントライブラリの対応状況

UIコンポーネントライブラリのVue3対応は、もうしばらく待つことになりそうです。Vue3への移行は、実質UIコンポーネントライブラリの対応待ちになるでしょうね。 メジャーなライブラリのVue3への対応が言及されているIssueを示しておきます。

クラススタイルにどう向き合うか

主流はComposition APIを使った記述スタイルになっていくことが予想されますが、サーバーサイドエンジニアに馴染みの深い、オブジェクト指向言語に似た記述スタイルを捨てがたい人も居るのではないでしょうか。 Vue.jsの公式リポジトリ内では、Vue3へのクラススタイルの導入は一旦見送られていますが、クラススタイルをサポートするライブラリはそうとも限りません。次のモジュールを使っている場合は、ライブラリの対応をウォッチしておくのが良さそうです。

  • vue-property-decorator
  • vuex-module-decorators

Vue3への対応について言及しているIssueはこちらです。

まとめ

公式ライブラリやUIコンポーネントライブラリなどの対応状況をウォッチしながら、Vue3の学習をしつつ準備を進めるのが良さそうです。
既存のアプリケーションを移行するにもそれなりの作業量が予想されるため、少しずつ準備を進めましょう。プラグイン@vue/composition-apiを使った段階的な移行を検討するのもよいかもしれません。

書籍の紹介


書籍の情報サイト

紹介

人気のJavaScriptフレームワークVue.jsにフォーカスし、フロントエンド開発の基礎から本格的なSPAの開発まで、ハンズオン形式で一歩ずつ、無理なく着実にステップアップしていきます。 さらに、2020年リリース予定のVue.js 3.0をいち早くキャッチアップ。Vue CLI 4に対応しつつ、Vue.js 2.xとの差分として新しい記述スタイル（Composition API）を併記するなど、バージョン移行を強力に支援します。

基本情報