LoginSignup
5
1
@sueasen

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

Last updated at Posted 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 入ってる場合はアンインストールを推奨してる
環境変数とか残ったままだとハマりそうなのでアンインストールしておきます

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

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

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

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

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

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

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

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

React環境構築

プロジェクト作成

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

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

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

VSCode 設定

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

VSCode から実行

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

デバック実行

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

Github 連携

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

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

Appendix

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

React きほんとか雑多なメモ

5
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
1