注目キーワード

ViteでWebフロントエンドの開発を高速化する！使い方を徹底解説

  • 2025.12.26
       
ViteでWebフロントエンドの開発を高速化する！使い方を徹底解説

フロントエンド開発をする際にネックになりがちなのが、ビルドにかかる時間や修正した内容を反映させるまで細かい手間の煩わしさです。
修正するごとにページの更新が必要であったり、プロジェクトの規模が大きくなるほどにビルドの時間も増えたりと、待ち時間や手間の発生は開発効率に大きく影響を与えます。

これらの問題を解決し、快適な開発環境を整えてくれるのが、Viteというビルドツールです。
今回は、Viteとは一体何か？というところから、実際に使用する方法などについて、解説していきたいと思います。

目次

Viteとは？

Vite（発音は「ヴィート」または「ヴィット」）は、フロントエンド開発で活用可能な高速ビルドツールです。
サーバー起動やコード変更の反映、あるいはセットアップ周りの環境構築など、開発する上で発生する事前準備や待ち時間などを大幅に減らすことで、高速なフロントエンド開発を可能にしています。

フランス語で「素早い」 という意味を持つ Vite の名の通りに、簡単かつスピーディに開発を進めるための様々な機能を持つのが大きな特徴です。
また、プラグインシステムによる拡張性も高く、幅広い環境で使用することができます。

Viteの使い方

それでは早速、Viteの使い方について解説していきます。

( ※Viteを使用するには Node.jsが必要となるため、まだインストールされていない場合は先に Node.jsのインストールを済ませておいてください )

新規プロジェクトを作成する

Node.jsがインストールされている状態で以下のコマンドを実行することで、即座に新規プロジェクトを作成することができます。

npm create vite@latest

コマンドを実行すると、以下のような形式で、プロジェクト名や使用するフレームワークなどを決めるための質問がいくつか行われます。

> npx
> create-vite

│
◇  Project name:
│  sampleVite
│
◇  Package name:
│  sample
│
◆  Select a framework:
│  ● Vanilla
│  ○ Vue
│  ○ React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
└

以下の全ての質問に回答すると、新規プロジェクトの作成が完了します。

> npx
> create-vite

│
◇  Project name:
│  sampleVite
│
◇  Package name:
│  sample
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript
│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  No
│
◇  Scaffolding project in /Users/User/sampleVite...
│
└  Done. Now run:

プロジェクト名や使用するテンプレートは、オプションで直接指定することもできます。

npm create vite@latest sampleVite -- --template react

その場合は、残りの質問を上記と同様に答えることで、プロジェクトの作成が完了します。

開発サーバーを立ち上げる

新規プロジェクトの作成が完了すると、以下の3つのコマンドを実行するように表示されます。

cd プロジェクト名
npm install
npm run dev

npm install は依存パッケージのインストールコマンドで、npm run dev は開発サーバーの起動コマンドです。
これらを実行するだけで、あっという間に開発サーバーを起動することができます。

  VITE v7.3.0  ready in 846 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

上記のように、npm run dev コマンドの実行後に表示されるURLが、ローカルでのアクセス先となります。

なお、プロジェクト作成時の 「Install with npm and start now?」 の質問に Yesで答えると、npm installコマンドと npm run devコマンドが自動で実行され、プロジェクトの作成完了と同時にサーバーが起動します。

本番環境のためにソースコードをビルドする

開発が一通り完了し、本番環境に向けてソースコードをビルドしたい場合は、以下のコマンドを実行します。

npm run build

実行すると以下のような処理が行われ、正常に完了するとプロジェクト内に dist という名前のディレクトリが作成されます。

> sample@0.0.0 build
> vite build

vite v7.3.0 building client environment for production...
✓ 32 modules transformed.
dist/index.html                   0.45 kB │ gzip:  0.29 kB
dist/assets/react-CHdo91hT.svg    4.13 kB │ gzip:  2.05 kB
dist/assets/index-COcDBgFa.css    1.38 kB │ gzip:  0.70 kB
dist/assets/index-BaBB40Qq.js   193.91 kB │ gzip: 60.94 kB
✓ built in 430ms

【実行結果】

本番環境ビルドによって静的ファイルがビルドされたプロジェクトの様子

作成された distディレクトリをサーバーに置き、index.htmlまでのルートを設定すれば完了です。

Viteを使うメリット

Viteを使う最大のメリットは、冒頭でも解説したように、開発する上で発生するあらゆる時間を短縮できる点にあります。

Viteを使用することで、高速なフロントエンド開発を実現できる理由を、いくつかのポイントに分けて説明していきたいと思います。

esbuild による高速な開発ビルド

Viteは、WebpackやRollupといった従来のビルドツールとは異なり、esbuildによってバンドルせずに直接モジュールを利用する形式を採用しています。
そのため、ノーバンドルツールとも呼ばれています。
(※esbuildの利用は開発時のみで、本番環境用のビルドの場合はRollupを利用してバンドルを行います)

バンドル形式のビルドツールの場合、プロジェクト全体をコンパイルしてバンドルを行うため、プロジェクトが大きくなるほどに処理時間も長くなってしまうという欠点を抱えています。
一方、esbuildの場合は、必要な時に必要なファイルだけをコンパイルするため、ビルドにかかる時間を大幅に減らせるというメリットがあります。
これにより、サーバーの起動時やページの更新時にかかる時間が少なくなるため、開発をスピーディーに進めることができます。

ただし、厳密にはバンドルを全く行わないわけではなく、esbuildを使用して依存関係を事前バンドルしています。
これは、CommonJSやUMDをES Modulesに変換するためと、モジュールの依存関係を単一にまとめてパフォーマンスを向上させる役割があり、この事前バンドルとesbuildによって高速なサーバー起動やページの更新を実現させています。

高速なHMRで変更内容がすぐ確認できる

Viteでは、Webpackなどの一部のビルドツールと同様に、HMR (Hot Module Replacement) という機能が採用されています。
HMRとは、コードの変更時にページ全体を再読み込みすることなく、変更部分だけを更新してリアルタイムに反映させる機能のことを言います。

HMRを利用することで、本来リロードにかかるはずの時間を省略することができるため、コードの変更を即座に反映させることが可能となります。
ビルドツールによっては、このシステムを採用した上でも、プロジェクトの内容の大きさにより反映に時間がかかってしまうこともありますが、Viteの場合は前述したesbuildの使用によるビルドの高速化があるため、影響を受けずに快適に作業を進めることができます。

高速なHMRで変更内容がすぐ確認できる

Viteでは、Webpackなどの一部のビルドツールと同様に、HMR (Hot Module Replacement) という機能が採用されています。
HMRとは、コードの変更時にページ全体を再読み込みすることなく、変更部分だけを更新してリアルタイムに反映させる機能のことを言います。

HMRを利用することで、本来リロードにかかるはずの時間を省略することができるため、コードの変更を即座に反映させることが可能となります。
ビルドツールによっては、このシステムを採用した上でも、プロジェクトの内容の大きさにより反映に時間がかかってしまうこともありますが、Viteの場合は前述した ES Modulesの使用によるビルドの高速化があるため、影響を受けずに快適に作業を進めることができます。

サーバーサイドレンダリング（SSR）が手軽に実現できる

サーバサイドレンダリング（SSR）とは、HTMLの生成をサーバー側で行い、その結果をブラウザに送信する手法のことを言います。
あらかじめ記述されたHTMLをそのまま表示する静的サイトと異なり、データベースなどの動的データを繁栄しながらサーバー側でHTMLを組み立てることができるため、動的コンテンツも素早く表示することができます。
ブログやECサイトなど、動的に変動するデータが多く含まれるサイトでよく活用されています。

SSRを活用するメリットは、主に以下の3つがあります。

  • 素早い初期表示 … サーバーであらかじめ生成したブラウザを送るため、JavaScriptの読み込みを待たずにページを表示することができます。
  • SEOの向上 … 検索エンジンがHTMLの内容をすぐに読み取れるようになるため、正確な内容が伝わりやすくなり、SEOの効果が高まります。
  • アクセシビリティの向上 … JavaScriptが無効なブラウザでもページが表示されるため、より多くのユーザーにコンテンツを届けることができます。

これらのメリットを持つSSRを、任意のフレームワークなどを使用してViteでも実現することができます。

設定ファイル vite.config.js の使い方

Viteでプロジェクトを作成すると、vite.config.js というファイルが含まれています。
vite.config.js は、プロジェクトの設定内容を記述するファイルです。

例えば、プロジェクト作成直後のファイルには以下のような内容が記述されています。
(選択するフレームワークなどにより内容は異なります)

【vite.config.jsの例】

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

サイトの細かい設定やプラグインの追加など、カスタムが必要な場合にはこのファイルを編集して設定を変更します。

プラグインを追加する

Viteは、プラグインの追加による拡張が可能となっています。
プラグインを新しく追加する際は、package.jsonファイルの devDependenciesへの記載と、vite.config.jsファイルの defineConfig内に該当のプラグイン配列を追加する必要があります。

一例として、公式プラグインの @vitejs/plugin-react を追加する場合で見ていきましょう。

まずは、package.jsonファイルの devDependenciesへプラグインを追加するために、以下のコマンドを実行します。

npm add -D @vitejs/plugin-react

実行したら、ファイル内の該当項目にプラグイン名が記述されているかを確認しましょう。
内容に問題が無ければ、続いて vite.config.jsファイルを編集します。

プラグインが何も追加されていない場合の状態は、以下の通りです。

import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
  
})

プラグインを追加する際は、import文とプラグイン配列をそれぞれ記述する必要があります。
実際に記述すると、以下の内容になります。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
})

プラグインに関するさらに細かい設定をここで記述することもできますが、基本的な構文は上記の通りとなります。

【応用】 Vite で React プロジェクトを作成する

最後に、ここまで紹介した内容を使って、Viteで Reactプロジェクトを作成してみましょう。
大前提として、既に上述したように、Node.js のインストールが必須となります。
(※コマンド実行時に Warning が表示された場合は、Node.js のバージョンをアップデートしてください)

まずは、npm create vite@latest のコマンドを実行します。
一番簡単な Reactプロジェクトの作成方法は、新規作成時のフレームワーク選択で Reactを選択し、既存テンプレートを活用する方法となります。

コマンドを実行すると、プロジェクト名とパッケージ名の入力の後に、使用するフレームワークの選択を求められます。

> npx
> create-vite

│
◇  Project name:
│  sampleVite
│
◇  Package name:
│  sample
│
◆  Select a framework:
│  ● Vanilla
│  ○ Vue
│  ○ React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
└

この中に Reactも含まれているので、これを選択します。
残りの質問も設定したい内容に合わせて選択し、新規プロジェクトを作成してください。

作成後に npm install コマンドを実行する、もしくは 「Install with npm and start now?」 の質問に Yesで答えて自動で npm installを実行し、package.jsonに記載されている全ての依存パッケージをインストールします。
(上記の選択で Reactを選ぶことで、インストールするパッケージに自動で React が含まれています)

デフォルト基本設定はこれで完了するので、npm run dev コマンドを実行してサーバーを起動してみましょう。
起動後にサイトにアクセスすると、以下のようなページが表示されます。

viteとReactを使用してテスト確認ビルドを行ったあとの初期画面

ここまでの設定と表示が完了したら、後はファイルの内容を変更するだけで修正内容を即座に確認することができます。
試しに、srcディレクトリ内にあるApp.jsxファイルの内容を編集してみましょう。

作成直後は、以下のような内容となっています。

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

簡単な修正として、「Vite + React」 の文字列を別の内容にしてみましょう。
以下のように変更してからファイルを保存すると、サイトの表示もすぐに切り替わってくれます。

<h1>Hello World!</h1>
'Hello, World!'という文字列がタイトルに表示されているページ

ページのリロードなどが必要ないのでとても便利ですね。
このように、特定のフレームワークなどを使用したプロジェクトも簡単に作成することができます。

まとめ

いかがでしたか？今回は、ビルドツールの１つである Viteについて解説を行いました。

フロントエンド開発に欠かせないビルドツールの中でも、Viteは開発をスムーズに進める上で効果的な機能がたくさん含まれています。
プロジェクトのビルドだけでなく、開発に必要な周辺環境の整備や、コード修正における効率性の向上にも貢献してくれる便利なツールです。

ぜひ、Viteを実際に使用して、その性能を確かめてみてください。

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。

     

Programmingカテゴリの最新記事