Viteで高速な開発環境を構築しよう！

本記事では、フロントエンドビルドツールViteについてハンズオンと共に解説します。

フロントエンドビルドツールのViteとは？

Viteはフランス語で「素早い」という意味で、ヴィートと読みます。Viteはnpmやyarnよりも更に起動速度が速くなったビルドツールです。

ビルドツールとは特定の実行環境に合わせてアプリケーションやライブラリを組み立てるものです。フロントエンドの環境構築はWebpackのバンドルツール（※１）を使用するのが一般的です。

Webpackなどのバンドルツールはアプリケーションの起動前にアプリケーション全体を精査し依存関係（※２）を解決して出力をしていました。 一方でViteは事前に依存関係の解決・最低限のバンドルだけを行いESModules（※３）のimportを通して、ソースコードを読み込むということを行っています。

そのため従来のビルドツールに比べて、高速に開発環境を立ち上げることができます。

※1 ライブラリをまとめるツール、
※2 プログラム内で、ある外部ライブラリを使っていてそれがないと動かないという状態、
※3 JavaScriptファイルから別のJavaScriptファイルを読み込む仕組み

https://v3.vitejs.dev/

npm、yarn関連記事

Viteで開発環境を構築するためには、パッケージ管理マネージャーのnpmまたはyarnを使用する必要があります。 npmやyarnについては別ページにて解説しています。

https://envader.plus/course/9/scenario/1078

https://envader.plus/course/9/scenario/1085

Viteでプロジェクトを作成する際の注意点

Viteを使用してプロジェクトを生成する場合には、Node.jsの14.18+、16+のバージョンが必要と公式サイトで紹介されています。

プロジェクトを生成する前に、ご自身のNode.jsのバージョンを確認しましょう。Node.jsのバージョンを確認するには以下のコマンドを実行します。

node --version
or
node -v

Node.jsのバージョンが古い場合には、Node.jsのバージョン管理ツールのnodenvやnvmなどを使用して、バージョンを変更しましょう。

nodenv、nvm関連記事

nodenvやnvmについても、別ページにて解説しています。

https://envader.plus/course/9/scenario/1092

https://envader.plus/course/9/scenario/1093

Viteの使用方法

Viteを使用するためにはnpmまたはyarnコマンドを使用します。

以下のコマンドを実行すると「envader-practice」ディレクトリが作成されるのと同時に、初期化が行われます。

npm init  -y vite-app envader-practice 

yarnコマンドの場合、以下のコマンドを実行します。

yarn create vite-app envader-practice

作成したディレクトリの中にあるpackage.jsonを確認すると以下のようになっています。

「scripts」には、「dev」という開発用サーバーを起動するためのコマンドと、「build 」という本番環境用のファイルを出力するためのビルドコマンドがあることがわかります。

{
  "name": "envader-practice",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.4"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.13",
    "@vue/compiler-sfc": "^3.0.4"
  }
}

Viteのinstall方法

「envader-practice/」に移動して、npm installコマンドで依存パッケージのインストールを行います。yarnを使用する場合は、yarn installコマンドを実行します。

cd envader-practice
npm install
or
yarn install

Viteの実行方法

必要な依存パッケージのインストールが終わったら、開発用サーバーを立ち上げてみましょう。以下のコマンドを実行します。

npm run dev
or
yarn dev

[vite] Optimizable dependencies detected:
vue

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

表示されたURLにアクセスすると、以下の画面が表示されます。

開発用サーバーを終了するには、control + cキーを押します。

ViteのHMR機能（ホットリロード）

ViteはHMR(Hot Module Replacement)機能により、ソースコードを変更し保存すると、変更した内容が即座に画面に反映されます。いわゆるホットリロードと呼ばれる機能で、この機能を使うために特別な設定をする必要はありません。

開発用サーバーを立ち上げた状態でソースコードを変更した後の状態を確認できるため、ページの再読み込みなどをする必要がなくなります。

作成したプロジェクトのbuildを行う

作成したアプリケーションを本番環境にデプロイするためには、作成したソースコードをビルドする必要があります。

ビルドとは、複数のファイルを一つにまとめて、実行可能なファイルを作成する作業を指します。ビルドを行うには、buildコマンドを実行します。

npm run build
or
yarn build

vite build
[write] dist/index.html 0.38kb, brotli: 0.14kb
[write] dist/_assets/logo.3b714202.png 6.69kb
[write] dist/_assets/index.a87fbacb.js 47.17kb, brotli: 17.03kb
[write] dist/_assets/style.0637ccc5.css 0.16kb, brotli: 0.10kb
Build completed in 5.00s.

Done in 5.28s.

ビルドが完了するとdistディレクトリが作成され、その中にビルドされたファイル一式が配置されます。

.
├── dist
│ ├── _assets
│ │ ├── index.a87fbacb.js
│ │ ├── logo.3b714202.png
│ │ └── style.0637ccc5.css
│ ├── favicon.ico
│ └── index.html

まとめ

今回はViteの使い方について説明しました。

今回紹介したViteのプロジェクト作成方法以外にも、テンプレートと呼ばれる機能を使用してプロジェクトを作成する方法があり、ReactやTypeScriptなどのプロジェクトもコマンド一つで簡単に作成することができます。