- DAY 11：React開発環境 前半 ― 「Reactを動かす土台」を理解する回
- Node.jsの役割 ― 「ブラウザの外でJavaScriptを動かすエンジン」
- npm ― 「Reactやライブラリをインストールするための道具」
- ReactプロジェクトとVite ― 「ひな型を一気に作るジェネレーター」
- 開発サーバー ― 「ブラウザとコードをつなぐリアルタイムな橋」
- プロジェクト構成 ― 「どこに何があるか」をざっくり理解する
- ゴールの確認 ― 「Reactプロジェクトを起動できる」
- DAY 11：React開発環境 中盤 ― 実際に「プロジェクトを作って起動する」流れをつかむ
- 準備と「ViteでReactプロジェクトを作る」ステップ
- npmで依存ライブラリをインストールし、開発サーバーを起動する
- プロジェクト構成を「触れるレベル」で理解する
- DAY 11：React開発環境 中盤のまとめ
- DAY 11：React開発環境 後半 ― 「安心して触れる開発環境」にするための視点を持つ
- よくあるつまずきポイントを「怖くないもの」に変える
- プロジェクト構成を「安心して触れる」レベルまで理解する
- 開発環境を「安全で拡張しやすい土台」として見る
- DAY 11：React開発環境 後半のまとめ
DAY 11：React開発環境 前半 ― 「Reactを動かす土台」を理解する回
DAY 11から、いよいよ React本体に入っていきます。 まずは「Reactを書く前に絶対に知っておきたい開発環境」の話を、前半でじっくり整理していきます。
この回のゴールは 「Reactプロジェクトを起動できるようになること」 です。 そのために、次のキーワードをステップバイステップでかみ砕いていきます。
- Node.jsの役割
- npm
- Reactプロジェクト
- Vite
- 開発サーバー
- プロジェクト構成
srcpackage.json
Node.jsの役割 ― 「ブラウザの外でJavaScriptを動かすエンジン」
JavaScriptはもともと「ブラウザの中の言語」
JavaScriptはもともと、ブラウザの中で動くために作られた言語です。 HTMLと一緒に読み込まれて、Webページに動きをつけるために使われてきました。
しかし、Reactのようなモダンなフロントエンド開発では、
- 開発中にコードを変換したり
- まとめたり（バンドルしたり）
- 自動でブラウザを更新したり
といった「裏方の処理」がたくさん必要になります。
Node.jsとは何か
Node.jsは、JavaScriptを「ブラウザの外」で動かすための仕組みです。
- ブラウザ → 画面を表示する場所
- Node.js → 開発ツールやサーバーを動かす場所
というイメージを持つと分かりやすいです。
Reactの開発環境では、
- 開発サーバーを動かす
- コードを変換する（トランスパイル）
- 依存ライブラリを管理する
といった処理を、Node.jsの上で動かしています。
重要ポイント：
- Node.jsは「Reactを動かすための裏方エンジン」です。
- ブラウザで動くReactアプリを作るために、開発中はNode.jsが必須になります。
npm ― 「Reactやライブラリをインストールするための道具」
npmとは
npmは、Node.jsに付属している「パッケージ管理ツール」です。 簡単に言うと、
- React本体
- Vite
- その他のライブラリ
などを インストールしたり、更新したりするためのコマンド です。
よく使うnpmコマンド
React開発でよく使うのは、次のようなコマンドです。
bash
npm init
npm install react
npm install
npm run dev
npm install→package.jsonに書かれているライブラリをまとめてインストールします。npm run dev→package.jsonに定義された「dev」というスクリプトを実行します。 → 多くの場合、開発サーバーが起動します。
重要ポイント：
- npmは「Reactプロジェクトのライブラリを管理するための道具」です。
- コマンドラインから操作するので、最初は少し緊張するかもしれませんが、 よく使うコマンドはすぐに慣れていきます。
ReactプロジェクトとVite ― 「ひな型を一気に作るジェネレーター」
Reactプロジェクトとは
Reactプロジェクトとは、Reactアプリを作るための「フォルダ一式」のことです。
中には、
- React本体
- 開発用の設定
srcフォルダ（ソースコード）package.json（設定と依存ライブラリ）
などがまとめて入っています。
これを 毎回手作業で作るのは大変 なので、 「ひな型を自動生成してくれるツール」を使います。
Viteとは
Vite（ヴィート）は、モダンなフロントエンド開発のためのツールで、
- Reactプロジェクトのひな型を作る
- 開発サーバーを起動する
- 高速に画面を更新する
といった役割を持っています。
React 18対応の開発では、 ViteでReactプロジェクトを作るのがとても一般的になっています。
ViteでReactプロジェクトを作るイメージ
コマンドラインで次のように入力するイメージです。
bash
npm create vite@latest my-react-app -- --template react
my-react-app→ プロジェクトのフォルダ名--template react→ React用のひな型を使う指定
このコマンドを実行すると、
- React用のフォルダ構成
- 必要な設定ファイル
- 最初のサンプルコード
が一気に生成されます。
重要ポイント：
- Viteは「Reactプロジェクトのスタートライン」を作ってくれるツールです。
- 自分でゼロから設定を書く必要はなく、「ひな型」から始められるので挫折しにくくなります。
開発サーバー ― 「ブラウザとコードをつなぐリアルタイムな橋」
開発サーバーとは
Reactの開発中には、コードを保存するたびに、
- 自動でブラウザを更新してくれる
- エラーがあれば画面に表示してくれる
といった仕組みがあると、とても便利です。
この役割を担っているのが 開発サーバー です。
Viteを使ったReactプロジェクトでは、次のようなコマンドで開発サーバーを起動します。
bash
npm run dev
これを実行すると、
- ターミナルに「ローカルサーバーのURL」が表示される 例：
http://localhost:5173 - ブラウザでそのURLを開くと、Reactアプリが表示される
- コードを編集して保存すると、画面が自動で更新される
重要ポイント：
- 開発サーバーは「Reactのコード」と「ブラウザ」をリアルタイムでつなぐ存在です。
npm run dev→ ブラウザでURLを開く → コードを書いて保存 → 画面が更新される という流れが、React開発の基本サイクルになります。
プロジェクト構成 ― 「どこに何があるか」をざっくり理解する
Viteで作ったReactプロジェクトの中身を、ざっくり見てみます。
package.json ― プロジェクトの「設定と依存ライブラリの一覧」
package.jsonは、Reactプロジェクトの「設定ファイル」です。
中には、
- プロジェクト名
- 使用しているライブラリ（React、Viteなど）
- 実行できるスクリプト（
npm run devなど）
が書かれています。
例：
json
{
"name": "my-react-app",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "...",
"react-dom": "..."
},
"devDependencies": {
"vite": "..."
}
}
重要ポイント：
scripts.devにviteが書かれているので、npm run devで開発サーバーが起動します。dependenciesに React関連のライブラリが書かれています。
srcフォルダ ― Reactの「本体コード」が入る場所
srcフォルダには、実際に自分が書くReactコードが入ります。
代表的なファイルは次のようなものです。
main.jsx→ Reactアプリをブラウザに「差し込む」ための入口App.jsx→ 最初のReactコンポーネント（画面の中身）
例：
// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// src/App.jsx
function App() {
return <h1>Hello React!</h1>;
}
export default App;
重要ポイント：
srcフォルダが「自分が編集する場所」です。- 最初は
App.jsxを書き換えていくところから始めると分かりやすいです。
ゴールの確認 ― 「Reactプロジェクトを起動できる」
DAY 11の前半のゴールは、次の状態をイメージできることです。
- Node.js → React開発の裏方エンジン
- npm → ReactやViteをインストール・実行するためのコマンド
- Vite → Reactプロジェクトのひな型を作り、開発サーバーを動かすツール
- 開発サーバー →
npm run devで起動し、ブラウザとコードをリアルタイムでつなぐ package.json→ プロジェクトの設定と依存ライブラリの一覧srcフォルダ → Reactの本体コードを書く場所- Reactプロジェクトを起動できる → コマンドを実行して、ブラウザにReactアプリが表示される
この「土台」が分かっていると、 次のDAYから始まる Reactコンポーネント・State・イベント処理 の学習が、 ぐっとスムーズになります。
中盤・後半では、
- 実際のコマンド入力の流れ
- よくあるエラーとその考え方
- セキュリティ・安全性の観点から見た開発環境の注意点
なども絡めながら、 「React開発環境」をより実践的なレベルに近づけていく予定です。
DAY 11：React開発環境 中盤 ― 実際に「プロジェクトを作って起動する」流れをつかむ
DAY 11の中盤では、前半で学んだキーワードを 「実際の手順」に落とし込む時間にしていきます。 ゴールは変わらず 「Reactプロジェクトを起動できるようになること」 です。
ここでは、
- Node.jsの役割
- npm
- Reactプロジェクト
- Vite
- 開発サーバー
- プロジェクト構成（
src/package.json）
を、コマンド入力の流れとセットでステップバイステップで説明していきます。 理解しやすいように、この「中盤」自体も 前半・中盤・後半 の3つに分けて進めます。
準備と「ViteでReactプロジェクトを作る」ステップ
1. Node.jsが入っているか確認する
まずは、Node.jsがインストールされているかを確認します。 ターミナル（またはコマンドプロンプト）を開いて、次のコマンドを入力します。
bash
node -v
- バージョン番号（例：
v18.x.x）が表示されればOKです。 - 「コマンドが見つかりません」などのエラーが出る場合は、Node.jsのインストールが必要です。
ここでのポイント：
- Node.jsは「React開発の裏方エンジン」です。
- これが入っていないと、npmもViteも動きません。
2. 作業フォルダを決める
次に、Reactプロジェクトを作る場所（フォルダ）を決めます。
例：
- デスクトップに
react-projectsフォルダを作る - その中に
my-react-appというプロジェクトを作る
ターミナルで次のように移動します。
bash
cd ~/Desktop/react-projects
※環境によってパスは変わります。
3. ViteでReactプロジェクトを作成する
ここが 中盤の一番の山場です。 Viteを使って、Reactプロジェクトのひな型を一気に作ります。
bash
npm create vite@latest my-react-app -- --template react
my-react-app→ プロジェクト名（フォルダ名）です。--template react→ React用のテンプレートを使う指定です。
コマンドを実行すると、いくつか質問される場合がありますが、 基本的には Enterキーで進めて問題ありません。
実行後、my-react-app というフォルダが作られ、その中にReactプロジェクトのひな型が生成されます。
npmで依存ライブラリをインストールし、開発サーバーを起動する
4. プロジェクトフォルダに移動する
生成されたプロジェクトフォルダに移動します。
bash
cd my-react-app
この中に、
package.jsonsrcフォルダ- その他の設定ファイル
が入っています。
5. npmでライブラリをインストールする
次に、ReactやViteなどのライブラリをインストールします。 これは 初回に必ず必要なステップです。
bash
npm install
package.jsonに書かれているdependenciesとdevDependenciesをもとに、必要なライブラリがnode_modulesにインストールされます。- 少し時間がかかりますが、完了するまで待ちます。
重要ポイント：
npm installは「プロジェクトに必要な部品を全部持ってくる」コマンドです。- これを忘れると、
npm run devがエラーになります。
6. 開発サーバーを起動する
いよいよ、Reactプロジェクトを起動します。
bash
npm run dev
このコマンドを実行すると、
- ターミナルにURLが表示されます（例：
http://localhost:5173）。 - 「Vite dev server running at …」のようなメッセージが出ます。
ブラウザを開いて、そのURLにアクセスすると、 ViteのReactテンプレートの画面（「Vite + React」などの表示）が見えるはずです。
ここがDAY 11のゴール地点です。
プロジェクト構成を「触れるレベル」で理解する
7. package.jsonをざっくり読む
my-react-appフォルダの中にある package.json を開いてみます。
json
{
"name": "my-react-app",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "...",
"react-dom": "..."
},
"devDependencies": {
"vite": "..."
}
}
ここで押さえておきたいのは、
scripts.devにviteが書かれている →npm run devでViteの開発サーバーが起動する理由dependenciesにreactとreact-domがある → React本体のライブラリがここで管理されていること
重要ポイント：
package.jsonは「プロジェクトの設定と依存ライブラリの一覧」です。- エラーが出たときに、ここを見ることで原因が分かることも多いです。
8. srcフォルダの中身を確認する
次に、srcフォルダを開いてみます。
代表的なファイルは次の2つです。
main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
- Reactアプリをブラウザに「差し込む」ための入口です。
Appコンポーネントを読み込んで、rootというIDの要素に描画しています。
App.jsx
function App() {
return <h1>Hello React!</h1>;
}
export default App;
- 最初のReactコンポーネントです。
- ここを書き換えることで、画面の中身を変えていきます。
重要ポイント：
srcフォルダが「自分が編集する場所」です。- 最初は
App.jsxを書き換えるところから始めると、Reactの感覚がつかみやすいです。
9. 「Reactプロジェクトを起動できる」状態を整理する
ここまでの流れを、もう一度コンパクトにまとめます。
node -vでNode.jsが入っているか確認する。- 作業フォルダに移動する。
npm create vite@latest my-react-app -- --template reactでReactプロジェクトを作る。cd my-react-appでプロジェクトフォルダに入る。npm installで必要なライブラリをインストールする。npm run devで開発サーバーを起動する。- ブラウザで表示されたURL（例：
http://localhost:5173）を開く。 src/App.jsxを編集すると、画面がリアルタイムに更新される。
この一連の流れが スムーズにイメージできれば、DAY 11の中盤はクリアです。
DAY 11：React開発環境 中盤のまとめ
この中盤では、
- Node.js・npm・Viteの役割を「実際のコマンド入力」と結びつけて整理したこと
npm create vite@latest ...→npm install→npm run devという Reactプロジェクト起動の一連の流れ を確認したことpackage.jsonとsrcフォルダの中身を、「どこに何があるか」レベルで理解したこと- ゴールである 「Reactプロジェクトを起動できる」状態 を、具体的な手順としてイメージできるようにしたこと
が大きなポイントになります。
後半では、
- よくあるエラーの考え方
- 開発環境を安全に保つための基本的な注意点
- 複数プロジェクトを扱うときの整理の仕方
なども絡めながら、 React開発環境を「安心して触れる土台」として、もう一段深く固めていく流れになります。
DAY 11：React開発環境 後半 ― 「安心して触れる開発環境」にするための視点を持つ
DAY 11の後半では、すでに
- Reactプロジェクトを作る
npm installでライブラリを入れるnpm run devで開発サーバーを起動する
という流れをイメージできている前提で、 「開発環境を安心して触れるものにする」ための考え方を整理していきます。
ここでも、
- Node.jsの役割
- npm
- Reactプロジェクト
- Vite
- 開発サーバー
- プロジェクト構成（
src/package.json）
を、ステップバイステップでかみ砕きながら、 前半・中盤・後半の3つに分けて説明していきます。
よくあるつまずきポイントを「怖くないもの」に変える
Node.jsとnpmで起きがちなエラーの考え方
React開発環境で最初に出会いやすいのが、 Node.jsやnpmまわりのエラーです。
代表的なものと、その考え方を整理します。
1. node や npm が「見つかりません」と言われる
- 原因：Node.jsがインストールされていない、またはパスが通っていない場合が多いです。
- 対処の考え方：
- まず
node -v、npm -vを実行してみる。 - 何も表示されない場合は、Node.jsの公式サイトからインストールし直す。
- まず
ここで大事なのは、 「自分が悪いわけではなく、環境の設定の問題である」と理解することです。
2. npm install でエラーが出る
- 原因：ネットワークの問題、権限の問題、バージョンの不整合など。
- 対処の考え方：
- もう一度
npm installを試す。 - エラーメッセージの最初の数行だけを読む（全部読む必要はありません）。
- 「permission」「network」「version」などのキーワードがないかを見る。
- もう一度
重要ポイント：
- エラーは「何が起きているかを教えてくれるメッセージ」です。
- 全部理解しようとせず、「キーワードを拾う」くらいから慣れていくと良いです。
Viteと開発サーバーで起きがちなエラー
3. npm run dev が動かない
- 原因：
npm installをしていない、package.jsonが壊れている、など。 - 対処の考え方：
- まず
npm installを実行したか確認する。 package.jsonのscripts.devにviteが書かれているか確認する。- プロジェクトフォルダ（
my-react-appなど）にいるか確認する。
- まず
4. ブラウザでページが表示されない
- 原因：開発サーバーが落ちている、URLが間違っている、など。
- 対処の考え方：
- ターミナルに「Vite dev server running at …」と出ているか確認する。
- 表示されているURL（例：
http://localhost:5173）を正しく開いているか確認する。 - ターミナルにエラーメッセージが出ていないか確認する。
重要ポイント：
- 「ターミナルの状態」と「ブラウザの状態」をセットで見る癖をつけると、原因を追いやすくなります。
プロジェクト構成を「安心して触れる」レベルまで理解する
package.json を「怖くない設定ファイル」にする
package.jsonは、最初は「よく分からないJSONファイル」に見えますが、 実は次の3つだけ押さえておけば十分です。
1. name と version
json
{
"name": "my-react-app",
"version": "0.0.0",
}
- プロジェクトの名前とバージョンです。
- 基本的に、ここは気にしなくても大丈夫です。
2. scripts
json
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
npm run dev→viteを実行npm run build→ 本番用のビルドを作成npm run preview→ ビルドしたものを確認
ここだけ分かっていれば、「何を実行しているか」がイメージできます。
3. dependencies と devDependencies
json
"dependencies": {
"react": "...",
"react-dom": "..."
},
"devDependencies": {
"vite": "...",
}
dependencies→ アプリ本体で使うライブラリ（Reactなど）devDependencies→ 開発中だけ使うツール（Viteなど）
重要ポイント：
package.jsonは「プロジェクトの説明書」です。- すべてを理解する必要はなく、「scripts」と「dependencies」だけでも十分役に立ちます。
srcフォルダを「触っていい場所」として認識する
srcフォルダは、自分が自由に触っていい場所です。
代表的なファイル
main.jsx→ Reactアプリの入口App.jsx→ 最初の画面（コンポーネント）
最初の一歩としては、App.jsxを次のように書き換えてみると良いです。
function App() {
return (
<div>
<h1>React入門 60日コース</h1>
<p>これは最初のReactコンポーネントです。</p>
</div>
);
}
export default App;
保存すると、ブラウザの画面が自動で更新されて、 自分の書いたテキストが表示されます。
重要ポイント：
- 「画面に出ているものは、
App.jsxから来ている」と理解できると、 Reactの学習が一気に楽になります。 - まずは
App.jsxだけを触るところから始めて、 慣れてきたらファイルを増やしていく流れで十分です。
開発環境を「安全で拡張しやすい土台」として見る
セキュリティ・安全性の視点から見た開発環境
React開発環境を扱うときにも、 セキュリティ・安全性の視点はとても重要です。
1. 不要なグローバルインストールを避ける
- できるだけ、プロジェクトごとに必要なものを
npm installで入れるようにします。 - よく分からないパッケージをグローバルにインストールしないことで、 環境の汚染や予期しない挙動を防ぎやすくなります。
2. 不明なエラーや警告を無視しない
- ターミナルやブラウザのコンソールに出る警告は、 「何かがおかしいかもしれない」というサインです。
- すべてを理解する必要はありませんが、 少なくとも「どこで出ているか」を確認する癖をつけると、 セキュリティ的にも安全なコードを書きやすくなります。
3. ライブラリの更新に慎重になる
npm updateやnpm installでライブラリを更新するときは、 バージョンが大きく変わっていないか（メジャーアップデートかどうか）を意識します。- 大きな変更があると、挙動が変わることがあるためです。
「Reactプロジェクトを起動できる」その先へ
DAY 11のゴールは、
- Reactプロジェクトを作れる
npm installできるnpm run devで開発サーバーを起動できる- ブラウザにReactの画面が表示される
src/App.jsxを書き換えると、画面が更新される
という状態でした。
ここまで来ると、 「Reactを書くための土台」はほぼ完成しています。
この先のDAYでは、
- コンポーネント
- JSX
- props
- State
- イベント処理
といった「Reactそのものの書き方」に入っていきますが、 今日整理した開発環境の理解があることで、
- エラーが出ても落ち着いて対処できる
- どこを触れば画面が変わるか分かる
- 「裏方」と「表側」の関係がイメージできる
という状態で進んでいけます。
DAY 11：React開発環境 後半のまとめ
この後半では、
- Node.js・npm・Vite・開発サーバーで起きがちなエラーの「考え方」を整理したこと
package.jsonとsrcフォルダを、「怖くない設定ファイル」と「触っていいコードの場所」として認識できるようにしたこと- セキュリティ・安全性の視点から、開発環境を「安心して触れる土台」として見る感覚を持ったこと
- ゴールである 「Reactプロジェクトを起動できる」状態 を、 単なる手順ではなく「意味のある流れ」として理解したこと
が大きなポイントになります。
ここまで来た読者のみなさんは、 もう「Reactを触る準備が整った状態」にいます。 次のDAYから、いよいよ Reactのコンポーネントと画面づくり に入っていきます。
