当記事では、Viteを使ってVue3アプリケーションの開発環境構築手順を紹介する。
そもそもViteとは何か？
Viteは、Vue.js の作者 Evan You によって開始された次世代のフロントエンドビルドツール。
一言で言えば、Vue.jsの開発効率を向上させるためのツールであり、従来の開発ツールであったvue-cliの後継ツール。
従来の開発ツールのvue-cliでは、特にwindowsのスペックの劣悪なマシンを使用している場合に、コードビルドの待機時間が非常に長く、効率的な開発体験を実現できていなかった。モジュール数の少ない個人開発レベルのプロジェクトであれば特に問題はなかったが、数千~数万に及ぶモジュールで構成された中規模~大規模のアプリケーションの場合、開発サーバを起動するのに数分待たなければないこともある。
Vite は、ブラウザのネイティブ ES モジュールや、ネイティブにコンパイルされる言語で書かれた先進的な JavaScript ツールである。そのため、従来の JavaScript バンドルツールのいくつかの短所を解消するために設計されており、特に開発中の高速なホットモジュールリローディング（HMR）が大きな魅力である。
以下、Vite の主な特徴と利点。
- 高速な開始: Vite は、開発サーバーの起動が非常に速いのが特徴。従来のバンドルツール（vue-cliなど）では、アプリの起動時にすべてのソースコードをバンドルする必要があったが、Vite は必要なファイルだけを変換して提供する。
- 高速なホットモジュールリローディング: Vite は、変更があったモジュールだけをブラウザに送信し、変更があった部分だけを効率的に更新する。
- ES Modules: Vite は、ネイティブの ES Modules インポートを利用している。これにより、開発時に必要なコードだけをブラウザにロードすることができる。
- リッチなプラグインアーキテクチャ: Rollup プラグインとの互換性があるため、多くの既存の Rollup プラグインを Vite と一緒に使用することができます。
- Vue 3 対応: ViteはVue 3 との統合が非常にスムーズであるが、React や Preact、Svelte といった他のフレームワークとの統合もサポートされている。
- ビルトインの依存関係の最適化: Vite は、最初のページのロード時に必要となる可能性のある依存関係を前もって最適化する。これにより、開発時の読み込み速度を向上させることができる。
なぜvue-cliは遅くて、Viteは早いのか
vue-cli と Vite は、フロントエンドの開発ツールとして同じ目的を持っているものの、内部で使用されている技術やアーキテクチャにおいては大きな違いがある。これらの違いが、開発時のパフォーマンスに影響を与える要因となっている。
1. バンドル方式の違い
- vue-cli (Webpack ベース):
vue-cliはWebpackを核として利用している。Webpack は、開発モードでのサーバー起動時に全てのモジュールをバンドルする。- これにより、起動時やソースコードの変更時に全てのモジュールが再バンドルされるため、アプリケーションが大規模になるとパフォーマンスが低下する。
- Vite:
- Vite はネイティブの ES Modules (ESM) を利用している。これにより、ブラウザが実際に必要とするモジュールだけをリクエストし、変換することが可能。esbuild は Go 言語によって開発されており、依存関係の事前バンドルは、JavaScript ベースよりも 10 倍から 100 倍高速。
- また、Vite は開発時にバンドリングを行わず、必要なモジュールだけをダイナミックに変換できる。これにより、初期ロードやホットリロードが非常に高速になる。
2. ホットモジュールリローディング (HMR)
- vue-cli (Webpack ベース):
- Webpack の HMR は、更新されたモジュールを再バンドルし、ブラウザに送信する必要がある。これは、特に大きなアプリケーションで時間がかかることがある。
- Vite:
- Vite の HMR は、更新されたファイルだけを直接ブラウザに送信する。バンドリングプロセスがないため、変更が即座にブラウザに反映される。
3. 依存関係の処理
- vue-cli (Webpack ベース):
- 依存関係はバンドルの一部として扱われる。そのため、大規模なアプリケーションでは必然的にバンドル時間が長くなる可能性がある。
- Vite:
- Vite は、開発時に一度だけ依存関係を前処理し、ESM としてブラウザに提供する。これにより、アプリケーションのソースコードとは独立して依存関係を高速に扱うことができる。
以上の違いから、Vite は特に開発環境での高速なフィードバックループを提供する設計になっている。
構築手順
開発環境構築にあたり、インストールしたい言語、ライブラリ、ツールは以下とする。
- TypeScript
- Pina
- Vue-Router4
- ESLint
- Prettier
プロジェクトを作成したいディレクトリにて、以下のコマンドを実行する。
npm init vue@latest上記のコマンドを実行するとVue.jsアプリケーション開発に必要なツールやライブラリを共にインストールしますか？という旨の質問が表示される。
今回の要件の場合以下の項目をyesとする。
- TypeScript
- JSX Support
- Vue Router for Single Page Application development?
- Pinia for state management?
- ESLint for code quality?
- Prettier for code formatting?
Vue.js - The Progressive JavaScript Framework
✔ Project name: … vue-ts
✔ Target directory "vue-ts" is not empty. Remove existing files and continue? … yes
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in /Users/waibandl321/onishi/code/Vue-Nuxt/vue-ts...
Done. Now run:その後、プロジェクトディレクトリに移動して以下を実行する。
cd vue-ts
npm install
npm run format
npm run dev`npm run dev`で起動した後に、以下の画面が表示されたらOK。
package.jsonを確認すると、各ライブラリが互換性のあるバージョンでインストールされていることがわかる。
"dependencies": {
"pinia": "^2.1.4",
"vue": "^3.3.4",
"vue-router": "^4.2.4"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.2",
"@vitejs/plugin-vue": "^4.2.3",
"@vue/eslint-config-prettier": "^8.0.0",
"eslint": "^8.45.0",
"eslint-plugin-vue": "^9.15.1",
"prettier": "^3.0.0",
"vite": "^4.4.6"
}以上でVue3×Viteの開発環境の構築は終了。
