設計思想

Warning

Vize は現在も開発を進めており、本番環境での利用に向けた準備は完了していません。このページでは、プロジェクトの目標と設計方針を説明します。

Vize はコンパイラの実装だけでなく、Vue.js のツールチェーンをどう設計するかという考え方を示すプロジェクトです。

Vize が存在する理由

JavaScript の開発では、コンパイル、lint、整形、型チェックにも JavaScript で書かれたツールが長く使われてきました。こうしたツールは、ガベージコレクションの停止、単一スレッドでの実行、動的ディスパッチのコストなど、処理対象のコードと同じ実行環境の制約を受けます。

Vize は、Vue.js のツールチェーンを Rust で実装することで、アーキテクチャからこの制約を減らそうとしています。既存の処理を少しずつ高速化するだけでなく、実装の土台からできることを広げる方針です。

設計原則

1. 統合ツールチェーン

従来の Vue.js 開発では、コンパイラ (@vue/compiler-sfc)、リンター (eslint + eslint-plugin-vue)、フォーマッタ (prettier)、型チェッカー (vue-tsc)、コンポーネントエクスプローラー (Storybook) を個別に組み合わせます。それぞれが独自のパーサー、AST、設定形式を持っています。

Vize は、これらの機能を一つのバイナリに統合することを目指します。パーサー、AST、設定を共有し、重複する解析と設定の負担を減らしながら、どのツールも同じ理解に基づいてコードを扱えるようにします。

@vue/compiler-sfc  +  eslint-plugin-vue  +  prettier  +  vue-tsc  +  Storybook
                              ↓
                            vize

2. パフォーマンスも機能の一部

速度は開発体験を支える要件です。コンパイルに数秒、lint に数分かかれば作業の流れが途切れます。型チェックが遅いと、実行を後回しにしたくなります。

Vize は、各機能を作業中にも繰り返し使える速度で実行する設計を目指します。コンパイルの測定例と、ほかの機能の設計方針は次のとおりです。

コンパイル: 15,000 個の SFC を 498ms で処理 (マルチスレッドでの測定値)
整形: 大規模なコードベースでも待ち時間を抑える
lint: LSP を通じてリアルタイムに診断を返す
型チェック: V8 の実行コストを避けたインクリメンタル解析

Rust のゼロコスト抽象化、アリーナアロケーション、Rayon によるネイティブの並列処理を利用します。

3. 既存の開発フローとの互換性

Vite プラグインは、Vue 3 の SFC で @vitejs/plugin-vue を置き換えることを目指しています。既存の Vue 3 コンポーネントの <script setup> と Options API、スコープ付きスタイル、HMR を扱います。

この方針には対応範囲があります。Vue 2 と 2.7 (vue.version) は明示的に有効にする開発段階の機能であり、webpack はこの置き換えの対象に含みません。@vitejs/plugin-vue とのプラグインオプションの互換性も未完成です。詳しくは置き換えの対応範囲を参照してください。

Nuxt との連携や、標準プロトコルを使った VS Code の LSP 連携にも同じ方針を適用します。既存の開発環境を作り直すことなく、ツールを導入できることを目指します。

4. 芸術に学ぶアーキテクチャ

Vize の製品と従来のコンパイラのクレートには、絵画、彫刻、美術館の展示などに由来する名前が使われています。コードを形にする作業を創作と捉え、その役割を名前にも表しています。Davinci の内部クレートは、別の規則に従ってレベル名を使います。

クレート名	芸術での意味	ツールチェーンでの役割
Carton	作品を収めるケース	共通ユーティリティ — 道具箱
Relief	平面から浮き出る彫刻	AST — コードの構造を表す面
Armature	彫刻を支える骨組み	パーサー — 構造を組み立てる基盤
Croquis	対象の特徴を捉える素早いスケッチ	意味解析 — コードの意味を捉える
Atelier	芸術家の工房	コンパイラ — 変換を行う場所
Vitrine	ガラスの展示ケース	バインディング — 外部から作品を利用する窓口
Canon	理想的な比率の基準	型チェッカー — 正しさを確かめる
Patina	手入れや年月を表す表面の風合い	リンター — コードの表面を整える
Glyph	彫られた記号や文字の形	フォーマッタ — テキストの形を整える
Maestro	指揮者	LSP — 開発体験をまとめる
Musea	museum の複数形	コンポーネントギャラリー — 作品を展示する
Fresco	壁画の技法	TUI フレームワーク — ターミナルに描く

名前からクレートの役割を把握できることにも意味があります。vize_atelier_dom は VDOM 出力を作る工房、vize_patina はコードを磨くためのツール、と捉えられます。

彫刻との対応

コンパイルの各工程は、彫刻を作る工程にたとえられます。

Armature: 彫刻家は、全体の形を決める骨組みから作り始めます。パーサー (vize_armature) は、ソーステキストから構造の基盤となる AST を組み立てます。
Relief: 骨組みの上に面を作り、平面から浮き出るレリーフを形にします。AST (vize_relief) は、もともと文字の列だったコードに構造を与えます。
Croquis: 完成品に着手する前のスケッチで、対象の特徴を捉えます。意味解析 (vize_croquis) は、どの変数が束縛され、どの式が有効かを、コンパイル先に依存せず把握します。
Atelier: 工房では、同じ題材から異なる作品を作ることがあります。コンパイルのバックエンド (vize_atelier_dom、vize_atelier_vapor、vize_atelier_ssr) は、解析済みの同じ AST から VDOM、Vapor、SSR の出力を作ります。
Vitrine: 完成品をガラスの展示ケースに置き、他の人から見えるようにします。バインディング (vize_vitrine) は、JavaScript 側からコンパイル結果を利用するための窓口です。
Musea: 作品を美術館に展示し、鑑賞や研究につなげます。コンポーネントギャラリー (vize_musea) は、コンポーネントを展示し、調べ、文書化する場所です。

仕上げの工程との対応

ほかのクレートも、作品を仕上げる作業になぞらえています。

Canon (型チェッカー): 古典彫刻では、canon は理想的な人体の比率を定める基準でした。ポリュクレイトスの『Kanon』が数学的な比率を示すように、vize_canon は型、props、emits の整合性を確かめます。
Patina (リンター): patina は、年月や手入れによって素材の表面に生まれる風合いです。vize_patina はコードを調べ、品質に影響する問題を見つけます。
Glyph (フォーマッタ): glyph は、彫られた記号や文字の形を指します。vize_glyph は、文字や空白を一貫した形式に整えます。
Maestro (LSP): maestro は、演奏をまとめる指揮者です。vize_maestro は、補完、診断、整形、コードの移動などを、エディタで一つの開発体験として提供します。
Fresco (TUI): fresco は、湿った漆喰に顔料を塗り、壁と一体にする壁画の技法です。TUI フレームワークは、ターミナルにインターフェースを描きます。

5. Vapor を最初から設計に含める

Vue 3.6 の Vapor モードは、仮想 DOM を使わず、細かい単位で更新するリアクティブなコードを生成するコンパイル方式です。Vize は、最初から Vapor を主要なコンパイル先の一つとして設計しています。

@vue/compiler-sfc では段階的に Vapor 対応が追加されてきました。Vize では、vize_atelier_vapor と vize_atelier_dom を並行して作り、共有基盤 (vize_atelier_core) が両方の出力形式を扱えるようにしています。

6. 開発者の主権

Vize は独立したツールチェーンです。Vue.js コアチームが管理するプロジェクトではなく、Vue アプリを作る公式の方法を名乗るものでもありません。この独立性には、次の目的があります。

後方互換性の制約に縛られず、コンパイル方式を試せること
公式プロジェクトの運営とは別に、素早く実装を進められること
将来の公式ツールチェーンにも役立つアイデアを試せること
性能を重視する開発者に選択肢を提供すること

同時に、Vue.js の公式仕様との互換性を保つことを目指します。

7. ネイティブツールの基盤を活用する

JavaScript のツールをシステムプログラミング言語で実装し直す動きは、コミュニティで oxidation と呼ばれます。Vize もその一部として、既存の基盤と連携します。

OXC: JavaScript と TypeScript のパースに Oxidation Compiler (oxc) を使います。vize_croquis の意味解析と vize_atelier_core のコード生成に必要な JS/TS の AST を、OXC のパーサーから得ます。
oxlint: Vue 固有のテンプレート lint は vize_patina が担い、一般的な JavaScript の lint には oxlint の Rust ネイティブなルールエンジンを使う設計です。両者の役割は相互に補完します。
Corsa: corsa-bind を基盤にするネイティブの TypeScript 実行層です。vize_canon は、この基盤で診断を取得しながら、Vue 固有のテンプレートの型解析も提供します。JavaScript 上のコンパイラにすべての処理を委ねない方針です。
LightningCSS: vize_atelier_sfc の CSS のパースと変換に LightningCSS を使い、スコープ付きスタイルの処理にも利用します。

ツール間で AST を共有する方法、言語をまたぐインクリメンタル解析、エディタ連携の一貫性には、未解決の課題が残っています。Vize は Vue.js の開発を通じて、こうした課題の解決方法を試していきます。

8. Vite+ と OXC との協力

Vite+ と OXC は、フレームワークに依存せず、JS/TS/CSS のバンドル、パース、lint、整形を担うツールチェーンです。Vize は、その基盤を使いながら Vue 固有の処理を担います。

JavaScript と TypeScript のパースには OXC、Vue SFC の CSS 処理には LightningCSS を使います。リンターの Patina とフォーマッタの Glyph は、テンプレートのディレクティブ、SFC の構造、コンポーネントの規約を扱います。<script> の lint や整形を OXC に委ね、Vize が <template> と SFC 全体の連携を担う、といった統合も進める方針です。Vite プラグイン (@vizejs/vite-plugin) は Vite を基盤に、Vue 3 の SFC で @vitejs/plugin-vue を置き換えることを目指しています。

作者の @ubugeeei は、これらのプロジェクトと協力し、互いの役割を補完することを望んでいます。連携のために変更が必要になれば、双方で協力して改善していく方針です。

名前

Vize (/viːz/、ヴィーズ) は、次の三つの言葉に由来します。

Vizier: 賢明な相談役、助言者
Visor: はっきり見るためのもの
Advisor: よりよい判断を助ける案内役

コードを見通し、判断を助けるツールという意味を込めています。英語の breeze (そよ風) と韻を踏む発音で、速さ、軽やかさ、爽やかさを表しています。