こんにちは、フロントエンドエンジニアの raraya です。
いきなりですが、普段何気なく使っているVSCodeの拡張機能にスポットを当てたいと思います。
Vue.jsで開発を行う際、VSCodeなどのエディタで快適にコーディングするためには、適切な拡張機能の導入が欠かせません。
現在、Vue.js公式の拡張機能である「Vue (Official)」が推奨されていますが、Vue.jsの開発環境は時代とともに大きく変化してきました。
「いまさら！」と思われるかもしれませんが、現在使っているVue (Official)とはそもそも何なのか、何のために導入する必要があるのか、以前は何を使っていたのか、開発環境はどのように進化してきたのか、という疑問から調査を始めました。本記事では、Vue 1時代から現在に至るまでのVue.js開発環境の変遷を振り返りながら、Vue (Official)がなぜ必要なのか、どのように進化してきたのかを詳しく解説します。
Vue.js開発環境の変遷
Vue.jsの開発環境、特にVSCode拡張機能の歴史を振り返ると、Vue.jsのバージョンアップとともに、開発ツールも大きく進化してきたことがわかります。
Vue 1時代：拡張機能の黎明期
Vue.jsが2014年にリリースされた当初、Vue 1.xの時代には、現在のような充実したVSCode拡張機能はまだ存在していませんでした。実は、Vue.jsがリリースされた2014年当時、VSCode自体もまだ存在していませんでした（VSCodeは2015年にリリース）。そのため、Vue.js開発者は、当時人気の高かったSublime TextやAtomなどのエディタを使用していました。
Vue 1.xは軽量でシンプルなフレームワークとして設計されており、主に小規模なプロジェクトや既存のHTML/CSSに動的な要素を追加する目的で使用されていました。
当時の開発環境は、現在と比べて非常にシンプルでした。開発者は、Vue.jsの公式サイトから直接ライブラリをダウンロードし、HTMLファイル内でスクリプトタグを使用して読み込むことで、Vue.jsを利用していました。特別なビルドツールや複雑な設定を必要とせず、手軽にVue.jsを導入できることが特徴でした。
しかし、どのエディタを使っていても、Vueファイル（.vue）のシンタックスハイライトや自動補完などの機能は、まだ本格的な拡張機能として提供されていませんでした。開発者は、基本的なエディタ機能に頼りながら開発を進めていたのが実情でした。VSCodeが2015年にリリースされ、その後拡張機能のエコシステムが発展していくことで、Vue.js開発環境は大きく進化することになります。
Vue 2時代：Veturの登場
Vue 2がリリースされた2016年頃、Vue.js開発者にとって最初の本格的なVSCode拡張機能として「Vetur」が登場しました。Veturは、Vue 2の開発をサポートする優れた拡張機能で、シンタックスハイライト、スニペット、リンティング、フォーマット、オートコンプリートなどの機能を提供していました。
Veturは、Vue 2時代の標準的な開発環境として、多くの開発者に愛用されました。Options APIを中心としたVue 2の開発スタイルに最適化され、安定した開発体験を提供していました。
Vue 3の登場とVeturの限界
2020年にVue 3がリリースされると、Vue.jsのアーキテクチャは大きく変わりました：
- Composition API: 関数型のアプローチによるコンポーネントロジックの再利用
<script setup>構文: より簡潔なコンポーネント記述方法- TypeScript統合: より強力な型安全性のサポート
これらの新機能に対応するためには、Veturの根本的な再設計が必要でした。VeturはVue 2向けに最適化されていたため、Vue 3の新機能を十分にサポートできませんでした。特に、Composition APIや<script setup>、TypeScript統合など、Vue 3の核心的な機能に対するサポートが不足していました。
Volarの登場：Vue 3への完全対応
Vue 3の新機能に対応するため、Johnson Chu（@johnsoncodehk）という開発者が、Vue 3に完全対応した新しい拡張機能として「Volar」を開発しました。Volarは、Language Server Protocol（LSP）をベースに構築され、Veturとは異なるアーキテクチャで設計されました。
Volarの特徴
Volarは、以下の特徴を持っていました：
- Vue 3の完全サポート: Composition API、
<script setup>、TypeScript統合など、Vue 3の全機能に対応 - 優れた型推論: テンプレート内の式やpropsの型チェックが可能
- 高いパフォーマンス: 大規模プロジェクトでも快適に動作
- モダンなアーキテクチャ: LSPベースの設計により、VSCode以外のエディタでも利用可能
Volarはコミュニティから高い評価を受け、Vue.js開発者の間で広く使われるようになりました。しかし、個人開発という性質上、メンテナンスの負担や公式サポートの欠如という課題もありました。
VeturとVolarの使い分け
この時期、開発者はVue.jsのバージョンに応じて拡張機能を使い分ける必要がありました：
- Vue 2プロジェクト: Veturを使用（現在もVue 2プロジェクトではVeturが推奨されています）
- Vue 3プロジェクト: Volarを使用
Vue 2からVue 3への移行期間中は、プロジェクトごとに拡張機能を切り替える必要があり、都度設定を変更する手間がかかっていました。特に、Vue 2とVue 3のプロジェクトを同時に扱う開発者にとっては、この使い分けが煩雑に感じられることもありました。
また、完全なTypeScriptサポートのためには、Volarに加えて「TypeScript Vue Plugin」という追加のパッケージをtsconfig.jsonに設定するか、別途VSCode拡張機能としてインストールする必要がありました。特に、.tsファイルから.vueファイルをインポートする際の型チェックなど、より高度な型安全性を求める場合には、この追加パッケージが推奨されていました。
Vue (Official)への統合：公式サポートの確立
2023年後半から2024年にかけて、Vue.js公式チームはVolarを公式拡張機能として統合することを決定しました。これにより、Volarは「Vue (Official)」（正式名称：Vue - Official）として再ブランディングされ、以下のメリットが生まれました：
- 公式サポート: Vue.jsチームによる継続的なメンテナンスとサポート
- 開発の安定性: 個人開発から公式プロジェクトへの移行による長期的な安定性
- 機能の統合: VolarとTypeScript Vue Pluginなどの機能が1つに統合され、設定と管理が簡単に
- 継続的な改善: Vue.jsの新機能に迅速に対応できる体制
Takeover ModeからHybrid Modeへ：技術的な進化
Vue (Official)では、Volar時代の課題を解決する重要な技術的進化が実現されました。
Vue (Official) 2.0以前のVolarでは、VSCode標準のTypeScript機能と競合しないよう「Takeover Mode（テイクオーバーモード）」という特殊な設定が必要な場合がありました。これは、VSCode標準のTypeScript機能を無効化し、Volarがそれを完全に引き継ぐモードです。
この設定を行わないと、動作が重くなったり、エラーが二重に表示されたりする問題が発生していました。この設定の必要性が、開発者にとって導入のハードルとなっていました。
しかし、Vue (Official) 2.0以降では「Hybrid Mode（ハイブリッドモード）」が導入され、VSCode標準のTypeScript機能とVue (Official)がスムーズに共存できるようになりました。これにより、設定の手間が大幅に削減され、動作の安定性も劇的に向上しました。
現在、Volarは「Vue (Official)」として、Vue.js公式の拡張機能として提供されています。Volarの開発者であるJohnson Chu氏もVue.jsコアチームのメンバーとして引き続き開発に携わっており、コミュニティの貢献も活発に続いています。
最新の機能紹介
Vue (Official)は公式サポートが確立されてからも継続的に改善が行われており、新機能が追加され続けています。最新の機能については、こちらの記事で詳しく紹介されています。
上記の記事では紹介されていませんが、個人的におすすめしたい機能として、Inlay Hints: Missing Propsがあります。この機能は、コンポーネントに必要なpropsが不足している場合に、エディタ上で視覚的に表示してくれるため、propsの漏れを防ぐのに非常に便利です。
開発効率の向上に大きく貢献する機能の一つと言えるでしょう。
（※利用にはVSCodeの設定で vue.inlayHints.missingProps を true にするか、エディタ全体のInlay Hintsを有効にする必要があります）
下記のようにpropsでnameが不足していることがわかります。
まとめ
Vue.jsの開発環境は、Vue 1時代にはまだ本格的な拡張機能が存在しなかった状態から始まり、Vue 2時代にVeturが登場し、Vue 3の登場とともにVolarが開発され、そして現在はVue (Official)として公式サポートが確立されるまで、大きな進化を遂げてきました。
Vue (Official)は、Vue.js開発において欠かせない拡張機能です。Volarから移行された公式拡張機能として、より安定したサポートと継続的な改善が期待できます。TypeScriptとの統合、リアルタイムのエラー検出、強力な自動補完機能により、開発効率が大幅に向上します。
このように、現在では「あって当たり前」と感じられる機能も、VeturからVolar、そしてVue (Official)へと至るまで、多くの開発者による試行錯誤と継続的な改善の積み重ねによって実現されてきました。Johnson Chu氏をはじめとする開発者たちの努力により、私たちは快適な開発環境を享受できています。
この変遷を振り返ると、「あって当たり前」の機能を提供することの重要性を改めて感じます。私自身も、誰かにとって「あって当たり前、なくては困る」システムやツールを開発できるよう、日々精進していきたいと思います。
