【永久保存版】世界一簡単なReact講座・JavaScript初心者は必見！クイズアプリを作って学ぼう

---

一行要約

このチュートリアルは、JavaScript初心者がReact（リアクト）の環境構築から始めて、コンポーネント指向、状態管理、CSSモジュールまでの基礎を学び、実際にクイズアプリケーションを開発できるようになるまでを段階的に指導する。

---

事前準備物

• HTML（エイチティーエムエル）の基礎知識
• CSS（シーエスエス）の基礎知識
• JavaScript（ジャバスクリプト）の基礎知識
• テキストエディタ（推奨: VS Code（ブイエスコード））
• インターネット接続（パッケージのダウンロード用）
• コマンドライン操作の基本理解

---

React（リアクト）を学ぶ価値

世界最大規模のUIライブラリ

React（リアクト）はMeta（メタ）社が開発したJavaScript（ジャバスクリプト）ライブラリで、世界中の主要サービスで採用されている。Facebook（フェイスブック）、Instagram（インスタグラム）、Netflix（ネットフリックス）、Airbnb（エアビーアンドビー）などの有名プラットフォームがReact（リアクト）で構築されており、2024年のStack Overflow（スタックオーバーフロー）調査でもJavaScript（ジャバスクリプト）ライブラリ部門で第1位を獲得している。

ライブラリとフレームワークの違い

• ライブラリ: 必要な時に取り出して使える「便利道具のセット」。React（リアクト）はUI（ユーザーインターフェース）を作るためのライブラリ
• フレームワーク: より包括的で大規模なツール群。Next.js（ネクストジェイエス）やExpress（エクスプレス）などが該当

コンポーネント指向の設計思想

Web（ウェブ）サイトやアプリケーションは、ボタン、リンク、ヘッダーなどの「コンポーネント」と呼ばれる部品を組み合わせて構成される。これにより：

• 同じ部品を何度も使い回せる
• 開発効率が大幅に向上する
• 再利用性が高まる
• メンテナンスが容易になる

シングルページアプリケーション（SPA）

React（リアクト）アプリケーションは**シングルページアプリケーション（SPA）**が基本となる。

---

段階別手順

Step 1: Node.js（ノードジェイエス）とnpm（エヌピーエム）の環境構築

13:20 — Node.js（ノードジェイエス）とnpm（エヌピーエム）の環境構築（Windows版）

25:00 — Node.js（ノードジェイエス）とnpm（エヌピーエム）の環境構築（Mac版）

React（リアクト）を動かすための必須ツールであるNode.js（ノードジェイエス）とnpm（エヌピーエム）をインストールする。

Node.js（ノードジェイエス）とは

Node.js（ノードジェイエス）はJavaScript（ジャバスクリプト）をサーバーサイドで実行するためのツールで、npm（エヌピーエム）はNode.js（ノードジェイエス）用のパッケージ管理ツールである。これらをインストールすることで、React（リアクト）などのライブラリをスムーズに導入できるようになる。

インストール手順

Windows（ウィンドウズ）の場合:

1. Node.js公式サイトからインストーラーをダウンロード
2. インストーラーを実行し、画面の指示に従う
3. ターミナル（PowerShell（パワーシェル）またはコマンドプロンプト）を開く

Mac（マック）の場合:

1. Homebrew（ホームブリュー）をインストール
2. nvm（エヌブイエム、Node Version Manager）をHomebrew（ホームブリュー）経由でインストール
3. nvm（エヌブイエム）を使ってNode.js（ノードジェイエス）をインストール

インストール確認

ターミナルで以下のコマンドを実行し、バージョンが表示されることを確認する：

node -v
npm -v

---

Step 2: Vite（ビート）を使ったReact（リアクト）プロジェクトの作成

39:15 — Vite（ビート）を使ったReact（リアクト）プロジェクトの作成とファイル構成の解説

開発環境をシンプルに構築できるVite（ビート）を使用して、新規React（リアクト）プロジェクトを生成する。

Vite（ビート）を選ぶ理由

プロジェクト作成手順

1. VS Code（ブイエスコード）のターミナルを開く
2. 以下のコマンドを実行：

npm create vite@latest [プロジェクト名]

または現在のフォルダをプロジェクトルートにする場合：

npm create vite@latest .

1. 対話形式で以下を選択：

• プロジェクト名: .（現在のフォルダ）または任意の名前
• フレームワーク: react
• 言語: javascript

1. パッケージをインストール：

npm install

1. 開発サーバーを起動：

npm run dev

1. ブラウザで表示されるローカルURL（通常 http://localhost:5173）にアクセスし、デフォルトページが表示されることを確認

ホットリロード機能

Vite（ビート）はホットリロード機能を持ち、コード変更が即座に反映されるため開発効率が非常に高い。

---

Step 3: React（リアクト）の基本コードの理解と実践

48:30 — React（リアクト）の基本的なコードの書き方（JSX、コンポーネント作成、Props）

JSX（ジェイエスエックス）の記法

JSX（ジェイエスエックス）はJavaScript（ジャバスクリプト）内にHTML（エイチティーエムエル）を記述するReact（リアクト）特有の記法である。拡張子は.jsx（またはTypeScript（タイプスクリプト）の場合は.tsx）を使用する。

App.jsx（アップドットジェイエスエックス）を簡略化:

function App() {
 return <h1>Hello World</h1>;
}

export default App;

これにより、UI（ユーザーインターフェース）の構造とロジックを1つのファイルで管理しやすくなる。

コンポーネントの作成と使用

52:00 — Button.jsx（ボタンドットジェイエスエックス）ファイルでボタンコンポーネントを定義

再利用可能なUI（ユーザーインターフェース）部品をコンポーネントとして定義する。

Button.jsx（ボタンドットジェイエスエックス）:

function Button() {
 return <button>クリック</button>;
}

export default Button;

App.jsx（アップドットジェイエスエックス）でインポート:

import Button from './Button';

function App() {
 return (
 <div>
 <h1>Hello World</h1>
 <Button />
 </div>
 );
}

export default App;

Props（プロップス）によるデータの受け渡し

57:00 — Props（プロップス）を使って親コンポーネントから子コンポーネントへ値を渡す

親コンポーネントから子コンポーネントへ属性や関数などのデータを受け渡す仕組みがProps（プロップス）である。

親コンポーネント（App.jsx）:

<Button type="primary" disabled={false}>
 送信
</Button>

子コンポーネント（Button.jsx）:

function Button({ type, disabled, children }) {
 return (
 <button type={type} disabled={disabled}>
 {children}
 </button>
 );
}

export default Button;

children（チルドレン）Props（プロップス）は、タグの間に記述された子要素を受け取る特別なプロパティである。

CSS（シーエスエス）モジュールの適用

01:00:00 — CSS（シーエスエス）モジュールの解説

CSS（シーエスエス）モジュールを使うことで、各コンポーネントに固有のクラス名を自動生成し、クラス名の衝突を効果的に回避できる。

Button.module.css（ボタンモジュールシーエスエス）:

.button {
 padding: 10px 20px;
 background-color: blue;
 color: white;
 border: none;
 border-radius: 5px;
}

Button.jsx（ボタンドットジェイエスエックス）:

import styles from './Button.module.css';

function Button({ children }) {
 return (
 <button className={styles.button}>
 {children}
 </button>
 );
}

export default Button;

---

Step 4: Hooks（フックス）による状態管理（useState（ユースステート））

01:06:00 — Hooks（フックス）について（useState（ユースステート）の概要と実践）

Hooks（フックス）はReact（リアクト）で状態管理や副作用を扱うための特別な関数である。関数コンポーネントでよりリッチな機能を実現できる。

useState（ユースステート）の基本

useState（ユースステート）はコンポーネントの状態（データ）を管理するフックである。

基本構文:

const [状態変数, 更新関数] = useState(初期値);

カウントの例 (01:10:00):

import { useState } from 'react';

function App() {
 const [count, setCount] = useState(0);
 
 return (
 <div>
 <p>カウント: {count}</p>
 <button onClick={() => setCount(count + 1)}>
 +1
 </button>
 </div>
 );
}

export default App;

コンポーネント間での状態共有

01:15:00 — 親コンポーネントでuseState（ユースステート）を定義し、子コンポーネントにProps（プロップス）として渡す

親コンポーネントでuseState（ユースステート）を定義し、その状態や更新関数を子コンポーネントにProps（プロップス）として渡すことで、コンポーネント間で状態を共有できる。

親コンポーネント（App.jsx）:

import { useState } from 'react';
import Button from './Button';
import Display from './Display';

function App() {
 const [count, setCount] = useState(0);
 
 return (
 <div>
 <Display count={count} />
 <Button onClick={() => setCount(count + 1)} />
 </div>
 );
}

export default App;

子コンポーネント（Display.jsx）:

function Display({ count }) {
 return <p>カウント: {count}</p>;
}

export default Display;

子コンポーネント（Button.jsx）:

function Button({ onClick }) {
 return <button onClick={onClick}>+1</button>;
}

export default Button;

---

Step 5: クイズゲームの作成

動画の前半で学んだReact（リアクト）の基礎知識を応用し、クイズゲームを実際に開発する。

実装機能

• 開始ボタンのクリックからゲーム開始
• 回答を進めるボタン操作
• 結果画面への移動
• 最終的な正解表示

これにより、インプットだけでなくアウトプットを通じて学習を深め、React（リアクト）を使った簡単なアプリケーション開発の全体像を把握できる。

---

よくある失敗と解決法

失敗: Node.js（ノードジェイエス）やnpm（エヌピーエム）が正しくインストールされていない、またはバージョンが動画と異なるため、コマンドが動作しない。

解決: node -vやnpm -vでバージョンを確認し、必要に応じて再インストール、または動画で指定されたバージョンに合わせる。Mac（マック）の場合はnvm（エヌブイエム）の環境設定を確認する。

---

失敗: コンポーネントが正しくインポート・エクスポートされていないため、VS Code（ブイエスコード）の補完機能が効かない、またはエラーが発生する。

解決: コンポーネント関数をexport defaultで正しくエクスポートし、親コンポーネントでimport文を記述する。VS Code（ブイエスコード）の補完機能は、正しい定義があれば自動でパスを提案してくれる。

---

失敗: React（リアクト）でHTML（エイチティーエムエル）のclass属性をそのまま使ってしまう。

解決: JSX（ジェイエスエックス）ではclassの代わりにclassName（クラスネーム）を使用する。

---

失敗: useState（ユースステート）で定義した状態を直接変更しようとする。

解決: 状態は必ずset関数（例: setCount）を使って更新する。

---

失敗: コンポーネントの名前を小文字で始める。

解決: React（リアクト）のコンポーネント関数名は大文字で始めるアッパーキャメルケース（例: Button）が慣例。

---

失敗: 親から子へのデータの流れに反して、子から親へ直接状態を渡そうとする。

解決: React（リアクト）では親コンポーネントが状態を持ち、それをProps（プロップス）として子コンポーネントに渡す「上流から下流へ」の一方通行の流れを基本とする。複雑な状態共有が必要な場合は、より上位のコンポーネントで状態を管理し、Props（プロップス）で渡す。

---

完成結果物

動画の前半では、React（リアクト）の基本的な開発環境が整い、以下のスキルを習得できる：

• JSX（ジェイエスエックス）記法の理解と実践
• コンポーネントの作成とインポート
• Props（プロップス）を使った親子間のデータ受け渡し
• CSS（シーエスエス）モジュールによるスタイル管理
• useState（ユースステート）フックを使った状態管理
• 基本的なUI（ユーザーインターフェース）の表示と状態管理

動画後半では、これらの知識を応用した簡単なクイズゲームが完成する。

---

応用・次のステップ

useEffect（ユースエフェクト）の学習

01:25:00 — useEffect（ユースエフェクト）の概要

useEffect（ユースエフェクト）はデータ取得、購読の設定、手動でのDOM（ドム）操作といった「副作用」を処理するために使用される。

発展的なトピック

• Next.jsを使ったサーバーサイドレンダリング（SSR）
• React Routerによる複数ページの管理
• ReduxやContext APIによる高度な状態管理
• TypeScriptの導入による型安全性の向上
• React Testing Libraryによるテスト実装

---

関連概念

• JavaScript
• Node.js
• npm
• Vite
• JSX
• コンポーネント指向
• シングルページアプリケーション
• Hooks
• useState
• useEffect
• CSS Modules
• Props
• フロントエンド開発

---

主要タイムスタンプ

• 00:00 — 動画の導入とReact（リアクト）講座の概要
• 01:06 — React（リアクト）の概要と学ぶメリット（ライブラリとフレームワーク、コンポーネント指向、SPAについて）
• 13:20 — Node.js（ノードジェイエス）とnpm（エヌピーエム）の環境構築（Windows（ウィンドウズ）版）
• 25:00 — Node.js（ノードジェイエス）とnpm（エヌピーエム）の環境構築（Mac（マック）版）
• 39:15 — Vite（ビート）を使ったReact（リアクト）プロジェクトの作成とファイル構成の解説
• 48:30 — React（リアクト）の基本的なコードの書き方（JSX（ジェイエスエックス）、コンポーネント作成、Props（プロップス））
• 01:00:00 — CSS（シーエスエス）モジュールの解説
• 01:06:00 — Hooks（フックス）について（useState（ユースステート）の概要と実践）
• 01:25:00 — useEffect（ユースエフェクト）の概要