Vize
UI の言語としての Vue
「Characterize Vue.js」では、Vue を単なる UI フレームワークとしてではなく、UI を記述するための言語として捉えました。
この捉え方は重要です。
Vue がただのライブラリなら、ツールは JavaScript を包むラッパーの寄せ集めで済みます。
Vue が UI の言語なら、ツールは言語の「環境」にならなければなりません。
Vue は UI の知識を整理する
Vue のファイルは、JavaScript に少しの HTML を添えただけのものではありません。
言語の機能を通して、UI の知識を整理しています。
- テンプレートの式
v-if、v-for、v-bind、v-onなどのディレクティブ- コンポーネントの境界
- props と emits
- スロット
- scoped スタイル
- コンパイラの情報を活かしたレンダリング
- 単一ファイルコンポーネントという構造
これらは、たまたま便利だから用意されているわけではありません。UI で繰り返し現れる問題に、名前と規則を与えるための仕組みです。
それこそが、言語の役割です。
言語は、人が考えるためのよりよい形を与えることで、ある領域を「書ける」ものにします。
言語には環境がふさわしい
Vue を言語のような体系として受け入れると、ツールチェーンに対する問いが変わります。
次のように問うだけでは、もう足りません。
- バンドルできるか
- 一部を型チェックできるか
- script ブロックを lint できるか
- エディターでハイライトできるか
問うべきなのは、次のことです。
この言語のまわりに作れる、最も強力な環境とは何か。
フロントエンドの言語の環境とは、次のようなものを指します。
- コンパイラからのフィードバック
- lint からのフィードバック
- 安定したフォーマッタ
- 型チェック
- エディターの支援
- コンポーネントのドキュメント
- ビジュアルリグレッションテスト
- デザインシステムの制約
- AI が読み取れる診断
- 実際のプロジェクトでの検証
目指すのは、すべてを中途半端にこなすコマンドをひとつ作ることではありません。
それぞれの層がほかの層をよくしていけるほど、一貫した環境を作ることです。
分断は、Vue ではとくに痛手になる
ツールの分断は、どのツールチェーンでも問題になります。しかし Vue では、それがとくに目立ちます。
.vue ファイルは、複数の言語と関心事にまたがっています。
- HTML に似たテンプレート
- JavaScript または TypeScript
- CSS とプリプロセッサ
- フレームワークのディレクティブ
- 生成されるレンダリングコード
- テンプレートの型チェックのための仮想 TypeScript
ツールごとにファイルの別々の断面しか見ていないと、そのコストを払うのは利用者です。
- 診断が食い違う
- ソース上の位置がずれる
- コンパイラの出力と lint の出力が、別々の前提に基づいている
- AI による修正の提案が、見当違いの層を対象にする
- エディターの動作と CI の動作が異なる
Vue にとって最も強力な環境とは、SFC をひとつのまとまりとして理解する環境です。
それが、Vize がアーキテクチャの面で賭けていることです。
フロントエンドの環境は、厳格で、創造的であるべき
フロントエンドのツールには、誤った二者択一があります。環境を厳格にして使い心地を犠牲にするか、柔軟にして信頼性を犠牲にするか、というものです。
Vue の強さは、いつも取っつきやすさにありました。小さく始めて、あとから構造を増やしていけます。
Vize は、その精神を保ちながら、より厳格なワークフローを現実的なものにするべきです。
- 診断が速いので、チェックが省略されない
- ルールが正確なので、厳格さがノイズにならない
- スナップショットがあるので、コンパイラの変更をレビューできる
- Musea があるので、デザインシステムを見て回れる
- AI と連携しているので、コード生成が決定論的なフィードバックを受け取れる
- 実際のプロジェクトのフィクスチャがあるので、ツールチェーンが本番のパターンから学べる
最も強力な環境とは、ルールがいちばん多い環境のことではありません。
ルール、コンパイラ、エディター、デザインのフィードバックのすべてが、同じメンタルモデルを支えている環境のことです。
この領域に Vize が存在する理由
Vize は、そうした環境を Vue のまわりに作る試みです。
Vize は、次のどれかひとつではありません。
- コンパイラ
- リンター
- フォーマッタ
- 型チェッカー
- LSP
- コンポーネントギャラリー
- AI との連携の窓口
これらすべてが、Vue を理解するひとつのコアを共有するようにする試みです。
これが重要なのは、言語の環境の価値が、ツールの数では決まらないからです。価値を決めるのは、ツール同士の関係の質です。
コンパイラとリンターの判断が一致すれば、信頼が高まります。 エディターと CI の結果が一致すれば、摩擦が減ります。 Musea と静的解析が一致すれば、デザインシステムは実行できるものになります。 AI と診断が一致すれば、コード生成はより安全になります。
フロントエンドには、今これが必要
フロントエンド開発は、複雑になり続けています。
- アプリケーションの大規模化
- フレームワークの機能の増加
- アクセシビリティへの期待の高まり
- デザインシステムに関わる作業の増加
- 型レベルでのモデリングの増加
- AI が生成するコードの増加
- デバイスやプラットフォームをまたいで増える、本番環境の種類
その答えが「プラグインをもっと入れる」だけであるはずがありません。
答えは、よりよい環境でなければなりません。
Vue はすでに、UI を記述するための言語を与えてくれています。Vize は、その言語のまわりに、可能な限り強力なフロントエンド環境を作るとはどういうことかを探っています。速く、厳格で、デザインを理解し、AI にも対応し、実際のプロジェクトに根ざした環境です。
それが、長期的なビジョンです。