React を学び始めるとき、まず最初にぶつかる壁が「開発環境の準備」です。ブラウザで HTML を開くだけでは、モダンな JavaScript やパッケージ管理、コード整形、ホットリロードといった便利な機能を活用できません。
そこで本記事では、React を快適に学習・開発するための基盤となる Node.js（JavaScript を動かす実行環境）、npm（パッケージ管理ツール）、そして VSCode（無料で高機能なエディタ）の導入と設定を、初心者向けにステップバイステップで丁寧に解説します。
なぜ環境構築が必要か：ブラウザだけではReactは動かない
HTML と JavaScript だけなら、実は ブラウザにファイルを読み込むだけで動作 します。ところが React のようなモダンフレームワークは、次のような理由で「開発環境の準備」が必須になります。
- React本体がライブラリだから
- React はブラウザに最初から入っているわけではありません。
react/react-domというライブラリをインストールして利用する必要があります。- このライブラリを管理するのが npm（パッケージ管理ツール） です。
- 最新のJavaScript（ES6以降）をそのままブラウザでは動かせないから
importやexportといったモジュール構文、最新の文法は古いブラウザでは動きません。- そこで トランスパイル（変換） や バンドル（まとめる作業） が必要になります。
- これを担うのが Vite / webpack といった 開発サーバ です。
- 効率的に学習・開発するため
- React の魅力は「状態を変えると即座に画面に反映される」こと。
- これは ホットリロード（保存した瞬間にブラウザを更新） という仕組みが動いているからです。
- この仕組みも Node.js 上で動く開発サーバが提供しています。
- 品質を保つため
- 大規模になると「インデントがバラバラ」「使っていない変数が残っている」といった問題が出ます。
- そこで Prettier（コード整形） や ESLint（エラーチェック） を組み合わせて自動で改善できます。
- これも Node.js / npm があることで導入できる仕組みです。
Node.jsとは？
Node.js（ノードジェイエス）は、JavaScriptをブラウザの外でも実行できるようにした環境（ランタイム）です。本来JavaScriptは、Webページを動かすためにブラウザの中でしか使えない言語でした。クリックイベントを処理したり、入力フォームをチェックしたりと、フロントエンド（画面側）限定の役割が中心だったのです。
しかし Node.js の登場によって状況は一変しました。Google Chrome のエンジン（V8）を利用し、パソコンやサーバー上でJavaScriptを直接動かせるようになったのです。これによって、ファイル操作やネットワーク通信といった「本来ブラウザではできない処理」も可能になり、JavaScriptはサーバーサイド開発や開発ツールの実行にも広がりました。
React 学習で Node.js が必要になるのは、この「開発ツールを動かす基盤」としての役割があるからです。React 本体はブラウザで動きますが、その前に npm（Node.jsに付属するパッケージ管理ツール） を使って React をインストールしたり、開発サーバ（Viteやwebpack） を起動してホットリロードを効かせたり、Babel で最新のJavaScriptを古いブラウザ向けに変換したりと、多くの作業を Node.js 上で行います。
また、Node.js には大きく2種類のリリースがあります。安定運用を重視した LTS（Long-Term Support）版 と、最新機能を試せる Current 版 です。初めて学ぶ方や実務で使う方は、迷わず LTS を選びましょう。
まとめると、Node.js は「React を含めたモダンフロントエンド開発の土台」となる存在です。ブラウザの外にJavaScriptの世界を広げ、ライブラリ管理から開発サーバの起動まで、学習や実務に欠かせない基盤を提供してくれます。
npmとは？
npm（Node Package Manager）は、JavaScriptのライブラリやツールを管理する仕組みで、Node.js をインストールすると一緒に使えるようになります。React 本体や関連ライブラリは、すべて npm を通して導入します。
npm を使うと、世界中の開発者が公開している膨大なパッケージを簡単に追加でき、手作業でファイルをコピーする必要がありません。その中心となるのが package.json というファイルで、ここに「利用するライブラリ」と「開発コマンド」が記録され、他の人が同じ環境をすぐに再現できるようになります。
また、npm には npx という補助ツールもあり、ライブラリを事前にインストールせずにコマンドを一時的に実行できます。npx create-react-app や npx vite といったプロジェクト作成コマンドがその代表例です。
要するに npm は、React を動かすためのライブラリを導入し、プロジェクト全体を整理・再現可能にする基盤です。React 学習では「npm install」で始まり、「npm run start」などのコマンドで日常的に使うことになります。
Node.js のインストール手順
1. 公式サイトからインストール
- Node.js公式サイト から LTS 版 をダウンロード
- インストーラを実行（基本は「Next」で進める）
- インストール後は再起動すると確実
2. 動作確認
ターミナルを開いて次を実行します。
node -v
npm -vバージョン番号が表示されれば成功です。
VSCode のインストールと日本語化
VSCode（Visual Studio Code） は、Microsoft が提供する無料のソースコードエディタです。軽量で起動が速い一方で、拡張機能によって自由に機能を追加できるのが最大の特徴です。世界中の開発者が利用しており、現在ではフロントエンド開発において事実上の標準的なエディタになっています。
VSCode が React 学習に適している理由はいくつかあります。
- 無料で使える：学生からプロまで誰でも同じ環境を整えられる
- 拡張機能が豊富：Prettier や ESLint、React Snippets など、React 開発に役立つツールをすぐ追加できる
- ターミナルを内蔵：画面を切り替えずに npm コマンドを実行できる
- 日本語化できる：拡張機能で日本語対応でき、初心者でも迷いにくい
- マルチプラットフォーム対応：Windows / macOS / Linux で同じように動作する
単なるテキストエディタではなく、拡張すれば IDE（統合開発環境）並みの機能 を持つのが VSCode の強みです。React 学習を始めるなら、まずはこのエディタを導入して慣れておくのが一番おすすめです。
どの版を選ぶ？
公式サイトでは “Stable（安定版）” と “Insiders（先行版）” が選べます。初心者は Stable を選択してください。
Windows の手順
- 公式サイトで User Installer (x64) をダウンロード。管理者権限が不要でアップデートも自動です。
- セットアップ中のチェックは次が便利：
- 「Add ‘Open with Code’ action to Windows Explorer file context menu」
- 「Add ‘Open with Code’ action to Windows Explorer directory context menu」
- 「Register Code as an editor for supported file types」
- 「Add to PATH」
- インストール完了後、VSCode を起動。
macOS の手順
- 公式サイトから Apple Silicon（Mシリーズ）/ Intel に合った zip をダウンロード。
- 展開した Visual Studio Code.app を Applications フォルダへドラッグ。
- 初回起動時にブロックされる場合は、macOS の「システム設定 > プライバシーとセキュリティ」で「このまま開く」を選択。
日本語化（Language Pack の導入）
- VSCode を起動し、拡張機能ビューを開く（
⌘⇧X/Ctrl+Shift+X）。 - 検索欄に “Japanese Language Pack for Visual Studio Code” と入力し、Microsoft 製の拡張機能を インストール。
- 右下に再読み込み（Reload）を促すボタンが出るので Reload。
- もし英語のままなら、コマンドパレット（
⌘⇧P/Ctrl+Shift+P）を開き、
“Display Language / 言語の表示 / Configure Display Language” を選択 → Japanese (ja) を選んで再起動。
VSCodeおすすめ拡張機能一覧
| 名前 | 機能 | URL |
|---|---|---|
| Prettier – Code formatter | コードを自動整形し、インデントやクォートを統一。保存時自動整形を有効化可能。 | Prettier |
| ESLint | 文法エラーや未使用変数を警告。Prettierと組み合わせて品質管理。 | ESLint |
| ES7+ React/Redux/React-Native snippets | rafce などでReactコンポーネントの雛形を自動生成。入力効率化。 | React Snippets |
| Path Intellisense | ファイルパスを補完。画像やCSSの読み込み時にタイプミスを防止。 | Path Intellisense |
| GitLens — Git supercharged | Gitの履歴を可視化。誰がどこを変更したか確認でき、チーム開発に有効。 | GitLens |
| Auto Import | モジュールやコンポーネントを自動で import。入力忘れ防止。 | Auto Import |
| React Developer Tools for VSCode | コンポーネントツリーを確認できるReact専用デバッグ補助。 | React DevTools |
| Tailwind CSS IntelliSense | Tailwind CSSのクラス名を補完し、色プレビューや構文チェックを提供。 | Tailwind IntelliSense |
| Error Lens | エラーや警告を行内に強調表示。問題を素早く発見して修正できる。 | Error Lens |
VSCode 基本設定：保存時に自動整形（Format on Save）
コードを書いていると、インデントがずれたりクォートの種類が混ざったりして、見た目がバラバラになることがあります。そんなときに役立つのが Prettier という整形ツールです。VSCode ではこれを「保存するたびに自動で整える」ように設定できます。これを有効にしておくだけで、コードの見た目に気を取られず、学習や開発に集中できます。
Format On Save を有効にする手順
- VSCode の設定画面を開きます（
⌘ ,またはCtrl ,）。 - 検索欄に「format on save」と入力します。
- 「Format On Save」にチェックを入れます。
これで保存するたびに自動で整形されるようになります。
Prettier を標準フォーマッタに指定する
複数の整形ツールがあると、どれを使うか迷うことがあります。そこで Prettier を「標準のフォーマッタ」に設定しておきましょう。
- 設定画面で「default formatter」と検索します。
- 値を
esbenp.prettier-vscodeに変更します。
設定ファイルを直接編集する方法
より細かく調整したい場合は、settings.json を直接編集します。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.singleQuote": true,
"prettier.semi": false
}editor.formatOnSave: 保存時に自動整形を有効化editor.defaultFormatter: Prettier を標準の整形ツールに指定prettier.singleQuote: 文字列を'シングルクォート'に統一prettier.semi: 行末のセミコロンを自動で外す
ユーザー設定とワークスペース設定の違い
ユーザー設定は自分のPC全体に適用され、ワークスペース設定は特定のプロジェクトだけに適用されます。チーム開発ではワークスペース設定を使うと、全員が同じルールでコードを書けるので便利です。
はじめての npm コマンド
Node.js をインストールすると一緒に使えるようになるのが npm（パッケージ管理ツール）です。ここでは「最初に触ってみるべきコマンド」をステップ形式で紹介します。これだけで「プロジェクトの箱」を作り、React を導入する準備が整います。
プロジェクトフォルダを作成する
まずは作業用のフォルダを作り、その中に入ります。
mkdir react-practice
cd react-practiceここで作ったフォルダが「あなたのReactプロジェクトの入れ物」になります。
プロジェクトを初期化する
次に npm init コマンドでプロジェクトを初期化します。
npm init -y-y を付けると、質問に答えずに即座に初期設定ファイルが作られます。実行すると package.json というファイルが生成され、ここに「このプロジェクトで使うライブラリ」や「起動コマンド」などが記録されます。
React をインストールする
続いて、React を導入してみましょう。
npm install react react-domすると node_modules フォルダが作られ、中に React 本体と必要なライブラリがダウンロードされます。同時に package.json の中には dependencies という項目が追加され、使用するライブラリが記録されます。
実際のpackage.json：
{
"name": "react-practice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^19.1.1",
"react-dom": "^19.1.1"
}
}ディレクトリ構成：
react-practice % tree -L 2
.
├── node_modules
│ ├── react
│ ├── react-dom
│ └── scheduler
├── package-lock.json
└── package.json
それぞれのフォルダ、ファイルについては下記になります。
| 名前 | 種別 | 役割・説明 |
|---|---|---|
| node_modules | フォルダ | npm がインストールした外部ライブラリが格納される場所。通常は手動で編集せず、npm install で自動生成される。 |
| node_modules/react | フォルダ | React 本体のコード。コンポーネント作成や useState などのフック機能を提供。 |
| node_modules/react-dom | フォルダ | React コンポーネントをブラウザの DOM に描画するための仕組みを提供。ReactDOM.createRoot などで使用される。 |
| node_modules/scheduler | フォルダ | React の内部で使われるタスクスケジューラ。描画を効率化し、UI をスムーズに更新できるようにする。 |
| package-lock.json | ファイル | 依存関係のバージョンを固定するファイル。細かいバージョン番号まで記録し、環境差異を防ぐ。 |
| package.json | ファイル | プロジェクトの設定ファイル。名前やバージョン、依存ライブラリ（dependencies / devDependencies）、npm スクリプトを定義する。 |
ここまでで「React をインストールできる環境」が整いました。実際にブラウザで動かすには、次の記事で紹介する Vite などの開発サーバを使います。
まとめ
本記事では、React を学び始める前に必ず必要となる 開発環境の準備 を丁寧に解説しました。具体的には、まず Node.js をインストールしてブラウザの外でも JavaScript を動かせるようにし、その付属ツールである npm を使ってライブラリや依存関係を管理する方法を学びました。さらに、実際の開発でコードを書くためのエディタとして VSCode を導入し、日本語化や拡張機能の追加、そして保存時に自動整形される設定までを整えました。
ここまでの流れを一言でまとめると「React を快適に学ぶための土台作り」です。これを済ませておけば、次回以降の学習では「エラーでつまずく」「見た目の違いで混乱する」といった余計な悩みが大幅に減り、React の本質的な部分に集中できるようになります。
最後に触れた npm の基本コマンド（npm init -y と npm install react react-dom） によって、React を導入できる最初の一歩を踏み出しました。ただし、まだ「画面にReactを表示する」ことはできません。実際にブラウザで動くアプリを立ち上げるには、開発サーバ（Viteなど） を使う必要があります。
次回の記事では、この準備した環境を使って Vite で最小のReactアプリを起動する手順 を紹介します。ここまでの準備が整っていれば、ほんの数分で「Reactが動く画面」を目にすることができるはずです。
