レポート

Vue.jsの進化を感じるカンファレンス――Vue Fes Japan 2018

この記事を読むのに必要な時間:およそ 4 分

2018年11月3日,Vue.jsに関する初の国内大規模カンファレンス,Vue Fes Japan 2018が開催されました。Vue Fes Japan 2018 実行委員会(Vue.js日本ユーザーグループを中心とし有志スタッフ)の主催によるカンファレンスです。本記事では当日の模様をレポートします。

オープンニングトーク

オープニングトークには,Vue Fes Japan 2018実行委員会代表 川口和也氏が登壇。川口氏はVue.js日本ユーザーグループ代表を務め,Vue.js入門 基礎から実践アプリケーション開発までを執筆するなど国内におけるVue.js普及の中心的な人物です。

オープニングトークの川口氏

オープニングトークの川口氏

Vue Fes Japan 2018に至るまでの経緯,国内でのVue.jsの盛り上がりなどを紹介しました。Vue Fes Japanはユーザーコミュニティ主導のイベントとしてはかなり大規模なものと述べ,開催をサポートしてくれたコミュニティ,スポンサーへの感謝を表明しました。

Evan Youが語るVue 3.0

川口氏からバトンを受け取りEvan You氏がキーノートを始めます。You氏はVue.jsのオーサー(オリジナル開発者)で現在も開発の中心人物です。企業のバックグラウンドを持たずに,個人を中心とした開発スタイルのVue.jsでは多大な尊敬と人気を集めています。

Evan You氏

Evan You氏

キーノートとして,Vue.js London 2018で紹介され,その後も記事発表などで話題の集まるVue 3.0へのアップデートについて語ります。講演ではVue 3.0で何が変わるかをリストアップしました。

  • より速く
  • より小さく
  • よりメンテナンスしやすく
  • よりネイティブターゲット向けに
  • より(ユーザーの)コードの保守性を向上

より速く ―仮想DOMの再実装

仮想DOMを0からフルスクラッチで再実装することで,さらなる高速化を実現します。mountとpatchの処理が最大100%高速化されます。

内部的には変更がありますが,APIにはほぼ変更がないのも特徴です。ライブラリ作者はちょっと手を動かす必要がありますが,基本的には変わらず使い続けられます。

新しい実装では,プロキシ(記者注:JavaScriptのProxy)を用いることで,言語すみずみまで高速に処理できるような実装を採用可能です。ES5では実現できなかったことを実現させます。プロキシのパワーを活かした変更です。

プロパティ(プロパティプロキシ)の高速化は特に重要で,2.0最大のパフォーマンス上の課題を解決しました。

より速く ―実行中のオーバーヘッド対策としてのコンパイル時ヒント

コンパイラにも改善を加えます。コンパイルタイムヒントによって(生成後の)実行時オーバーヘッドを削減します。

(Vue.jsにおける)コンパイル時最適化の基本的な考え方は,可能な限りの情報をテンプレートから取得し,不要な処理を生成コードから減らすというものです。これによってJSエンジンが最適化しやすくなります。ちょっとしたオーバーヘッド対策でも,規模が大きくなるほど効果が出てきます。

たとえば,スロット再生の最適化を行うケースでは,インスタンスの依存関係を正しくトラックし,不要な親子のレンダリングを回避できます。こういうところを意識してコードを手で書こうとすると大変ですが,これをテンプレート書くだけでうまく実現できるようになります。

他にもStatic Tree Hoisting,Static Props Hoisting,Inline Handler Hoistingなどについてテンプレートと生成例を示しました。

これらの最適化をほどこした3.0のプロトタイプでは,コンポーネントインスタンスの初期化が最大100%も高速になります。アプリ全体の速度が2倍に,メモリ使用量が半減しうることを例と共に示します。

これらの最適化によって,⁠互換性維持を意識するため)ユーザーが書くコードは変わらないのに,3.0を使うだけで速くなります。

より小さく

Tree-shakingへの対応を盛り込みます。Tree-shakingとは実行しない(不要な)コードを自動で削除することを意味します。WebpackやRollupによって提供されます。Vue 3.0系では,ES Modulesを採用し,ビルドプロセスでインポート対象を選定して必要なものだけを小さく利用できるにします。

新コアのランタイムサイズはgzipで10KB以下(記者注:Vue 2.5.17では30KB超なので約1/3のサイズ)になるはずです。

よりメンテナンスしやすく

(Vue.js開発者側から見てメンテナンス性を高めるため)アーキテクチャの一層の洗練,パッケージの適切な分離,テストセットアップの改善を目指します。単一のモノリシックなリポジトリ構成だったところから,パッケージ切り出しなどを工夫して分離していきます。

パッケージ全体の切り分けについては,これは開発プロジェクト側から見た話です。Vue.jsを利用する側の開発者がこれらをいちいち選んで使う必要はありません。

よりネイティブ向けに作りやすく

カスタムレンダラAPI。出力先をブラウザ(Vue.js)以外のものに広げようという試みです。

2系のときもNative ScriptやWeexなどネイティブから使えていたが,あまりよくありませんでした。3系では簡潔なAPIをつくることで,よりネイティブから使いやすくします。カスタムレンダラが簡単に使えて,コアランタイム使うだけですむというものを目指します。

よりコードの保守性を向上

コードの保守性を向上するための仕組みも提供します。

リアクティビティAPI。コンポーネント内のデータなどを新しい監視システムがよしなに管理します。より書きやすくなったオブザーバーAPIの進化のようなものです。

コンポーネントの再描画を理解するようになります。レンダートラックスとレンダートリガーなど変更検知力の向上を実現します。

TSX(JSXのTypeScript版)導入など,TypeScriptの強化を企画しています。Vue.jsは,katashin氏などのメンバーが頑張ってくれていますが,まだまだTypeScript(型)の部分で改善の余地があるという状態です。TSXでより型の力を使えるようにしたいです。

実験的な機能

Vue.js 3.0で採用することが決定している機能に加えて実験的なAPI(記者注:いずれもReactに影響されたものと思われる)についての解説もあります。

Hooks(実験的な機能)
HooksはReactで登場したAPIで,Vue.jsでも試験的に使えないか試しています。
mixinsの課題,名前空間の問題などをHooks採用で解決できるのではないかと思い試しています。Dan Abramov氏のHooksの話も興味深いです
You氏はhooksのコンセプト,処理のカプセル化ができている点は興味深いと感じていると紹介しました。
Time Slicing(実験的な機能)
Time Slicingは(非同期処理などを用いてVue.jsの)処理を細切れにすることで,操作のブロックを防ぎます。60fps実現の大きな助けとなるものです。

Vue 3.0を中心に次世代のVue.jsを垣間見ることのできる発表でした。

著者プロフィール

野田大貴(のだだいき)

株式会社技術評論社、雑誌編集部所属。主な業務は書籍の編集。

Twitter:@nodawep

コメント

コメントの記入