「Vite 3.0」とは？最新フロントエンドビルドツールを解説！

Vite 3.0がリリースされた

2022年7月、vitejs.devはフロントエンドのビルドツール「Vite」の最新バージョンである「Vite 3.0」をリリースしました。

Viteは高速動作を特徴とし、サポート対象をVue.js・React・Svelteとするフロントエンドのビルドツールです。リリースされたVite 3.0では、Viteの高速テストを可能とするcreate-viteテンプレートに、今回新たなドキュメントに則った新たなテーマが追加されています。

そのほか、Vite CLIのデフォルト開発サーバポートは「5173」となり、プレビューサーバポート「4173」をリッスンするように変更され、Viteと他のツールとの衝突回避を図っています。複数の変更が施されています。

また、Vite 3.0ではデフォルトの接続スキームが変更され、シナリオのほとんどで直ちにWebSocket接続が使用できるとともに、静的インポートされた先頭のモジュールをクロールする際、プラグインによるインポートの注入で、コールドスタート中の完全なリロードが回避されるようになっています。

このようにVite 3.0はViteの弱点や問題点を克服し、さらに強力なフロントエンドのビルドツールに進化しています。

【参考】：Vite 3.0 is out！ 【参考】：Vite | 次世代フロントエンドツール

Vue.jsとは？すぐに分かる概要から特長・使い方まで解説！

Reactの将来性はVue超え？できることやメリット・デメリットも解説

Viteは「ヴィート」と発音し、フランス語の「速い」を意味する言葉です。Viteは2020年発表の新しいフロントエンドのビルドツールです。ビルドツールとは、ソースコードから実行可能アプリケーションまでの作成を自動化するツールのことです。

Viteの開発者は、Vue.jsの作者と同じEvan You氏ですが、ViteはVue.jsのツールではありません。ViteはJavaScriptから流行のフレームワークであるVue.js・Svelte・Reactまで、さまざまな環境で利用可能な汎用ツールです。

Viteの特徴

フロントエンドのビルドツールであるViteは、どのような特徴を持っているのでしょうか？特徴をつかむことで、よりViteのイメージを明確にしていきましょう。

Viteの大きな特徴は、その実行スピードの速さにあります。従来のビルドツールでは、プロジェクト内の全てのファイルをバンドルして1つのプログラムにまとめます。バンドルとはコンパイル・結合によって、数あるソースをひと塊にすることを意味します。

プロジェクトの規模が大きくなればなるほど、このバンドル処理に時間を要するようになり、これが従来のビルドツールのネックでした。

Viteではこの弱点に着目し、モジュール分割の仕組みである「ES Modules」を利用して、修正や変更が加えられたソースだけをコンパイルしてブラウザに送るようになっています。これにより、大規模プロジェクトでも起動や更新が高速で行えるようになっています。

なお、ES Modulesでは、ブラウザとしてIE11（Internet Explorer 11）が利用できないという制約があります。

「out of the box」（箱から出してすぐに使える）がViteの主要コンセプトです。このコンセプト通り、Viteでは基本的に開発における面倒な設定がほぼ不要で、JavaScriptだけのシンプルなウェブページからVue.jsとTypeScriptによる本格的ウェブアプリケーションまで、ほぼ同じ早さで開発を始められます。

また、開発中にファイルを変更する場合でも、ホットリロード機能によって、その差分検知によるブラウザーのリロードが行われ、ページの変更に関係しない部分への影響を与えることがありません。

ビルドには開発の際に使用されるDevelopment Buildと、本番アプリケーション作成に使用されるProduction Build（本番ビルド）があります。

Viteを使った開発（Development Build）のデバッグ起動ではIE11を使用できませんが、ビルド結果はIE11でも動かせます。

開発時にViteはES modulesを使い、高速に動作しますが、ビルドする際に最終的にはこれまでのバンドラーと同様に、すべてのファイルを1つにまとめてくれます。このため、「ES Modules」では動作しなかったIE11が、本番では動作が可能です。ただし、IE11向けのビルドには追加の設定が必要になる点は注意が必要です。

Vue.jsのプロジェクトをViteで作成する

ここでは、Vue.jsのプロジェクトを作成するのにViteを用いる手順について紹介します。Vue.jsはWebアプリケーションにおける主にUI開発で使われる、JavaScriptのフレームワークです。Vue.jsはJavaScript用のフレームワークとして最も高い採用率を誇っています。

手順としては、最初にJavaSript実行環境のNode.jsをインストールし、続いてVue.jsをインストールします。JavaScriptの開発環境が整ったところで、「Vite 3.0」をインストールするという流れです。

【参考】：Vue.js

Viteを利用するためには、Node.js（npm）がインストールされていることが前提なので、まずはNode.jsをインストールします。

Node.jsは、JavaScriptの実行環境で、これを自分のパソコンやサーバにインストールするとJavaScriptを用いたWebアプリケーションの開発、モバイルアプリケーション開発、フロントエンド開発環境の構築が行えるようになります。

インストールの手順を以下、簡単に紹介します。（ここではWindows10もしくはWindows11を前提にしています。）

STEP1. Node.jsのインストーラーを入手します。下記のNode.js公式サイトにアクセスし、「Download for Windows（x64）」の左下にある［16.16.0.LTS］（数字はバージョンで、時々変動します）をクリックしてインストーラーをダウンロードします。

STEP2. Node.jsのインストーラーを起動します。インストールはNode.jsのインストーラーが自動で行ってくれます。基本的に特別なオプション指定は不要で、［Next］ボタンを数回クリックするだけでインストール作業は終わります。最後に［Finish］ボタンをクリックすれば完了です。

STEP3. Node.jsがインストールされたことを確認します。

［Windows］+［R］で「ファイル名を指定して実行」のダイアログを開き、「cmd」と入力して、「コマンドプロンプト」を開きます。

続いて、コマンドプロンプトで、

node -v

と入力すると、インストールされたNode.jsのバージョンが表示されます。

v16.16.0

と表示されれば正しく最新バージョンのNode.jsがインストールされています。

【参考】：Node.js

Node.js入門！メリットやインストール方法・学習方法を解説

Node.jsのインストールが済んだら、続いてJavaScriptのフレームワーク、Vue.jsをインストールします。以下、インストール手順を紹介します。ここではvue-cliを利用したインストールについて解説します。

STEP1. コマンドプロンプトを開き、

npm install -g @vue/cli

を入力します。

「-g」を入力し忘れるとエラーが発生しますので注意が必要です。

STEP2. インストールが終わったら、コマンドプロンプトに

vue --version

を入力します。

ここでは

@vue/cli 5.0.8

と表示されれば、Vue.jsのインストールは完了です。

【参考】：Vue.js

Vue.jsのインストールが完了したら、実際にVue.jsを起動してみましょう。

STEP1. コマンドプロンプトを開き

vue create test-vue

を入力します。ここではプロジェクト名を仮にtest-vueとします。

STEP2. 画面上にいくつか選択肢が表示されますが、デフォルトを選択しますので、そのままEnterキーを押してください。

$ cd test-vue $ npm run serve

と表示されたら、「test-vue」フォルダにプロジェクトが作成されています。

STEP3. 続いて、「test-vue」フォルダに移動します。コマンドプロンプトで

cd test-vue

と入力します。

STEP4. 「test-vue」に移動したら、

npm run serve

と入力します。以下のように表示されたら、プロジェクトが正常に起動しています。

DONE  Compiled successfully in 6221ms         App running at:   - Local:   http://localhost:8080/   - Network: http://192.168.0.20:8080/   Note that the development build is not optimized.   To create a production build, run npm run build.

STEP5. ブラウザを起動し、「http://localhost:8080/」にアクセスし、

Welcome to Your Vue.js App

と表示されたらOKです。

Node、jsとVue.jsのインストールが無事に終わったら、最後にViteをインストールしてみましょう。

STEP1. Vite 3.0をインストールします。コマンドプロンプトを開き

npm init test-vite

を入力します。ここではプロジェクト名を仮にtest-viteとします。

STEP2. 続いて、プロジェクトフォルダ「test-vite」に移動します。コマンドプロンプトで

cd test-vite

と入力します。

STEP3. test-viteフォルダに移動したら、

npm install

と入力し、

Run npm auditfor details.

と表示されたらプロジェクトを起動します。

STEP4. npm run dev

と入力します。

Dev server running at:   > Network:  http://192.168.0.20:3000/   > Local:    http://localhost:3000/

と表示されたら、ブラウザを起動して「http://192.168.0.20:3000/」にアクセスしてください。

「Hello Vue 3.0 + Vite」と表示されていたら、Vite 3.0がインストールされ、プロジェクトが起動しています。

※コマンドプロンプトで実行中の処理を停止するには、［Ctrl］+［C］と入力し「バッチ ジョブを終了しますか （Y/N）？」と聞かれたら「y」と入力してください。

Vite 3.0を利用する

ここまで、フロントエンドの高速ビルドツールである「Vite 3.0」のリリースについて紹介し、併せてViteの特徴、利用の仕方について解説しました。Webアプリケーションの開発に携わる人にとって、使い勝手のよいビルドツールは欠かせないツールです。

この記事でVite 3.0に関心を持たれた方は、JavaScriptの習得と併せて、開発環境のVue.jsやビルドツールのVite 3.0について学ぶことをおすすめします。