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

Node.js20 LTSサポート終了2026年4月 – 今すぐNode.js22へ移行する方法

Node.js20 LTSのサポートが2026年4月に終了します。セキュリティ脆弱性やパフォーマンス低下を防ぐため、AWS Lambda・Azure Functionsで利用可能なNode.js22への移行手順と事前チェック、CI/CDパイプラインでの自動テスト・ロールバック方法をご紹介します。

: Javascript

モジュールバンドラーと Vite・Webpack・Rollupの比較と移行ガイド

本記事では、モジュールバンドラーの役割と仕組みを説明しつつ、Vite・Webpack・Rollup の最新アーキテクチャやパフォーマンス指標を比較。さらに、実践的な移行手順も紹介します。

: Javascript

JavaScript 非同期処理と実務的エラーハンドリング完全ガイド

Promise と async/await を用いたエラーハンドリングの基礎と、カスタム Error、並列処理、ログ設計まで実務で活かす方法を紹介します。

: Javascript

画像アップロード前に1MB未満はスキップ・拡張子保持の最適圧縮手法と比較

画像サイズが1 MB未満なら圧縮せず拡張子を保持し、処理コストと画質劣化リスクを低減する方法をご紹介します。

: Javascript

React 19 の新フック use() と非同期データ取得ガイド

React 19 の新フック use() は Promise を直接受け取り、Suspense と連携して非同期データ取得を1行で完結させます。本稿では基本概念から実装例、カスタムフックとの組み合わせまで網羅的に紹介します。

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` ファイル）