Node.js v20 インストールと Vite 開発環境構築手順

2026年4月20日

お得なお知らせ

スポンサードリンク

AI時代のキャリア構築

プログラミング学習、今日から動き出す

「何から始めるか」で止まっている人こそ、無料説明会や本で自分に合うルートを30分で確定できます。

Enjoy Tech!｜月額制でWeb系に強い▶ (Kindle本)ＩＴエンジニアの転職学｜後悔しないキャリア戦略▶

▶ AIコーディング環境なら実践Claude Code入門（Amazon）が実務で即使える入門書です。Amazonベストセラーにも選ばれていますよ。

Contents

1 Node.js のインストールとバージョン確認
- 1.1 1‑1. なぜ Node.js 20 LTS が推奨されるのか
- 1.2 1‑2. 公式インストーラで Node.js 20 を取得する手順
2 pnpm のインストール手順
3 Vite CLI でプロジェクトを作成する
- 3.1 2‑1. Vite の最新 CLI を取得（グローバルインストールは不要）
  - 3.1.1 対話形式の選択肢例
- 3.2 2‑2. プロジェクト作成直後に行うべきこと（pnpm 対応）
4 package.json と依存パッケージのインストール
- 4.1 3‑1. 基本的な package.json（Vite 5 系を例示）
- 4.2 3‑2. 依存パッケージのインストール
5 開発サーバー起動とホットリローディング確認
- 5.1 4‑1. サーバー起動コマンド
- 5.2 4‑2. HMR（Hot Module Replacement）の動作確認手順
6 Vite 設定例（エイリアス・環境変数）
- 6.1 5‑1. パスエイリアスの設定
- 6.2 5‑2. 環境変数の管理（.env ファイル）
7 本番ビルドと主要静的ホスティングへのデプロイ
8 よくある質問とトラブルシューティング
9 まとめ

スポンサードリンク

Node.js のインストールとバージョン確認

1‑1. なぜ Node.js 20 LTS が推奨されるのか

項目	内容
LTS（Long Term Support）	Node.js は公式サイトで「Current」「LTS」の2系統を提供。LTS バージョンは 30 か月以上のセキュリティ・バグ修正が保証されます。（※2024‑04 時点の公式スケジュール: https://nodejs.org/ja/about/releases/）
現在の LTS	`v20.x` 系（例: v20.12.0）が最新 LTS です。Node.js 21 は「Current」扱いで、LTS になるまでに数か月かかります。
Vite が要求する最低バージョン	Vite の公式ドキュメントは「Node.js ≥ 14.18」でも動作しますが、ESM の安定化や `npm`/`pnpm` のパフォーマンス向上の観点から v20 以上が実務的に最適です。

根拠：Node.js 公式サイトの「Releases」ページに LTS ステータスとサポート期限が明記されています。

1‑2. 公式インストーラで Node.js 20 を取得する手順

手順	内容
1	https://nodejs.org/ja にアクセスし、ページ上部の緑色ボタン「LTS」→「macOS Installer」「Windows Installer」等を選択してダウンロード。
2	ダウンロードした `.pkg`（mac）または `.msi`（win）を実行し、画面の指示に従ってインストール。インストーラは自動で `PATH` へ追加します。
3	インストール完了後、ターミナル／コマンドプロンプトで以下を実行してバージョンを確認。

# Node.js のバージョン確認
node -v   # =&gt; v20.12.0 （例）

# npm（Node に同梱）のバージョン確認
npm -v    # =&gt; 10.x 系

# pnpm がインストール済みかチェック（後述の手順でインストール可能）
pnpm -v   # インストールされていなければ「command not found」と表示

# Node.js のバージョン確認

node -v # => v20.12.0 （例）

# npm（Node に同梱）のバージョン確認

npm -v # => 10.x 系

# pnpm がインストール済みかチェック（後述の手順でインストール可能）

pnpm -v # インストールされていなければ「command not found」と表示

ポイント：node -v と npm -v が期待通りの数値を返せば、次のステップへ進めます。

pnpm のインストール手順

pnpm は 高速かつディスク使用量が少ない パッケージマネージャで、Vite プロジェクトでも公式に推奨されています。以下は Node.js がインストール済みの前提です。

# npm 経由で pnpm をグローバルインストール（1 回だけ実行すれば OK）
npm i -g pnpm

# インストール確認
pnpm -v   # 例: 9.0.0

# npm 経由で pnpm をグローバルインストール（1 回だけ実行すれば OK）

npm i -g pnpm

# インストール確認

pnpm -v # 例: 9.0.0

補足：-g オプションは「グローバル」インストールを意味し、以降どのディレクトリでも pnpm コマンドが利用可能になります。

Vite CLI でプロジェクトを作成する

2‑1. Vite の最新 CLI を取得（グローバルインストールは不要）

パッケージマネージャ	実行コマンド
npm	`npm create vite@latest my-vite-app`
pnpm	`pnpm dlx vite@latest my-vite-app`

create vite@latest は実行時に最新バージョンを取得し、対話式でプロジェクト雛形を作ります。
グローバルインストール（例: npm i -g create-vite）は 非推奨 です。

対話形式の選択肢例

質問	推奨回答
Project name	任意（例: `my-vite-app`）
Select a framework	`vanilla` （純粋 JavaScript）または `vanilla-ts`（TypeScript）
Select a variant	`JavaScript` / `TypeScript`

ポイント：vanilla はフレームワーク非依存の最小構成です。React/Vue が必要な場合は別途選択してください。

2‑2. プロジェクト作成直後に行うべきこと（pnpm 対応）

ディレクトリへ移動
bash cd my-vite-app
依存パッケージをインストール（npm でも可）
bash # pnpm 推奨 pnpm install

# npm を使う場合は代わりに以下 # npm install -pnpm install は node_modules/.pnpm 配下にパッケージをハードリンクで共有し、インストール速度が 2〜3 倍になるケースが多いです。

注意：上記手順は必ず実行してください。pnpm install を省くと npm run dev 時に「Cannot find module …」エラーが発生します。

`package.json` と依存パッケージのインストール

3‑1. 基本的な `package.json`（Vite 5 系を例示）

バージョン番号は「最新安定版」を指す ため、固定せずに caret (^) を付与しています。実際の数値はインストール時点で決まります。

{
  &quot;name&quot;: &quot;my-vite-app&quot;,
  &quot;version&quot;: &quot;0.0.1&quot;,
  &quot;type&quot;: &quot;module&quot;,                     // ESモジュールを明示的に使用
  &quot;scripts&quot;: {
    &quot;dev&quot;: &quot;vite&quot;,                      // 開発サーバー起動
    &quot;build&quot;: &quot;vite build&quot;,              // 本番ビルド
    &quot;preview&quot;: &quot;vite preview&quot;           // ビルト後ローカルプレビュー
  },
  &quot;dependencies&quot;: {},
  &quot;devDependencies&quot;: {
    &quot;vite&quot;: &quot;^5.0.0&quot;
  }
}

{

"name": "my-vite-app",

"version": "0.0.1",

"type": "module", // ESモジュールを明示的に使用

"scripts": {

"dev": "vite", // 開発サーバー起動

"build": "vite build", // 本番ビルド

"preview": "vite preview" // ビルト後ローカルプレビュー

"dependencies": {},

"devDependencies": {

"vite": "^5.0.0"

}

type: "module" を設定すると、.js ファイルがデフォルトで ES モジュールとして扱われます。
scripts が正しく定義されていれば、以下のコマンドだけで開発・ビルドが可能です。

3‑2. 依存パッケージのインストール

# pnpm（推奨）
pnpm install   # すべての devDependencies と dependencies がインストールされます

# npm を使う場合
npm install

# pnpm（推奨）

pnpm install # すべての devDependencies と dependencies がインストールされます

# npm を使う場合

npm install

ポイント：インストールが完了したら node_modules/.pnpm ディレクトリが作成され、パッケージはロックファイル（pnpm-lock.yaml）で正確に管理されます。

開発サーバー起動とホットリローディング確認

4‑1. サーバー起動コマンド

# pnpm の場合
pnpm run dev

# npm の場合
npm run dev

# pnpm の場合

pnpm run dev

# npm の場合

npm run dev

実行例（Vite 5 系の場合）：

  VITE v5.0.0  ready in 280 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

VITE v5.0.0 ready in 280 ms

➜ Local: http://localhost:5173/

➜ Network: use --host to expose

4‑2. HMR（Hot Module Replacement）の動作確認手順

ブラウザで http://localhost:5173/ にアクセス。
プロジェクトの src/main.js（または main.ts）を開き、次のように書き換えて保存。

js // src/main.js document.querySelector('#app').innerHTML = '<h1>Hello Vite! 🎉</h1>';

保存直後にブラウザが自動リロードし、<h1> が即座に反映されれば HMR が正常です。

ヒント：Vite はデフォルトでポート 5173 を使用します。競合した場合は pnpm run dev -- --port 3000 のようにオプションを付与できます。

Vite 設定例（エイリアス・環境変数）

5‑1. パスエイリアスの設定

長い相対パスを書きたくないときは vite.config.js にエイリアスを追加します。

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@utils':   path.resolve(__dirname, './src/utils'),
      '@components': path.resolve(__dirname, './src/components')
    }
  }
});

// vite.config.js

import { defineConfig } from 'vite';

import path from 'path';

export default defineConfig({

resolve: {

alias: {

'@utils': path.resolve(__dirname, './src/utils'),

'@components': path.resolve(__dirname, './src/components')

}

});

使用例

// src/main.js
import { formatDate } from '@utils/date';
import Header from '@components/Header.vue';

console.log(formatDate(new Date()));

// src/main.js

import { formatDate } from '@utils/date';

import Header from '@components/Header.vue';

console.log(formatDate(new Date()));

ポイント：エイリアスは tsconfig.json の paths とも同期させると、IDE が正しく補完してくれます。

5‑2. 環境変数の管理（`.env` ファイル）

Vite は .env* 系ファイルを自動で読み込み、import.meta.env 経由でアクセス可能です。クライアント側に露出させる変数は必ず VITE_ プレフィックスを付与してください。

# .env（開発共通）
VITE_API_BASE=https://dev-api.example.com
VITE_FEATURE_FLAG=true

# .env（開発共通）

VITE_API_BASE=https://dev-api.example.com

VITE_FEATURE_FLAG=true

# .env.production（本番ビルド時に上書きされる）
VITE_API_BASE=https://api.example.com

# .env.production（本番ビルド時に上書きされる）

VITE_API_BASE=https://api.example.com

コード側の参照例

// src/main.js
const apiBase = import.meta.env.VITE_API_BASE;
fetch(`${apiBase}/posts`)
  .then(res =&gt; res.json())
  .then(data =&gt; console.log(data));

// src/main.js

const apiBase = import.meta.env.VITE_API_BASE;

fetch(`${apiBase}/posts`)

.then(res => res.json())

.then(data => console.log(data));

注意点：VITE_ プレフィックスが付いていない環境変数はビルド時に除外され、クライアントコードからは参照できません。

本番ビルドと主要静的ホスティングへのデプロイ

6‑1. ビルドコマンドと成果物

# pnpm の場合
pnpm run build

# npm の場合
npm run build

# pnpm の場合

pnpm run build

# npm の場合

npm run build

出力先：dist/ ディレクトリに index.html, assets/*.js, assets/*.css が生成されます。
最適化ポイント：Vite は内部で ESBuild（JS/TS の高速トランスパイル）と Rollup（コード分割・ツリーシェイキング）を組み合わせ、ビルド時間とバンドルサイズの両方を最小化します。

6‑2. 静的ホスティングサービスへのデプロイ例

サービス	手順概要
Vercel	1️⃣ GitHub にリポジトリをプッシュ → Vercel ダッシュボードで「New Project」→対象リポジトリ選択 2️⃣ ビルドコマンド `pnpm run build`、出力ディレクトリ `dist` を設定 3️⃣ デプロイ完了後に自動でプレビュー URL が発行
Netlify	1️⃣ 「New site from Git」→GitHub リポジトリ接続 2️⃣ ビルドコマンド `pnpm run build`、公開ディレクトリ `dist` を指定 3️⃣ デプロイ後にカスタムドメインや環境変数を UI から設定
Cloudflare Pages	1️⃣ Cloudflare の「Pages」→「Create a project」 2️⃣ GitHub リポジトリ接続 →ビルド設定は同様に `pnpm run build`、出力 `dist/` を指定 3️⃣ 必要に応じて Workers や KV と連携可能

共通ポイント：すべてのサービスで「環境変数」は UI から設定でき、ビルド時に自動注入されます。

6‑3. デプロイ後の確認項目

HTTPS が有効か（自動で Let’s Encrypt が適用されることが多い）
キャッシュヘッダー（Cache-Control: max-age=31536000, immutable 等）が期待通りか
環境変数の反映：ブラウザコンソールで import.meta.env.VITE_API_BASE が本番 URL になっていることを確認

よくある質問とトラブルシューティング

質問	回答
Node.js のバージョンが古い	`node -v` が v20 未満の場合は、公式インストーラか nvm（Node Version Manager）で最新版 LTS を再インストールしてください。
pnpm が `command not found`	npm からグローバルにインストールできない環境では、npx 経由で一時的に実行可能です： `npx pnpm dlx vite@latest my-app`
`npm run dev` でポートが競合している	`pnpm run dev -- --port 3000` のようにオプションを付与すれば別ポートで起動できます。
ビルド時に「Failed to resolve import」エラーが出る	エイリアス設定や `tsconfig.json` の `paths` が一致しているか確認し、`pnpm install` 後に再度ビルドしてください。
環境変数がクライアント側で undefined になる	Vite では `VITE_` プレフィックスが必須です。`.env*` ファイルの記述ミスやスペースに注意してください。

まとめ

Node.js 20 LTS を公式インストーラで導入し、バージョンを確認。
pnpm をグローバルインストールして高速依存管理環境を整える。
pnpm dlx vite@latest（または npm create vite@latest）で最新 Vite CLI を取得し、対話式にプロジェクトを作成。
必ず pnpm install で依存パッケージをインストールし、package.json のスクリプトが正しく設定されていることを確認。
pnpm run dev で開発サーバーと HMR が機能するかテスト。
エイリアスや .env ファイルなど実務で頻出する設定例をプロジェクトに組み込む。
pnpm run build → dist/ を Vercel・Netlify・Cloudflare Pages へデプロイすれば、数クリックで本番環境が完成。

次のステップ：このガイド通りにローカル環境を構築したら、実際に小さな UI コンポーネントや API 呼び出しコードを書き込み、Vite の開発体験を肌で感じてみましょう。疑問が生じたら本稿の「よくある質問」セクションか公式ドキュメント（https://vite.dev）をご参照ください。

作成日: 2024‑04‑20
参照情報: Node.js LTS スケジュール、Vite 公式ガイド、pnpm ドキュメント

スポンサードリンク

お得なお知らせ

スポンサードリンク

AI時代のキャリア構築

プログラミング学習、今日から動き出す

「何から始めるか」で止まっている人こそ、無料説明会や本で自分に合うルートを30分で確定できます。

Enjoy Tech!｜月額制でWeb系に強い▶ (Kindle本)ＩＴエンジニアの転職学｜後悔しないキャリア戦略▶

▶ AIコーディング環境なら実践Claude Code入門（Amazon）が実務で即使える入門書です。Amazonベストセラーにも選ばれていますよ。

-Javascript

comment コメントをキャンセル

: Javascript

ES2025 新機能まとめ：Iterator Helpers・Promise.try・Import Attributes

ES2025 で導入された Iterator Helpers や Promise.try などの新機能とその活用方法をわかりやすく解説します。

: Javascript

ES2023 新機能完全解説：findLast・Immutable メソッド活用ガイド

ES2023 が正式採択された2023‑06‑22以降、findLast 系や immutable 配列操作メソッドが追加され、コードの可読性とバグ防止に直結します。本記事では実務で即使える具体例を紹介します。

: Javascript

AIコード補完でJavaScript開発を高速化｜2026年最新ツール5選

本記事ではAIコード補完の概要と、JavaScript開発に最適な5つのツール（GitHub Copilot・Cursor・Codeium・Tabnine・Amazon CodeWhisperer）を比較し、VS Code と WebStorm への導入手順やセキュリティ対策を紹介します。

: Javascript

JavaScript async/await エラーハンドリング完全ガイド【Node.js 22・Express】

本記事では async/await を用いた例外処理のベストプラクティスを、トップレベルハンドリングや fetch のタイムアウト、並列処理、カスタムエラーまで網羅的に紹介します。実務で即活用できるチェックリストも提供。

: Javascript

JavaScript プロトタイプ継承の実装例とベストプラクティス

JavaScript のプロトタイプチェーンを利用した継承方法を3パターン紹介し、実務での安全な実装とデバッグ法を示します。

Java 17 LTS 新機能徹底解説｜移行と実務活用ガイド

Go の概要と2024年注目ポイント｜インストール・学習ロードマップ完全ガイド

Node.js v20 インストールと Vite 開発環境構築手順

Node.js のインストールとバージョン確認

1‑1. なぜ Node.js 20 LTS が推奨されるのか

1‑2. 公式インストーラで Node.js 20 を取得する手順

pnpm のインストール手順

Vite CLI でプロジェクトを作成する

2‑1. Vite の最新 CLI を取得（グローバルインストールは不要）

対話形式の選択肢例

2‑2. プロジェクト作成直後に行うべきこと（pnpm 対応）

package.json と依存パッケージのインストール

3‑1. 基本的な package.json（Vite 5 系を例示）

3‑2. 依存パッケージのインストール

開発サーバー起動とホットリローディング確認

4‑1. サーバー起動コマンド

4‑2. HMR（Hot Module Replacement）の動作確認手順

Vite 設定例（エイリアス・環境変数）

5‑1. パスエイリアスの設定

5‑2. 環境変数の管理（.env ファイル）

本番ビルドと主要静的ホスティングへのデプロイ

6‑1. ビルドコマンドと成果物

6‑2. 静的ホスティングサービスへのデプロイ例

6‑3. デプロイ後の確認項目

よくある質問とトラブルシューティング

まとめ

1‑1. なぜ Node.js 20 LTS が推奨されるのか

1‑2. 公式インストーラで Node.js 20 を取得する手順

`package.json` と依存パッケージのインストール

3‑1. 基本的な `package.json`（Vite 5 系を例示）

5‑2. 環境変数の管理（`.env` ファイル）