開発環境のセットアップ：Node.js・npm・VS Codeを整える

たける Reactを始めるって言っても、まず何をインストールすればいいんですか？

りこ 必要なのは3つ。Node.js、VS Code、そしてターミナル。順番に入れていきましょう。

必要なものの全体像

Step 1：Node.jsをインストールする

Node.jsの公式サイト（nodejs.org）からインストーラーをダウンロードする。

バージョンの選び方：「LTS」（Long Term Support）と書かれたほうを選ぶ。最新版は安定性が保証されていないことがあるので、学習用途ではLTS一択。

インストール後、ターミナルを開いてバージョンを確認する。

node -v
# v22.x.x のような表示が出れば成功

npm -v
# 10.x.x のような表示が出れば成功

たける 「command not found」ってエラーが出ました。

りこ インストール後にターミナルを再起動した？ PATHが反映されていないことが多い。一度閉じてもう一度開いてみて。

たける あ、出ました！ ターミナルを開きっぱなしにしてました。

よくある詰まりポイント

「command not found」が出る場合

• ターミナルを再起動していない → 一度閉じて開き直す
• インストールが途中で失敗している → インストーラーをもう一度実行する

Mac で Permission denied が出る場合

• sudo を先につけて実行する（sudo node -v）
• ただし、通常のインストールでは sudo は不要なはず。繰り返し必要な場合は環境に問題がある

Windows で PowerShell が「スクリプトの実行が無効」と言う場合

• PowerShell を「管理者として実行」で開き直す
• または Windows Terminal を使う

Step 2：VS Codeをインストールする

VS Codeの公式サイト（code.visualstudio.com）からインストーラーをダウンロードしてインストールする。

おすすめ拡張機能

VS Codeを開いたら、左側のブロックアイコン（拡張機能）から以下をインストールする。

たける 拡張機能って全部入れたほうがいいですか？ なんかいっぱいありますよね。

りこ 最初は上の3つだけでいい。入れすぎると起動が遅くなるし、競合することもある。必要になったら追加していく。

VS Code の便利な設定

VS Code の設定（Cmd + , / Ctrl + ,）を開いて、以下を確認しておく。

• 「Editor: Format On Save」を ON にする：ファイルを保存するたびにPrettierが自動整形する。チームで書き方を統一するのに欠かせない

Step 3：ターミナルの基本操作

コマンドラインに慣れていない場合、最低限これだけ覚えておく。

# 現在いるフォルダのパスを表示
pwd

# フォルダの中身を一覧表示
ls         # Mac / Linux
dir        # Windows

# フォルダを移動
cd フォルダ名
cd ..      # 一つ上のフォルダへ

# フォルダを作成
mkdir フォルダ名

たける ターミナルって怖いイメージがあって……なんか壊れそうで。

りこ 普通の操作では壊れない。恐れているのは `rm -rf /` みたいなコマンドで、今日使うのはそういうものじゃない。何をするコマンドか確認してから実行する習慣をつければ大丈夫。

環境確認チェックリスト

次の第3回（プロジェクト作成）に進む前に確認しておく。

# これが全部通れば準備完了
node -v    # v22以上が表示される
npm -v     # v10以上が表示される

• node -v でバージョンが表示される
• npm -v でバージョンが表示される
• VS Code がインストールされている
• ESLint・Prettier の拡張機能が入っている
• 「Format On Save」が ON になっている

まとめ

• Node.js：Reactのビルドツールを動かすために必要。npmも一緒に入る
• npm：パッケージ（ライブラリ）を管理するツール。npm install でReactをプロジェクトに追加できる
• VS Code：拡張機能でReactの開発体験が格段に上がる
• ターミナルは怖くない。何をするコマンドかを確認してから実行する

次の第3回では、実際にReactプロジェクトを作成する。コマンド1本で雛形が生成され、ブラウザに最初の画面が表示されるところまでやる。