More than 1 year has passed since last update.

Windows11 に Node.js インストール(nvm-windows利用), JavaScript実行, React 環境構築(VSCode)

Last updated at 2023-10-01Posted at 2023-08-24

Windows11 に Node.js インストールして JavaScript 実行、React環境構築をやってみる
以前、Node.js を通常インストールしたがバージョン管理の必要が出てきたので nvm-windows より Node のバージョン管理できるようにしてたときのメモです
MSのドキュメントにある Windows での NodeJS のインストールを参考にしてます

やることは大雑把にこんなところ

Node.js アンインストール
Node.js(nvm-windows) インストール
Node.js で JavaScript実行(簡単なHTTPサーバたてる)
React環境構築(VSCode)

コマンドプロンプト or Powrshell を使う時は「管理者として実行」で起動する

Node.js アンインストール

MSのドキュメントよりOSに Node.js 入ってる場合はアンインストールを推奨してる
環境変数とか残ったままだとハマりそうなのでアンインストールしておきます

現状の Node.js の存在確認　※無ければインストールに進んでOK！
コマンドプロンプト or Powrshell で以下を入力して確認
※バージョンが出力された場合、有のため次からの作業を実施
```
node -v
```
Node のキャッシュをクリア
コマンドプロンプト or Powrshell で以下を入力(警告は出ても問題なし)
```
npm cache clean --force
```
[プログラムの追加と削除] よりアンインストールを実行
上がってくるダイアログに従い進める、許可などははいを選択

Node関連のフォルダを削除
コマンドプロンプトで以下を入力して削除
＃自分の環境では下から2番目のフォルダのみ残ってました．．．

rmdir /s/q "C:\Program Files (x86)\Nodejs"
rmdir /s/q "%USERPROFILE%\AppData\Roaming\npm"
rmdir /s/q "%USERPROFILE%\AppData\Roaming\npm-cache"
rmdir /s/q "%APPDATA%\npm"
rmdir /s/q "%APPDATA%\npm-cache"
rmdir /s/q "%USERPROFILE%\.npmrc"
rmdir /s/q "%USERPROFILE%\AppData\Temp\npm-cache"
rmdir /s/q "%USERPROFILE%\AppData\Local\Temp\npm-cache"

環境変数(システム、ユーザ) の PATH よりNode関連の参照を削除
システム環境変数の編集を開き、環境変数 PATHを確認し、node, npm への参照が無いことを確認
参照が残っていれば削除
＃自分の環境では参照はなかったです！
Node.js のアンインストール確認
コマンドプロンプトで以下を入力して何も見つからなければアンイストール完了
見つかった場合、そのディレクトリを削除
```
where node
```

Node.js(nvm-windows) インストール

nvm-windows インストール (v1.1.11)

以下より nvm-setup.zip をダウンロード
https://github.com/coreybutler/nvm-windows/releases
解凍して nvm-setup.exe 実行してインストール
画面に従い進める、許可などは確認して同意、インストール場所とか選んでインストール
＃こだわりなければデフォルトで進んでOK
インストール確認
コマンドプロンプト or Powrshell で以下を入力してバージョンが出力されればOK
※コマンドプロンプト or Powrshell はインストール後再起動が必要
```
nvm -v
```

Node.js インストール (v18.17.1 2023/8/24時点の最新LTS, npm v9.6.7)

Node.js の最新LTS(安定板)バージョン確認
コマンドプロンプト or Powrshell で以下を入力して最新バージョン確認
```
nvm list available
```
Node.js の最新LTS(安定板)インストール
コマンドプロンプト or Powrshell で以下を入力してインストール
＃nvm install //インストールするバージョン指定
```
nvm install 18.17.1
```
インストール確認
コマンドプロンプト or Powrshell で以下を入力して取得したバージョンが出力されればOK
```
nvm ls
```
使用するNode.js 設定
コマンドプロンプト or Powrshell で以下を入力して使用する Node.js 設定
＃nvm use //使用するバージョン指定
```
nvm use 18.17.1
```

使用する Node.js 確認
コマンドプロンプト or Powrshell で以下を入力してバージョン確認

# Node
node --version
# Node Package Manager //念のため。。紐づくバージョンに変わる
npm --version

Node.js で JavaScript実行(HTTPサーバ)

適当なフォルダを作る
C:\nodework
フォルダの中に JavaScript index.js を作る
C:\nodework\index.js

index.js に以下のコードを入力

index.js

// モジュールインポート
const http = require("http");
// HTTPサーバ設定
http.createServer((request, response) => {
    switch (request.url) {
        case '/json':
            response.writeHead(200, { "content-type": "application/json", "charset": "utf-8" });
            response.write("{ text : Hello World }");
            response.end();
            break;
        case '/html':
            response.writeHead(200, { "content-type": "text/html", "charset": "utf-8" });
            response.write("<!doctype html><html><body><h1>Hello World</h1></body></html>");
            response.end();
            break;
        default:
            response.writeHead(200, { "content-type": "text/plain" });
            response.write("Hello World");
            response.end();
    }
}).listen(8888);

コマンドプロンプト or Powrshell で作ったフォルダに移動
```
cd C:\nodework
```
コマンドプロンプト or Powrshell で Node 使って JavaScript 実行
以下のコマンド実行で Node から JavaScript が実行される
```
node index.js
```
＃実行後、サーバを終了したいときは ctrl +c
＃実行すると Windows セキュリティの警告が出るときは気にせずキャンセルでOK
＃他のPCとかデバイスから接続させたいときはアクセス許可するようにする
実行したやつにアクセス
以下にブラウザからアクセスで Hello World が表示されればOK
http://localhost:8888/
http://localhost:8888/json
http://localhost:8888/html

React環境構築

プロジェクト作成

公式の Create a New React App を参考にやってみる

適当なフォルダを作る
C:\reactwork
コマンドプロンプト or Powrshell で作ったフォルダに移動
```
cd C:\reactwork
```
create-react-app よりプロジェクト名を指定して作成
＃my-app のフォルダが作られて開発するプロジェクトになる
＃create-react-app のインストールするか聞かれたら y で続ける
```
npx create-react-app my-app
```
作ったプロジェクトに移動
```
cd my-app
```
作ったプロジェクトを実行
```
npm start
```
ブラウザで以下が上がってくればOK
http://localhost:3000/

※ プロジェクトを最小構成にしたい方はこちら参考

VSCode 設定

VSCode のドキュメントにある Using React in Visual Studio Code を参考にしてます

VSCode から実行

VSCode 起動
作ったプロジェクトのフォルダ開く
[ファイル] - [フォルダーを開く] で作ったプロジェクトのフォルダーを選択する
ターミナル開く
[ターミナル] - [新しいターミナル] を開く
ターミナルよりプロジェクトを実行
```
npm start
```
ブラウザで React http://localhost:3000/ が上がってくればOK

デバック実行

デバック実行ファイル launch.json 作成
[実行デバック]アイコン - [launch.jsonファイル作成します] - [Webアプリ(Chrome)] を選択
launch.json の url のポートを編集 8080 → 3000
ブレイクポイント設定
適当な JS ファイル (例では ./src/index.js ) の止めたい行番号の左側をクリック
React 実行
```
npm start
```
デバック実行
[実行デバック]アイコン - [デバック開始]アイコンをクリック
ブラウザが上がった後にブレイクポイントで止まればOK
※ React 起動中 (npm start したあと) にデバック実行する

Github 連携

Git インストール、他のプロジェクトで連携したことがある人のやり方をメモ程度に．．．
なんかあったときに五月雨でやってるので細かいところ忘れてる．．．
Git インストールとかはこちらが参考になるかも．．．VSCodeからGitHub連携（Win11）：codesandbox

プロジェクト下の .git フォルダ削除(git完全初期化)
コマンドプロンプトで以下を入力して削除
```
rmdir /s/q "C:\reactwork\my-app\.git"
```
VSCode 再起動・プロジェクトフォルダ開く
Github に公開
[ソース管理]アイコン - [Github に公開] - private or public を選択して公開
Github の Webサイトでリポジトリが確認できればOK

Appendix

create-react-app で作った Reactプロジェクトから Hello World (不要ファイル削除)

React きほんとか雑多なメモ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up