「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は「ヴィート」と発音し、フランス語の「速い」を意味する言葉です。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による本格的ウェブアプリケーションまで、ほぼ同じ早さで開発を始められます。

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

IEを含めたプロダクションビルドが可能

ビルドには開発の際に使用される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

Node.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入門！メリットやインストール方法・学習方法を解説

Vue.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のインストールが完了したら、実際に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です。