Vapor Mode
Vapor Mode は、短く説明しようとすると、その意義を狭く捉えてしまいがちです。
端的には、仮想 DOM のオーバーヘッドを減らし、きめ細かな処理で Vue コンポーネントをより直接的に描画する方式です。
その説明は正しいものの、ツールの観点から見た興味深い変化までは伝わりません。
コンパイラが DOM の更新をより直接的に扱うほど、コンパイラが提供する機能や、生成結果を調べる手段が重要になります。
Vapor が重要な理由
従来の Vue の描画方式には、成熟した理解の枠組みがあります。
- テンプレートをレンダリング関数にコンパイルする
- 仮想ノードを作る
- 動的な領域の差分を取る
- DOM に変更を適用する
柔軟で、実際のアプリケーションで長く検証されてきた方式です。
Vapor は、コンパイラがリアクティブな UI をより直接的に表現できたら何が変わるのかを探ります。仮想 DOM をランタイムの中心に置く代わりに、リアクティビティと DOM 更新を直接結び付ける操作を生成します。
その分、ランタイムの汎用性に頼るよりも、コンパイル時の精度が求められます。
Vize は、Vue のツールチェーンがコードを出力する前に SFC を深く理解するべきだという考えに基づいています。だからこそ、この変化には大きな可能性を感じています。
コンパイラに求められる責任の変化
出力が DOM 操作に直結するほど、コンパイラの判断ミスもはっきりと現れます。
コンパイラは、次のことを理解する必要があります。
- どのバインディングがリアクティブか
- どの DOM 操作が変化せずに保たれるか
- どの式に getter が必要か
- どの動的な props に更新処理が必要か
- どのスロットやコンポーネントにランタイム上の境界が必要か
- どのテンプレートスコープがループ、分岐、スロットの内側に限られるか
仮想 DOM の方式では、判断しきれない部分を実行時の差分処理が吸収できます。
Vapor のように DOM を直接扱う方式では、コードの意図をコンパイラがより多く引き受けます。そのため、解析の品質、ソースマップ、スナップショットによる検証範囲が、さらに重要になります。
Vize が探求したいのは、まさにこうした問題です。
主要なバックエンドとしての Vapor
Vize のアーキテクチャでは、コンパイラの出力モードを、互いに無関係な実装ではなく、共通の仕組みを持つバックエンドとして扱います。
同じ SFC の構造とテンプレート解析から、次のものを生成できる設計を目指しています。
- DOM 向けのコンパイラ出力
- SSR 向けのコンパイラ出力
- Vapor 向けのコンパイラ出力
- ある構文に対応できる、または対応できない理由を説明する診断
Vapor だけを切り離した特別扱いにしないことが大切です。
DOM、SSR、Vapor を同じツールチェーンのモデルで扱えば、出力を比較し、スナップショットを再利用し、各モードの診断に一貫性を持たせられます。
デバッグに必要な情報も変わる
Vapor Mode は、デバッグの体験も変えます。
出力が DOM 操作に直結する場合、開発者は次の挙動を確かめられる必要があります。
- 生成された操作の順序
- リアクティブな依存関係の境界
- イベントリスナーの配置
- コンポーネントの props 更新の意味と挙動
- 分岐やループを片付ける処理
- 必要に応じた hydration や SSR との互換性
これらはランタイムだけの課題ではありません。ツールが支えるべき課題でもあります。
Vapor のツールチェーンには、次の疑問に答えられることが求められます。
- コンパイラは何を静的だと判断したのか
- 何を動的だと判断したのか
- この更新処理はどこから生まれたのか
- 生成されたこの操作は、ソースのどの式に由来するのか
- この構文がフォールバックした、または失敗した理由は何か
ここで、Vize の静的解析と、スナップショットを重視したテストが役立ちます。
Vue の意味を保ったまま速くする
Vapor は性能を重視する方式ですが、Vue のコードが持つ意味を犠牲にはできません。
速い描画方式を使うために、ユーザーが別のテンプレート言語を覚える必要はないはずです。コンパイラが Vue のコードを十分に理解し、DOM の直接更新を自然に使えることが理想です。
そのためには、次の検証が必要です。
- 通常の Vue で期待される挙動との互換性テスト
- 実際のプロジェクトから得たフィクスチャ
- 未対応のパターンを正確に伝える診断
- 丁寧なソースマップの対応付け
- 小さな例だけでなく、大規模なアプリケーションも含むベンチマーク
目指しているのは、何を犠牲にしても Vapor を動かすことではありません。
対応範囲を黙って狭めることで速くするのではなく、コードをより深く理解することで速くなるコンパイル方式です。
Vize にとって自然な挑戦である理由
Vize はまだ実験段階にあります。だからこそ、Vapor は自然な探求の対象です。
独立したツールチェーンでは、次のような可能性を試せます。
- 別の形のコンパイラ出力
- より厳密な診断
- より速いスナップショット検証
- DOM を直接操作する処理のモデル化
- 型情報を使うテンプレート解析との統合
- コンパイラの判断を AI に説明する仕組み
公式のエコシステムには安定性が求められます。Vize はより速く試し、徹底的にテストし、その過程を公開しながら学べます。
互いにそうした役割を担う関係が望ましいと考えています。
Vapor Mode は、Vize に機能を一つ追加するだけのものではありません。Vue のツールチェーンを統合するという構想全体を試す課題です。
パーサー、アナライザー、コンパイラ、診断、スナップショット、実際のプロジェクトのフィクスチャがつながれば、Vapor は実行時の最適化以上のものになります。
Vue を深く理解したツールチェーンが、別の描画方式を生み出せることの証明になります。