Vue 3から始める、Vue.js | 第1回 Vue 3はどう変わったか

Vue 3から始める、Vue.js 第1回 Vue 3はどう変わったか

2020年9月にバージョンアップしたVue 3を複数回にわたって取り上げます。第1回目はVue 3の概要を紹介します。

カテゴリー: JavaScript; Vue.js

2020年12月24日発行

はじめに

本シリーズでは2020年9月にリリースされたVue 3をベースに、Vue.jsの基本的な使い方を解説します。内容としてはVue 3に特化したものではなく、Vue 3以前からある機能も網羅して、はじめてVue.jsに触れる場合でも理解できるように解説していきます。

第1回目はVue 3の概要やVue 2との違いを解説しますので、これからVue.jsに触れる人には若干難しい概念も含まれるかもしれません。これからシリーズを読み進めてもらうと、だんたんクリアになってくると思いますので、今は、あまり気にせず読んでください。

初出記事より改定

本記事は2020年12月に公開されましたが、その後のVueのドキュメント状況などにより、一部改訂しました。（2021年8月）

Vue.jsの歴史

Vue.jsは元グーグル社員のEvan You（エヴァン・ユー）氏により作られたJavaScriptのフレームワークです。2013年に個人プロジェクトとして開発が開始され、2014年2月にバージョン0.8が公式リリースされた後、2回のメジャーリリースを経て2020年9月に待望のVue 3が4年ぶりにリリースされました。

2015年10月 v1.0 Evangelion（エヴァンゲリオン）
2016年10月 v2.0 Ghost in the Shell（攻殻機動隊）
2020年09月 v3.0 One Piece（ワンピース）

Vue 2のリリース時は、当時Reactで使われていた技術として話題だった仮想DOMを採用し、以降、React、Angulerに並ぶフレームワークとして支持され続け、今回のリリースに至りました。

Vue.jsの人気はいまだ衰えることはなく、GitHubでの評価を示すスター数も、2020/12/11時点でVue.js（177k）、React（160k）、Anguler（68.6k）と、他の2つのフレームワークを抑えGitHub全体でも3位になっています。

Vue.jsのコードネーム

作者のエヴァン氏はマンガ好きで知られており、バージョンアップ時に付けられるコードネームはマンガのタイトルで、リリース順に合わせてアルファベット順で並ぶように命名されています。

0.9 Animatrix（THE ANIMATRIX）
0.10 Blade Runner（ブレードランナー）
0.11 Cowboy Bebop（カウボーイビバップ）
0.12 Dragon Ball（ドラゴンボール）
1.0 Evangelion（エヴァンゲリオン）
2.0 Ghost in the Shell（攻殻機動隊）
2.1 Hunter X Hunter（Hunter x Hunter）
2.2 Initial D（頭文字D）
2.3 JoJo's Bizarre Adventure（ジョジョの奇妙な冒険）
2.4 Kill la Kill（キルラキル）
2.5 Level E（レベルE）
2.6 Macross（マクロス）
3.0 One Piece（ワンピース）

Vue 3のコードネームに採用されているアニメの画像

リリースノートには採用したマンガの画像が貼られます。

CodeGridとVue.js

CodeGridでは、これまでも多くのVue.js関連の記事を扱ってきました。古いものから順にリストにしましたので、気になるものがあれば見てみてください。

それでは、Vue.jsのコンセプトと特徴をおさらいし、Vue 3でどうなったかを順にみていきましょう。

プログレッシブフレームワーク

公式サイトには「Vue.jsはユーザーインターフェースを構築するためのプログレッシブフレームワーク」であると述べられています。プログレッシブフレームワークとは作者のエヴァン氏が提唱する概念です。

プログレッシブ（Progressive）には段階的という意味がありますが、Vue.jsにおいては、段階的に発生するアプリケーションの要求変化に対し、Vue.jsのサポートツールを導入していくことで、これら課題を解決できるという意味を持ちます。

たとえば、次のリンク先にリストされている公式・サードパーティのライブラリやツールを組み合わせることで、Vue.jsはユーザーインターフェースの構築に限定せず、より高機能なアプリケーションの開発を支援してくれるようになります。

これはつまり、最初は小さく始め、アプリケーションの成長段階に応じたツールの導入で不必要な学習コストを抑えつつ、さまざまな規模の開発にも対応できるということを意味します。

Vue.jsのコア機能に対し、サポートライブラリやツールを重ねることで、より高度な機能や開発体験を実現できることを表している。

手軽に導入できるフレームワーク

Vue.jsと同類のフレームワークとして、React、Angular、また、昨今では海外で人気のSvelteがあります。

出典：State of JS

それぞれ、Reactは「View層に特化し周辺ライブラリも充実している」、Angularは「フルスタックフレームワークのため周辺ライブラリの選定コストが小さい」、Svelteは「仮想DOMを使わずランタイムライブラリが小さい」といった特徴や利点があります。また、前節で述べた「小さく始めて、徐々にライブラリやツールで高機能化に対応していく」という開発はReactなら可能です。

しかし、「小さく手軽に」という点においてはVue.jsが秀でています。というのも、上記フレームワークは利用前提としてNode.jsのエコシステムによるビルド処理が必要*になり、フレームワークによっては一般的に使われるJavaScriptの構文としては馴染みのない記述を必要とするものもあります。

*注：ビルド処理が必要

厳密にはReactでは、JSXを使わなければビルド処理は不要ですが、可読性の低下と実装時に高難度な脳内変換を要する点から、現実的な選択肢としてはないでしょう。

一方、Vue.jsの場合はHTML、JavaScript、CSSの基礎知識があれば、<script>タグでVue.jsのファイルを読み込むだけで使え、利用者を選ばない初心者にも優しいフレームワークになっています。

また、充実した公式ドキュメントが日本語化されている点、活発な日本人コミュニティの存在もうれしいポイントです。

プログレッシブフレームワークの思想に則った開発スタイルで、少しずつビルドシステムをはじめとしたモダンなフロントエンドの開発手法を学ぶきっかけとして、Vue.jsを使ってみるのもよいでしょう。

AngularJSから生まれたVue.js

ビルドを要せず<script>タグのみで利用できるという点は、Angularの前身であるAngularJSでも可能でした。もともとVue.jsは「AngularJSから不要な技術要素を削ぎ、本当に必要な最小限の機能セットで複製したところから始まった」と、次のインタビューで語られています。

Between the Wires: An interview with Vue.js creator Evan You

Vue 3の改善点

以前からVue.jsを利用されている方にとっては、今回のVue 3のリリースで行われた改善、新機能、従来のコードとの互換性、IEの対応といったところが気になるポイントではないでしょうか。これらについても見ていきましょう。

まず、Vue.js自体の実装を見直すことで、次の点が改善されました。

軽量化

これまで、v2.6で20KBであった本体の容量が半分の10KBに軽量化されています。また、実装をESモジュールベースにすることで、バンドル時にツリーシェイキングが効くようになり、不要なコードが含まれないようになりました。

処理速度の向上

仮想DOMによる描画ロジックの見直しにより、従来抱えていたボトルネックが克服され、描画処理のベンチマークが大幅に改善されました。Vue 3では、Vue 2におけるCPU時間の10分の1未満しかかからない場合もあります。

CPU時間とは、DOM操作を除くJavaScript計算の実行に費やされた時間のことです。Vue 2とVue 3のブラウザ別の処理速度の比較結果がまとめられています。

Vue 3 vs. Vue 2 Perf comparison

保守性の向上とTypeScriptの強化

実装をいちからTypeScriptベースで書き直し、コードの管理を機能別にmonorepo化することで、従来の実装が抱えていたコードの暗黙的結合という技術的負債が解消されました。これにより、コントリビュータには長期的な保守性の維持、Vue.jsの利用者には、TypeScript利用時の型推論のサポート強化、TSXの対応という改善がなされました。

Vue 3の新機能

公式ガイドでは注目の新機能として、次の機能を挙げています。

Composition API
Teleport
Fragments
Emits Component Option

また、リリースノートでは、<Suspense>コンポーネントがVue 3に実装されていることにも触れています。リリース時点ではドキュメント化されていませんでしたが、その後ドキュメントにもまとめられました。

この中でも特に注目されているのがComposition APIです。このAPIはReact Hooksのように、ロジックを合成関数（composition function）としてカプセル化することを可能にするAPIです。このAPIを導入した場合は、従来からある、アプリケーションインスタンス生成時に、data、computed、methodsといった宣言をオプションパラメータとして指定する書き方とは大きく変わることになります。

従来から用いられてきたAPIをComposition APIとの対比で、Options APIといったりします。

記述方法の違い

// Options API
const app = new Vue({
  data() {
    return {name: 'taro', greet: 'hello'};
  },
  computed: {
    message() {
      return `${this.greet}, ${this.name}`; // hello, taro
    }
  }
  methods: { ... },
  ...
});

// Composition API
const app = Vue.createApp({
  setup() {
    const data = Vue.reactive({name: 'taro', greet: 'hello'});
    const message = Vue.computed(() => {
      return `${data.greet}, ${data.name}`; // hello, taro
    });
    return {
      message,
      ...
    }
  }
});

ただ、このAPIの存在はOptions APIを代替えしたり非推奨とするものではありません。Composition APIは、大規模アプリケーションにおけるVueの問題点に対処することを目的に作られたAPIのため、プロジェクトの方針や規模、用途に応じてOptions APIと使い分けることが可能です。

Vue 3の公式ガイドでも、リリース当初はComposition APIについては「高度な使い方」という章になるまで登場しませんでした（現在は「再利用と構成」という章にあります）。Compositon APIが使えるようになったといっても、基本的な部分は変わっていませんので、従来どおりの書き方もできます。

Composition API | 再利用と構成 | Vue.js

Vue 3の破壊的変更

既存のVue 2で作られたプロジェクトの移行を考えると、Vue 3により生じた破壊的変更も気なるところでしょう。次の公式ガイドに記載された破壊的変更のリストを見ると、36項目あることがわかります。

Breaking Changes - Introduction | Vue.js

一見、破壊的変更が多そうですが、あまり利用しない機能も多く、影響の大きな変更は限られている印象です。筆者としてはまず次の項目が気になりました。

グローバルなVue APIはアプリケーションインスタンスを使用するよう変更
destroyedライフサイクルオプションがunmountedに変更
コンポーネントでのv-modelの使用法が変更

これらの変更以外についてもシリーズ中で触れる予定ですが、ここでは特に重要な「グローバルなVue APIはアプリケーションインスタンスを使用するよう変更」について見てみましょう。これまでVue 2ではアプリケーションのインスタンスを生成するにはnew Vue()と記述していましたが、Vue 3ではグローバルAPIであるcreateApp()を使うことになります。

// アプリケーションインスタンスの生成
const app = Vue.createApp({
  data() {
    return {...}
  },
  methods: {...},
  computed: {...}
  ...
});

// id が my-app の要素にマウントする
app.mount('#my-app')

さらにHTML要素に対するマウントを、アプリケーションインスタンスの持つmount()メソッドで行っていることがわかります。

バージョンアップを考える上で、この変更はVue 2で作られたすべてのアプリケーションに影響があることはもちろんですが、これに伴い、グローバルコンポーネントの登録や、サポートライブラリのインストールもアプリケーションインスタンスに対して行うことになります。

// 例えばVue 2向けのVue Routerではライブラリ側の実装で、
// 次のようにVue.useグローバルAPIを使ってインストールしていました。
var inBrowser = typeof window !== 'undefined'
/* … */
if (inBrowser && window.Vue) {
  window.Vue.use(VueRouter)
}

// Vue 3ではVue.useグローバルAPIは使用できなくなるため、
// 次のように利用者側での明示的な指定が必要になります。
const app = createApp({ ... })
app.use(VueRouter)

そのため、サポートライブラリを利用している既存プロジェクトをVue 3に移行する場合は、ライブラリ側のVue 3の対応が完了している必要があります。

Vue 3のIE対応

ブラウザについてはVue 3はIEに対応していません。

しかし、Vue 3と互換性のある改善が取り込まれた、v2.x系最後のリリースであるv2.7が計画されており、これによりIE11でも利用可能になります。v2.7ではその後のVue 3への移行を支援するために、Vue 3で削除・変更されたAPIが利用された場合、警告が表示されるようになります。

Vue 3のリリースノートには、2021年第1四半期にv2.7に取り組む予定であると記されています。

Vue.jsのサポートライブラリとVue 3の対応状況

Vue.jsのサポートライブラリやツールについても、Vue 3対応状況と合わせてみてみましょう。代表的な公式ライブラリ・ツールとしては次のものがあります。

Vuex

Vuexは、ユーザーインターフェースで直接、あるいは間接的に扱う状態データを集中管理する仕組みを提供します。データの参照・更新をVuexの提供するAPIを介してのみ利用できるように制限することで、データフローに統制をかけ保守しやすいコードを維持できるようにします。

Vue 3をサポートしたVuexのv4.0がリリースされています。

公式サイト：Vuex とは何か？ | Vuex

【補足】TypeScript向けの改善

TypeScriptユーザーに不評であったVuexの型推論の改善は、このバージョンではされておらず、v5.x系での対応が予定されています。

Vue Router

Vue Routerは、SPAアプリケーションの特徴的な機能ともいえるURLパターンに応じて、フロント側の制御で表示内容を切り替えるルーティング機能を、Vue.jsで扱えるようにします。

Vue 3をサポートしたv4.0がリリースされています。

公式サイト：Vue Router

Vue CLI

ここまで述べてきたとおり、Vue.jsでは本節で紹介しているようなサポートライブラリを導入していくことで、より高機能な要求に対する実装を支援してくれます。しかし、ライブラリの導入やアプリケーションの規模拡張には、ビルドツールの設定方法の習得や、ディレクトリ構成をはじめとした構造設計の検討が必要になります。

Vue CLIは、コマンドライン（もしくはGUI）で対話的に条件を選択していくことで、Vueを中核に据えたプロジェクトに最適化された構成で、設定なしで即使える雛形を生成してくれます。

Vue 3のプリセットを選択できるv4.5がリリースされています。