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

Windows11 に Node.js インストールして JavaScript 実行、React環境構築をやってみる
以前、Node.js を通常インストールしたがバージョン管理の必要が出てきたので nvm-windows より Node のバージョン管理できるようにしてたときのメモです
MSのドキュメントにある [Windows での NodeJS のインストール](https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-windows) を参考にしてます

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

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

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

# Node.js アンインストール

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

1. 現状の Node.js の存在確認　※無ければインストールに進んでOK！
    コマンドプロンプト or Powrshell で以下を入力して確認
    ※バージョンが出力された場合、有のため次からの作業を実施
    ```Powershell
    node -v
    ```
1. Node のキャッシュをクリア
    コマンドプロンプト or Powrshell で以下を入力(警告は出ても問題なし)
    ```Powershell
    npm cache clean --force
    ```
1. [プログラムの追加と削除] よりアンインストールを実行
    上がってくるダイアログに従い進める、許可などは はい を選択
1. Node関連のフォルダを削除
    コマンドプロンプト で以下を入力して削除
    ＃ 自分の環境では下から2番目のフォルダのみ残ってました．．．
    ```Powershell
    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"
    ```
1. 環境変数(システム、ユーザ) の PATH よりNode関連の参照を削除
    システム環境変数の編集を開き、環境変数 PATHを確認し、node, npm への参照が無いことを確認
    参照が残っていれば削除
    ＃ 自分の環境では参照はなかったです！
1. Node.js のアンインストール確認
    コマンドプロンプト で以下を入力して何も見つからなければアンイストール完了
    見つかった場合、そのディレクトリを削除
    ```Powershell
    where node
    ```

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

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

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

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

1. Node.js の最新LTS(安定板)バージョン確認
    コマンドプロンプト or Powrshell で以下を入力して最新バージョン確認
    ```Powershell
    nvm list available
    ```
1. Node.js の最新LTS(安定板)インストール
    コマンドプロンプト or Powrshell で以下を入力してインストール
    ＃nvm install <version> //インストールするバージョン指定
    ```Powershell
    nvm install 18.17.1
    ```
1. インストール確認
    コマンドプロンプト or Powrshell で以下を入力して取得したバージョンが出力されればOK
    ```Powershell
    nvm ls
    ```
1. 使用するNode.js 設定
    コマンドプロンプト or Powrshell で以下を入力して使用する Node.js 設定
    ＃nvm use <version>  //使用するバージョン指定
    ```Powershell
    nvm use 18.17.1
    ```
1. 使用する Node.js 確認
    コマンドプロンプト or Powrshell で以下を入力してバージョン確認
    ```Powershell
    # Node
    node --version
    # Node Package Manager //念のため。。紐づくバージョンに変わる
    npm --version
    ```

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

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

# React環境構築

## プロジェクト作成

公式の [Create a New React App](https://ja.reactjs.org/docs/create-a-new-react-app.html) を参考にやってみる 

1. 適当なフォルダを作る
    `C:\reactwork`
1. コマンドプロンプト or Powrshell で作ったフォルダに移動
    ```Powershell
    cd C:\reactwork
    ```
1. `create-react-app` よりプロジェクト名を指定して作成
    ＃my-app のフォルダが作られて開発するプロジェクトになる
    ＃create-react-app のインストールするか聞かれたら y で続ける
    ```Powershell
    npx create-react-app my-app
    ```
1. 作ったプロジェクトに移動
    ```Powershell
    cd my-app
    ```
1. 作ったプロジェクトを実行
    ```Powershell
    npm start
    ```
    ブラウザで以下が上がってくればOK
    http://localhost:3000/
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/76e68754-e096-7aed-c917-7bed96574bd5.png)

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

https://qiita.com/sueasen/items/99b25098823d966f1135

## VSCode 設定

VSCode のドキュメントにある [Using React in Visual Studio Code](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial) を参考にしてます

### VSCode から実行

1. VSCode 起動 
1. 作ったプロジェクトのフォルダ開く
    [ファイル] - [フォルダーを開く] で作ったプロジェクトのフォルダーを選択する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/8ab925de-630a-b092-7c82-1d852faa5776.png)
1. ターミナル開く
    [ターミナル] - [新しいターミナル] を開く
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/e7cc4b22-6ed0-1ab4-1256-be9c7c8d6d08.png)
1. ターミナルよりプロジェクトを実行
    ```Powershell
    npm start
    ```
    ブラウザで React `http://localhost:3000/` が上がってくればOK

### デバック実行
1. デバック実行ファイル launch.json 作成
    [実行デバック]アイコン - [launch.jsonファイル作成します] - [Webアプリ(Chrome)] を選択
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/afd99711-8676-9e50-8f48-3b8c919c3ec0.png)
1. launch.json の url のポートを編集 `8080` → `3000`
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/a7b1950d-d12e-f130-9d4f-473542ff05af.png)
1. ブレイクポイント設定
    適当な JS ファイル (例では ./src/index.js ) の止めたい行番号の左側をクリック
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/38d24d28-6ae4-8833-26d4-209e6a346fd0.png)
1. React 実行
    ```Powershell
    npm start
    ```
1. デバック実行
    [実行デバック]アイコン - [デバック開始]アイコン をクリック
    ブラウザが上がった後にブレイクポイントで止まればOK
    ※ React 起動中 (`npm start` したあと) にデバック実行する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/35c2323d-2e7e-16a3-602f-5db40613d507.png)

### Github 連携
Git インストール、他のプロジェクトで連携したことがある人のやり方をメモ程度に．．．
なんかあったときに五月雨でやってるので細かいところ忘れてる．．．
Git インストールとかはこちらが参考になるかも．．．[VSCodeからGitHub連携（Win11）：codesandbox](https://qiita.com/sueasen/items/53dbcd349c7baf8ca39c)

1. プロジェクト下の `.git` フォルダ削除(git完全初期化)
    コマンドプロンプト で以下を入力して削除
    ```Powershell
    rmdir /s/q "C:\reactwork\my-app\.git"
    ```
1. VSCode 再起動・プロジェクトフォルダ開く
1. Github に公開
    [ソース管理]アイコン - [Github に公開] - private or public を選択して公開
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/f2b70db2-9f72-b043-c485-400c4c7a77cd.png)
1. Github の Webサイトでリポジトリが確認できればOK


# Appendix

## create-react-app で作った Reactプロジェクト から Hello World (不要ファイル削除)
https://qiita.com/sueasen/items/99b25098823d966f1135

## React きほんとか雑多なメモ
https://qiita.com/sueasen/items/05b45200f9e3e6a881a3