Vize

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 を深く理解したツールチェーンが、別の描画方式を生み出せることの証明になります。