はじめに
React や Vite を使い始めようとすると、最初に必要になるのが Node.js です。
しかし Windows 環境では、
-
npmが使えない -
npm create vite@latestが実行できない - PowerShell でエラーが出る
など、インストール前後でつまずきやすいポイントがいくつもあります。（私自身つまずきました）
この記事では、
- 正しい Node.js のダウンロード・インストール手順
- 実際に自分が遭遇したエラーと原因
- ターミナルを閉じてしまったときの復旧方法
を、順序立てて解説します。
対象読者
- Windows を使って Node.js をインストールしたい人
- React / Vite を始めたい初学者
-
npm関連のエラーで困っている人
先に知っておきたいこと
- Node.js をインストールすると node と npm の両方が使える
- Windows では 公式サイトの .msi（LTS版）を使うのが正解
- PATH を手動で触る前に、正しい再インストールが最優先
- PowerShell のエラーは 仕様によるものが多い
Node.js が必要な理由
Vite や React のプロジェクト作成では、以下のコマンドを使います。
npm create vite@latest
npm install
npm run dev
これらはすべて npm（Node Package Manager） を使っています。
➡ つまりNode.js が正しく入っていないと、React 以前に何も始まらないということになります。
Node.js のインストール手順（Windows）
① 公式サイトにアクセス
Node.js 公式サイト
https://nodejs.org/ja/download
② Windows 用「LTS版（.msi）」を選択
下の方にスクロールすると下記のような画面があります
- Windows
- x64
- インストーラー（.msi）
※ zip 版ではなく 必ず .msi を選択します。
③ ダウンロードした .msi を実行
- ダブルクリック
または - 右クリック → 管理者として実行（表示されない場合はダブルクリックでOK）
④ インストール中に確認するポイント（重要）
途中で表示される画面で、以下が チェック（選択）されていることを確認します。
- ✅ Add to PATH
- ✅ Automatically install the necessary tools
※ 上記以外の項目については基本的にデフォルトのままで OK
⑤ インストール完了後、PowerShell を再起動
すでに開いている PowerShell は 一度すべて閉じてから
新しく起動します。
⑥ インストール確認
node -v
npm -v
以下のように 数字が表示されれば成功です。
v24.xx.x
10.x.x
こんなことが起きらどうするの？
【npm create vite@latest が実行できない場合】
よくあるエラー例
npm : 用語 'npm' は、コマンドレット、関数、スクリプト ファイル、
または操作可能なプログラムの名前として認識されません。
原因
- Node.js が未インストール
- インストールに失敗している
- PowerShell を再起動していない
➡ この状態では npm は使えません
解決方法
再インストールや再起動を行う！
【PowerShell で npm が UnauthorizedAccess になる場合】
Node.js は入っているのに、npm だけ動かない場合があります。
npm -v
UnauthorizedAccess
これは PowerShell の実行ポリシーによる仕様です。
解決方法
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
確認が出たら Y を入力して Enter。
再度：
npm -v
数字が出れば解決です。
Vite プロジェクト作成後の作業メモ
開発サーバーを止めてしまった場合
Vite の開発サーバーは ターミナルを閉じると停止します。
ブラウザに何も表示されなくなった場合は、以下で復旧できます。
cd projects
cd react-design
npm run dev
おまけ：アイコンライブラリのインストール例
npm install react-icons
確認：
npm list react-icons
react-design@0.0.0 C:\Users\star_\projects\react-design
└── react-icons@5.5.0
表示されれば OK です。
まとめ
- Node.js のインストールは React 学習の最重要関門
- Windows では 公式 .msi（LTS）＋再起動が正解
- PATH を手動で触る前に、まず再インストール
- npm エラーの多くは PowerShellの仕様
初学者が詰まりやすいポイントですが、
一度越えれば React / Vite の学習が一気に楽になります。
本記事が参考になれば幸いです。