コンテンツにスキップ

環境構築

React / Next.js の学習を始める前に，開発環境を整えましょう。
ここでは VSCode・Git・Node.js (LTS) を中心に，Windows と macOS の両方で動作する構成を紹介します。前章で学んだフォルダ操作を活かしながら，必要なツールをインストールしていきます。

必要なソフトウェア一覧

  • Git：バージョン管理
  • Node.js 20 以上：JavaScript 実行環境（npm を含む）
  • Visual Studio Code：コードエディタ
  • ターミナル環境：PowerShell / Windows Terminal / macOS Terminal

Note

Windows 利用者は WSL2 (Ubuntu) の導入を強くおすすめします。Next.js を含む多くのツールは Linux 環境での動作が最も安定しています。

Step 1. ターミナルとパッケージマネージャー

Windows

  1. Windows Terminal を Microsoft Store からインストール。
  2. PowerShell を既定のプロファイルに設定。
    WSL を使う場合は Ubuntu を追加しておくと便利です。
  3. オプション：winget（Windows Package Manager）を有効化しておくとソフトのインストールが簡単です。

macOS

  1. 標準の Terminal.app を使用します。
    好みで iTerm2 を入れても構いません。

  2. パッケージマネージャーとして Homebrew をインストールします。

    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Step 2. Git のインストール

winget install --id Git.Git -e
  • 途中でエディタの選択などを聞かれた場合は，特にこだわりがなければ既定値のままで大丈夫です。
  • インストール後，PowerShell で git --version を実行して確認します。

Homebrew を使う場合：

brew install git

インストール後に git --version で確認します。

Step 3. Node.js のインストール

Node.js はバージョンを切り替えられるツールを使うのが便利です。

Windows (WSL を使わない場合)

  1. nvm-windows の最新インストーラーをダウンロード。

  2. インストール後，PowerShell を開き以下を実行。

    nvm install 20
nvm use 20
node -v
npm -v

Windows (WSL2 + Ubuntu 推奨)

  1. 「Windows の機能の有効化」で WSL と仮想マシンプラットフォームを有効化。
  2. Microsoft Store から Ubuntu をインストールし，初回起動でユーザー名とパスワードを設定。

  3. Ubuntu ターミナルで以下を実行。

    sudo apt update
sudo apt install -y curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install 20
nvm use 20
node -v
npm -v

macOS

brew install nvm
mkdir -p ~/.nvm

.zshrc（または .bashrc）に以下を追記し，ターミナルを再起動します。

export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"

その後，以下を実行。

nvm install 20
nvm use 20
node -v
npm -v

Step 4. VSCode のセットアップ

  1. VSCode をインストール。
  2. 起動後，「設定 > 同期」で Microsoft アカウントを紐づけておくとカスタマイズが保存されます。
  3. おすすめ拡張機能：
  4. ESLint：コードの品質チェック
  5. Prettier - Code formatter：コード整形
  6. GitHub Pull Requests and Issues：GitHub 連携
  7. EditorConfig：コードスタイルの統一

Tip

WSL2 を使う場合は「Remote - WSL」拡張機能を入れると，Ubuntu 側のファイルをスムーズに編集できます。

Step 5. 動作確認

  1. 任意のフォルダで以下のコマンドを実行し，サンプルの Next.js アプリを作成します。

    npx create-next-app@latest my-first-next --use-npm --eslint --src-dir --app --ts --tailwind false

    質問にはすべて Enter で既定値を選択して構いません。

  2. ディレクトリへ移動し，開発サーバーを起動します。

    cd my-first-next
npm run dev

  3. ブラウザで http://localhost:3000 を開き，Next.js の初期ページが表示されれば成功です。

  4. サーバーを終了するにはターミナルで Ctrl + C（macOS は ⌃ + C）を押します。

トラブルシューティング

nvm が見つかりません

シェルの設定ファイルが読み込まれていない可能性があります。source ~/.bashrc や source ~/.zshrc を実行してから再度コマンドを試してください。

npm run dev がエラーになる

Node.js のバージョンが古い場合があります。node -v で確認し，20 以上になっているかチェックしましょう。

次のステップ

環境が整ったら，Git・GitHub入門 に進みましょう。
Git をインストールしたばかりの状態から，実際にバージョン管理を体験していきます。