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

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

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

必要なものの全体像

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

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

バージョンの選び方：「LTS」（Long Term Support）と書かれたほうを選ぶ。この教材ではサポート中のLTSを使う。Viteの必要バージョンも確認し、Node 22なら22.12以上を使う。

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

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

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

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

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

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

よくある詰まりポイント

「command not found」が出る場合

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

Mac で Permission denied が出る場合

• command -v node で実行ファイルの場所を確認する
• 権限を上げる前に、公式インストーラーで入れ直すか、利用しているバージョン管理ツールの設定を確認する。node -v に sudo は不要

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

• npm.cmd -v を試す。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    # サポート中のLTS。Node 22の場合は22.12以上
npm -v     # バージョン番号が表示される

• 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本で雛形が生成され、ブラウザに最初の画面が表示されるところまでやる。

確認してみる

nodeとnpmの版を控える。実行できないときは実行ファイルの場所と使っているシェルを分けて確認する。

仕様・手順の参照先