どうもこんにちは。いつもこだわりが捨てられないこうじです。

今回はみんな大好きViteについて解説していきます！

Laravel環境ではもはや当たり前のように使われているフロントエンドのビルドツール「Vite（ヴィート）」。

「ファイルを保存した瞬間にブラウザが更新される（HMR）」あの快適さ。ぜひLaravel以外でも使いたいですよね？・・・使いたいですよね！そう。使いたいんです！

だけど、いざ「他にも持ち込むぜ！」と意気揚々にやってみたら気づくんですよ・・・。

Laravelの偉大さに。

Laravelって結構というか、かなりめんどくさい部分を裏で勝手にやってくれているので、使う時のハードルはかなり低いです。と言うかLaravel12現在はViteが前提なので、ハードル高いと困るんだけどね（笑

なので、プレーンにViteを使おうとすると、意外とハードルが高くて挫折する事が多いです。

僕もトライしては諦めでやっと形になりました

ので、ReactやAngularなどあらかじめフレームワークに組み込まれている（もしくは対応している）環境では使いやすいこのVite。こいつともっと仲良くなって、色々なところでViteの爆速環境を整えようぜ！って言うのが今回の趣旨です。

あ、今回はシリーズものです＾＾

Vite（ヴィート）とはなんぞや？

これ絶対「ヴァイト」って呼んでる人いる気がする！

Viteは、ひとことで言うと「めちゃくちゃ仕事が速い、次世代のフロントエンド・ビルドツール」です。

Vite | Next Generation Frontend Tooling

外部サイトを開く

Vue.jsの生みの親であるEvan You氏が開発したツールで、フランス語で「速い（ヴィート）」を意味する名前の通り、とにかく動作が爆速なのが最大の特徴！

これまで主流だったツール（Webpackなど）は、開発中にファイルを保存すると「全体」を裏側で再構築していたため、プロジェクトが大きくなると画面が更新されるまでに数秒待たされる…というストレスがありました。

しかしViteは、ブラウザの最新の仕組み（ES Modules）を賢く利用することで、「変更した部分だけを瞬時にブラウザに反映させる」という魔法のような技術を持っています！

これを「HMR（Hot Module Replacement）」と言うんですが、これがもうなんかね。やばいんですよ。ほんとに。

これ体験しちゃうと、もうLaravelはもちろんですが、CakePHP、WordPressなど他の動的サイトはもちろん、フツーに作る静的なHTMLサイトとかでもViteなしでは生きられなくなります。

こいつはマジでやばい

Viteを使うとコーディング中はこう変わります

もうね。パッとなってこう、パッとなるから（語彙力崩壊）

動画だと、保存コマンドをショートカットでやっちゃってるのでちょっとわかりづらいですが、実際には保存した瞬間ブラウザの表示が変わっています。

まずはNode.jsの準備

Viteという便利なツールを動かすためには、「Node.js」をインストールする必要があります。

もし以下のコマンドでバージョンが返ってくる場合はこのステップは必要ありません。
バージョンが返ってこない人はNode.jsをインストールしましょう！

node -v
v24.14.0 <= こう返ってくればOK！

node -v
zsh: command not found: node <= こう返ってきたらインストールされていない

Node.jsの公式サイトにアクセス

Node.jsの公式サイトへアクセスし、「Get Node.js」ボタンを押してください。

Node.js（安定版）をダウンロード

「LTS」と書かれているバージョンをダウンロードします。

わかる人はTerminal（Windowsの人はPower Shell）から進めて大丈夫です。よくわからん人は下にあるインストーラーからインストールするのが確実です。

インストールが完了したら再度先ほどのコマンドを実行してみましょう。

node -v
v24.14.0

npm -v
11.9.0

それぞれのバージョンが表示されれば、準備は完了です！

Viteをインストールしよう！

それでは早速Viteを使った爆速環境を作っていきます。
まずはHMRの偉大さを伝えたいので、今回は単純にインストールを行なってViteが使える環境を整えていきます。

Terminal（Windowsの人はPower Shell）を開き、以下のコマンドを実行していきます。

プロジェクトフォルダを作成

好きな場所にプロジェクトフォルダを作成して移動します。

mkdir vite-static-test
cd vite-static-test

普通にFinderから作ってもOK

Terminalになれない人は普通に作ってもOK

Viteをインストール

以下のコマンドでViteをインストールします。

# パッケージ管理の初期化
npm init -y

# Viteをインストール
npm i -D vite

これでVite自体のインストールは完了しました！

ファイルを構成しよう！

インストールが完了したら、実際に運用していく構成でファイルを作成していきます。

一般的にはsrc ディレクトリにまとめる事が多いので今回はsrcディレクトリに編集していくファイルを構成します。以下のようになるようにファイルを作成して行ってください。

vite-static-test/
 ├─ src/
 │   ├─ index.html （トップページ）
 │   └─ assets/
 │       ├─ css/
 │       │   └─ style.css
 │       └─ js/
 │           └─ main.js
 ├─ node_modules <= 既にあります
 ├─ package.json <= 既にあります
 ├─ package-lock.json <= 既にあります
 └─ vite.config.js

ファイルの中身を準備しよう！

ファイルの中身はなんでもいいんですが、今回は適当にこちらで用意したので、各ファイルにコピペして行ってください！

style.css

body {
  background-color: #333;
  color: #fff;
  font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
  text-align: center;
  padding: 5dvh 5vw;
  transition: all 0.5s;
}

h1 {
  font-size: 4rem;
  color: #ff4500;
  font-weight: normal;
  text-shadow: 2px 2px 4px rgba(255, 69, 0, 0.5);
  transition: all 0.5s;
}

img {
  width: 400px;
  display: block;
  height: auto;
  border-radius: 1rem;
  border: 5px solid #fff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  margin: 3rem auto;
  transition: all 0.5s;
}

p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #ccc;
  margin-bottom: 20px;
}

main.js

先ほどのstyle.cssをインポートします。

import '../css/style.css';

console.log('Vite環境が起動しました！');

index.html

先ほどのmain.jsファイルをtype="module"を付けて読み込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Viteに選ばれし者のサンクチュアリ</title>
  <script type="module" src="/assets/js/main.js"></script>
</head>
<body>

  <h1>僕の鼓動、Viteの脈動。</h1>

  <img src="https://hyp.jp/wp-content/uploads/2026/03/vite-first-guide-sample.webp" alt="Viteに選ばれし男">

  <p>世界がWebpackに縛られている時、<br>僕はViteという名の自由を手に入れた。</p>
  <p>ファイルを保存した瞬間、世界が変わる。<br>それはまるで、僕の歌声が世界に響き渡るように。</p>
  <p>この爆速のHMRこそ、僕にふさわしいステージだ。</p>
  <p>Viteを使っている僕、かっこいい。<br>そう、世界は僕を中心に回っているんだ。</p>
</body>
</html>

これで諸々ファイルの準備が完了しました！

vite.config.jsを整えよう！

Viteはデフォルト（設定ファイルなし）だと「フォルダの直下」を見に行きますが、今回はファイルを src フォルダにまとめて管理しやすくしました。

そのため、「src の中を見てね」という指示を出す必要があります。

プロジェクトの直下（package.jsonと同じ場所）に、先ほどvite.config.jsというファイルを作ったと思うので、そのファイルに以下の3行だけ記述します。

import { defineConfig } from 'vite';

export default defineConfig({
  // 開発サーバー（localhost）のルートをsrcに指定
  root: './src',

  build: {
    // 出力先をプロジェクト直下に指定
    // 基準のディレクトリは「root」です
    outDir: '../dist',

    // ビルド時に古いファイルを消す設定
    emptyOutDir: true,
  }
});

コマンドを簡単に呼び出せるようにする

ついでに、Viteをより簡単に呼び出せるように、package.jsonの"scripts"部分を以下のように書き換えてください。

"scripts": {
  "dev": "vite",
  "build": "vite build"
},

Viteを起動しよう！

お待たせしました！それでは、ターミナルで以下のコマンドを実行してください。

npm run dev

# 以下のような感じのメッセージが出ます

[vite] (client) Re-optimizing dependencies because vite config has changed
Port 5173 is in use, trying another one...

  VITE v8.0.0  ready in 413 ms

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

http://localhost:5173 というURLが表示されるので、このURLをブラウザで開きます。

なんか恥ずかしいページが出てきたら成功です！

ちなみに、単純にViteを立ち上げたい場合は以下のコマンドでもOKです。こちらの方が簡潔なので頻度が高い場合はこっちの方が楽ちんです！

# これでも同じく立ち上がります。
npx vite

index.htmlを編集してみよう！

ファイルの中身を変更して保存すると、リアルタイムでブラウザの方も変更されると思います。

こちらはHMR（ホットリロード）ではなく、ライブリロード（ページ再読み込み）なんですが、これも「毎回ブラウザに行って更新」という作業がなくなるのでとても便利ですよね！

style.cssを編集してみよう！

こちらはViteの真骨頂「HMR（ホットリロード）」です！ページが再読み込みされる事なくスタイルがリアルタイムに適用される感覚は、脳汁ブシャーです。

ビルドしてみよう！

上記での編集はあくまでも制作段階での作業なので、それをそのまま使うことはできません。
なので、編集した内容をビルドして成果物として出力してあげる必要があります。

ビルドは以下のコマンドで行います。

npm run build

# こちらでもOK
npx vite build

すると同じフォルダの中にdistというフォルダが出来上がるので、その中にあるファイル群が完成品となります！

それをそのままサーバー等にアップロードすればそのまま開発時の状態で表示されます。

まとめ

いかがでしたでしょうか？

• スタイルと更新する => ブラウザの更新ボタン

• HTMLを変更する => ブラウザの更新ボタン

これを「当たり前」として作業していた人にはここに対して「なんて非効率なやり方なんだ！」と思うことは少ないと思います。

しかし、Viteを使用したHMRでの爆速開発に慣れてしまうと、

なんでページが勝手に更新されないんだ！

と、「お、何様だお前は！」発言が当たり前になります（笑

今回は「まずはHMRの恩恵を体験してもらう」事が目的だったので、実際に使ってみると「あれ？思ったような使い方ができないぞ？」となってくると思います。

そしてLaravelなどのフレームワーク上で使ってる人も、「よしWordPressでもViteしちゃうぞ！」と思って、いざ入れてみようと思うと「ん？とは言うものの、設定がよくわからないぞ？」と意外と設定周りで沼ります。

次は、より実践的な静的なサイトで使うためのカスタマイズも含めてご紹介しようかと思ってます。

静的なサイトでの使用は、3回くらいトライしては諦めた環境パターンです