本セッションの登壇者
セッション動画
スライド
よろしくお願いします。kazuponといいます。Vue.jsのCore Team Memberをしており、Vue.js日本ユーザーグループの代表をしています。
本題に入る前に少し宣伝させてください。今年Vue Fes Japan Online 2022を開催します。チケットも現在販売中ですので、ぜひみなさんご参加ください。今回はTechFeedさんもスポンサーに入っていただいています。
Reactivity Transformとは
さっそく本題に入っていきます。本日はReactivity Transformについてお話しますが、これはまだ実験的な機能で今後変わる可能性があるので、使う方はちょっと注意して使ってください。
Reactivity Transformは、コンパイラマクロを使ってComposition APIのリアクティブ周りの問題を解決するためのもので、位置付けとしてはComposition APIのDXを改善するために生まれたものです。
提供されるコンパイラマクロは$でプリフィックスされていて、Composition APIのリアクティビティ関連APIに対応するマクロや、リアクティビティ周りの振る舞いを取り扱うためのマクロが用意されています。
これらのマクロは実体をもっておらず、TypeScriptで型として定義されています。技術的には、コンパイラマクロがビルドされて動作するようになっています。実際にはBabelを使って、マクロで書かれたVueのコードのASTレベルで解析して、ビルド時に動くJSコードにトランスフォームしています。
Reactivity Transformが解決する問題
Reactivity Trasnformが具体的にどのような問題を解決するのか、主に3つについて話します。
まず1つ目は、reactiveとrefの取り扱いが難しいという点です。Composition APIではreactiveとrefを使って値をreactiveにすることができます。reactive関数はオブジェクトをreactiveにできますが、numberやstringなどのプリミティブ値は処理できません。こちらのコードのように、オブジェクトをreactiveにできるのですごく便利です。
それに対して、refはプリミティブな値を処理でき、オブジェクトも取り扱うことができます。なので、Composition APIを使うときreactiveとrefの区別が面倒くさいという話がよくあるのですが、refに統一して処理することは可能です。ただし、refを使うと.valueでアクセスしなければいけないという欠点があります。TypeScriptを使っていると型がきくので問題ないのですが、デザイナーさんがJavaScriptでコードを書くときやVSCodeを使っていない場合など、型がチェックされない環境では.valueでの値アクセスでミスが起きやすいという問題があります。
2つ目は、reactiveな値を分割代入で取り扱うのが難しいという点です。具体的には下記のコードのようにマウスポインタの座標位置をreactiveに取り扱うcomposableな関数useMouseがあるとします。この関数ではreactiveでx, y座標をstateに返しますが、ここで分割代入を使ってしまうとreactivityが失われてしまいます。watchEffectでconsole.log('update', x, y)と書いて、マウスを動かして座標を更新しても、表示は変わりません。
Propsにも同様の問題があり、<script setup>内でdefinePropsに渡したPropsに対して分割代入を使うと、これもreactivityが失われてしまいます。
3つ目は、Propsのデフォルト値の定義方法に関する問題です。<script setup>の登場以降、definePropsを使ってPropsを定義できるようになったのですが、デフォルト値はwithDefaultsマクロを使わないと定義できません。
Reactive Transformを使うとどうなるか
Reactive Transformを使うとこれらの問題がどう解決できるかをご説明します。
まず1つ目の「refとreactiveの取り扱いが難しい」という問題については、値はほぼrefを使って対応できるようになります。こちらのコードのように、コンパイラマクロ$refを使うと.valueで値にアクセスすることなくコードを書くことができます。コンパイルされると.valueで値にアクセスするコードに変換されます。
2つ目の「値を分割代入で取り扱うのが難しい」という問題については、たとえば先ほどのuseMouse関数(マウスポインタの座標をreactiveなstateとして返す関数)であれば、useMouse()を呼び出すときに、$()マクロでラップすると分割代入が使えるようになります。$()マクロでラップすると、コンパイル時に分割代入のコードは変換され、toRefで戻り値がref・ref以外のどちらでも対応できるように変換されます。
Propsも同様で、<script setup>でのdefinePropsが改善され、分割代入を使った場合もコンパイル後にProps経由でアクセスできるようになります。
3つ目の「Propsのデフォルト値の定義方法」については、JavaScriptのデフォルト値定義の構文で定義できるようになり、エイリアスも使えるようになります。
ただし注意点があります。
1点目は変数の定義でletとconstを使い分けなければいけないということです。下記のコードではcountを定義後に書き換えるので、定義時にはletを使わなければなりません。$computedで定義し、参照するだけの場合はconstで定義できます。
また、マクロで定義した変数をreactiveな関数に渡すとき、とくにrefを引数として要求された場合は、$$()マクロでエスケープしないとreactiveにならないという罠があるので注意が必要です。
Composableな関数でreturnするときにも$$()でエスケープしないとreactiveにならないため、注意が必要です。
Reactivity Transformをサポートするツール
Reactivity Transformをサポートするツールももちろん提供される予定です。
Vue.js用のVSCode拡張のVolarと、ESLintのプラグインも現時点では開発されていませんが今後開発される予定です。バンドラについては現時点でオプトインして使えるようになっています。
以上です。ありがとうございました。
