これまでに公表されたVue.js 3.0に関する情報をざっと眺めてみた

Yohei Noda
Dec 19, 2018 · 11 min read

(この記事は2018年12月時点の情報を元に書かれています。)

この記事は、PLAID Advent Calendar 19日目の記事です。

9/20–21に開かれたVue London以降、9/30のEvan氏によるブログポストや弊社プレイドもスポンサー協賛させていただいたVue Fes Japan 2018を含むイベントなどで、Vue.jsの時期バージョン(3.x)に関する様々な情報が発表されてきました。

既に各情報を見られた方にとっては今更な記事にはなりますが、現状把握と今後のためにざっと眺めてまとめてみました。

公表されている主な情報

公開されている主要な情報をリストアップしてみました。

Vue Londonと9/30のブログでEvan氏がVue.jsのプランを発表しています。その後のVue Fes Japan 2018VueConf Trontoでは、v3.0の最新のステータスについて、おそらくほぼ同様の内容が話されたものと思われます。(私はVue Fesの当日はスタッフとして動いていたのもあって、事後にサマリーは見たのですが、Vue Fes Japanのkeynoteの動画をじっくり見るのはしばらく後になってしまいました。)

主な変更点

主な変更点は、ざっくりと書くと以下になります。

  • コードベースはスクラッチでTypeScriptに置き換えられる

Vue.js 3.0の利点

Vue Fesで言及されていた3.0へのアップグレードで我々が受ける恩恵は主に以下の5点のようです。

  1. 高速になる

それぞれ詳しく見ていきます。

1. 高速になる

  • VirtualDOMの実装をフルスクラッチでTypeScriptで作り直して、mountとpatch処理が最大100%向上
高速化とbundle size削減 (参考: https://docs.google.com/presentation/d/1pbNnBhkc-CwfzSw4sW9Ai7A7uAxLuNwOd4Gd5PMjrSQ/edit#slide=id.g4599c02ffb_5_18 )

2. バンドルサイズが小さくなる

  • バンドルサイズが半減(gzipで10kb以下)

3. メンテナンスしやすくなる

  • 内部アーキテクチャを変更。内部関数には一部breaking changeがある。現在はobserverの中にscheduler(主にcomponentの読み込みの順番の制御などをしているコード)が入っているが、分離して別のpackageにして、monorepoに。
2.x のvueのcoreディレクトリ。observerのフォルダ中にscheduler.jsが。 https://github.com/vuejs/vue/tree/dev/src/core
v3.0のpackagesディレクトリ内の構成。observerやschedulerなどがそれぞれruntimeとは別packageにしてmonorepoに。
  • runtime-coreとruntime-domが別れていて、前者はJSが動けば動く。後者はブラウザを対象としている。分離されていることによりテストがしやすい。

4. ネイティブ向けに作りやすくなる

  • カスタムレンダラAPIを提供。このAPIはブラウザではなくPure JavaScriptで動くので、モバイルアプリケーション上でレンダリングができる。

5. コードの保守性が高まる

  • リアクティビティAPI
observerを使ってstate管理
コンポーネント上ではShared stateをこのように使える
  • あまり大規模な開発でなければVuexなどでstoreパターンを使って管理しなくてもいいかも

いつリリースされるのか?

気になるのが、v3.0はいつリリースされるのか、ですが…

In all honesty, we don’t know when this will happen yet, but likely in 2019.

ということで、基本的にはまだ初期のフェーズなので未定。2019年には出るんじゃないか…というところ。アップグレードするだけでも大きな恩恵を受けられそうなので、楽しみです。

今後の流れ

以下のステップで進める、としています。現在はstep1。

  1. runtimeのプロトタイプに対するFeedback期間

RFCプロセスとリリースに関して

半年ほど前に、RFCプロセスとリリースのサイクルに関して、roadmapのreadmeが更新されました。これについては3.xそのものとは別の話題になりますが、3.0を含む今後のリリースのサイクルを把握する上で重要な点なので確認しておきます。

リリーススケジュールについて

  • メジャーバージョンはリリースの6ヶ月前にはアナウンスされる。Breaking changeはRFCプロセスを通す。alpha→beta→RC(Release Candidate)というステージを経てリリースされる。

LTS(Long Time Support)について

  • メジャーバージョンがリリースされた時に、前のメジャーバージョンの最後のマイナーバージョンがLTS対象となる。

自分たちの開発に対するインパクト

上でも触れた通り、大きなbreaking changesはなさそうなので、基本的には3.0が公開されたらそのままupgradeして入念にテストをすれば良さそうに見えます。また、しばらくは安心して2.xでの開発を続けられそうです。しかし、3.0の導入は、アーキテクチャの変更を考えるきっかけにはなるかもしれません。自分がいるチームでは、(Vuexを使わずに)独自にstoreを用意して状態管理を行なっています。3.xでは”observable”を使ってshared stateの管理機能を使えるため、すごくシンプルな箇所においてはstateの管理にそれを使うことを想定しておくのも良いかな、と思いました。また、TypeScriptを使うことで得られる恩恵もありそうなので、それも考慮の対象なのかな、という気もします。

今後情報が出てきそうな場所

Vueの公式ブログやリポジトリ上でupdateされるはずですが、今後開かれる大きめのイベントでさらに詳細な情報が公開されるかもしれません。楽しみですね。

2.xまでの内容について

Vue.js 2.xまでの内容については、公式のドキュメントをご覧ください。実践的な開発に関しては、私も共著で一部担当させていただいた「Vue.js入門 基礎から実践アプリケーション開発まで」を手に取っていただけますと幸いです。

参考

Yohei Noda’s Blog

Engineering, services, gadget and books..

Yohei Noda’s Blog

Engineering, services, gadget and books..

Yohei Noda

Written by

Engineer at Plaid, Inc@Tokyo, Japan. Ex-IBM software engineer. #Vue.js #Node.js #NLP (Natural Language Processing) #machinelearning #Vue.js入門 #i18n

Yohei Noda’s Blog

Engineering, services, gadget and books..