※この記事は以下記事を参照し、自己学習用として書きました。参照記事が素晴らしいので、ぜひご覧ください。

参照記事
https://read-engineer.com/2020/12/11/react/#index_id2

目次

なぜReactは挫折率が高いのか
Reactを学ぶ前の準備
Reactの5つのコア概念を理解する
- SPAとコンポーネント設計
- JSXの書き方
- 仮想DOMの仕組み
- StateとPropsによる状態管理
- React Hooksの基礎
実践！TodoアプリをReactで作り直す
次のステップへ
まとめ

1. なぜReactは挫折率が高いのか

ReactはJavaScriptフレームワークの中で圧倒的なシェアを誇りますが、同時に挫折率も非常に高いフレームワークです。その理由は明確です。

JavaScriptの基礎が不十分なまま学習を始めてしまうからです。

Reactは「データを元にUIを自動更新する」技術ですが、その土台となるJavaScript（配列操作、非同期処理、モジュールなど）を理解していないと、何をしているのか全く分からなくなります。

逆に言えば、JavaScriptの基礎さえ固めてからReactに取り組めば、驚くほどスムーズに習得できます。段階を飛ばさず、確実に積み上げていきましょう。

2. Reactを学ぶ前の準備

Reactを始める前に、以下の3つを確認してください。

2-1. JavaScriptの基礎は身についていますか？

特に重要なのがこれらの知識です：

配列操作（map, filter, find）
非同期処理（Promise, async/await）
ECMAScriptモジュール（import/export）
アロー関数とthisの扱い
オブジェクトの分割代入

これらが曖昧な場合は、まずJavaScriptの復習から始めましょう。

2-2. JavaScriptでTodoアプリを作れますか？

これが最も重要です。 素のJavaScriptでCRUD処理（作成・読込・更新・削除）を実装できる力があれば、Reactの学習はスムーズに進みます。

なぜなら、Reactは内部で自動的にデータ操作とUI更新を行いますが、その仕組みを理解するには「手動でやった経験」が必要だからです。

JavaScriptのみでTodoアプリを作ったことがない方は、まずそこから始めましょう。

2-3. ファンクションコンポーネントで学ぶ

Reactには2つの書き方があります：

クラスコンポーネント（古い書き方）
ファンクションコンポーネント（現在の主流）

2020年以降、React Hooksの登場でファンクションコンポーネントが主流になりました。クラスコンポーネントは複雑でthisの理解も必要なため、まずはファンクションコンポーネントから学びましょう。

3. Reactの5つのコア概念を理解する

3-1. SPAとコンポーネント設計

**SPA（シングルページアプリケーション）**とは、ページ全体を再読み込みせずに画面を切り替える技術です。ReactはSPA構築に最適なフレームワークです。

仕組みはシンプル：HTMLのbodyタグ以下の部分を入れ替えることで、画面遷移しているように見せているだけです。

通常のWebサイト：
ページA → サーバー通信 → ページB（全体を再読み込み）

SPA：
ページA → 表示部分だけ入れ替え → ページB（瞬時に切り替わる）

この入れ替えを実現するのがコンポーネントです。

コンポーネントとは、画面を構成する部品のことです。ボタン、ヘッダー、カード、フォームなど、パーツ単位で作成し、それらを組み合わせて画面を構築します。

画面全体
├── ヘッダー（コンポーネント）
├── メインコンテンツ（コンポーネント）
│   ├── サイドバー（コンポーネント）
│   └── 記事一覧（コンポーネント）
│       ├── 記事カード（コンポーネント）
│       ├── 記事カード（コンポーネント）
│       └── 記事カード（コンポーネント）
└── フッター（コンポーネント）

コンポーネントは入れ子にして使えます。導入される側を親コンポーネント、導入する側を子コンポーネントと呼びます。

3-2. JSXの書き方

ReactではJavaScriptの中にHTMLを書けます。この記法をJSXと呼びます。

// 通常のJavaScript
const element = document.createElement('h1');
element.textContent = 'Hello World';

// JSXを使ったReact
const element = <h1>Hello World</h1>;

JSXの基本ルール：

// シンプルなコンポーネント
function Greeting() {
  const name = "太郎";
  
  return (
    <div>
      <h1>こんにちは、{name}さん！</h1>
      <p>今日もコーディング頑張りましょう</p>
    </div>
  );
}

// {}内にJavaScriptの式を埋め込める
function UserCard() {
  const user = {
    name: "花子",
    age: 20,
    isStudent: true
  };
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>年齢: {user.age}歳</p>
      <p>{user.isStudent ? "学生" : "社会人"}</p>
    </div>
  );
}

// classではなくclassNameを使う
function Button() {
  return <button className="btn-primary">クリック</button>;
}

// 必ず1つの親要素で囲む
function Profile() {
  return (
    <div>
      <h1>プロフィール</h1>
      <p>詳細情報</p>
    </div>
  );
}

// または空のタグ（Fragment）を使う
function Profile2() {
  return (
    <>
      <h1>プロフィール</h1>
      <p>詳細情報</p>
    </>
  );
}

3-3. 仮想DOMの仕組み

Reactの最大の特徴が**仮想DOM（Virtual DOM）**です。これにより「変更箇所だけを効率的に更新する」ことが可能になります。

通常のWeb開発の問題点：

データが変わるたびに画面全体を再描画
パフォーマンスが悪い
コードが複雑になりがち

Reactの解決策：

メモリ上に仮想的なDOM（画面の設計図）を保持
データが変わったら、新しい仮想DOMを作成
変更前と変更後の仮想DOMを比較
差分だけを実際のDOMに反映

[変更前の仮想DOM] vs [変更後の仮想DOM]
        ↓
    差分を検知
        ↓
変更箇所だけ実際のDOMを更新（超高速！）

開発者は「データをどう変更するか」だけ考えればよく、画面更新の面倒な処理はReactが自動でやってくれます。

3-4. StateとPropsによる状態管理

Reactでは「データ（状態）が変わったら、自動的にUIが更新される」という仕組みで動きます。この状態を管理する2つの重要な概念があります。

State（ステート）：コンポーネント内部の状態

コンポーネントが持つデータのことです。useStateで定義します。

import { useState } from 'react';

function Counter() {
  // [現在の値, 値を変更する関数] = useState(初期値)
  const [count, setCount] = useState(0);
  
  const increment = () => {
    setCount(count + 1);  // 状態を更新するとUIが自動で再描画される
  };
  
  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

重要なポイント：

状態は直接変更してはダメ：count = count + 1はNG
必ずsetCount()を使う：これでReactが変更を検知してUIを更新

Props（プロップス）：親から子へのデータ受け渡し

親コンポーネントから子コンポーネントへデータを渡す仕組みです。

// 親コンポーネント
function App() {
  const userName = "太郎";
  const userAge = 20;
  
  return (
    <div>
      <UserProfile name={userName} age={userAge} />
    </div>
  );
}

// 子コンポーネント
function UserProfile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>年齢: {props.age}歳</p>
    </div>
  );
}

// 分割代入でスッキリ書ける
function UserProfile({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>年齢: {age}歳</p>
    </div>
  );
}

StateとPropsの違い：

	State	Props
定義場所	コンポーネント内部	親から受け取る
変更	できる	できない（読み取り専用）
用途	そのコンポーネントで管理するデータ	親から子への情報伝達

3-5. React Hooksの基礎

React Hooksは、ファンクションコンポーネントで状態管理やその他の機能を使うための仕組みです。代表的なHooksを3つ紹介します。

useState：状態管理

先ほど説明した通り、コンポーネント内の状態を管理します。

function TodoInput() {
  const [text, setText] = useState("");
  
  return (
    <input 
      value={text} 
      onChange={(e) => setText(e.target.value)}
    />
  );
}

useEffect：副作用の処理

データ取得、タイマー、イベントリスナーの登録など、「レンダリング以外の処理」を行います。

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);
  
  // コンポーネント表示時に実行される
  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch('https://api.example.com/users');
      const data = await response.json();
      setUsers(data);
    };
    
    fetchUsers();
  }, []); // 空配列 = 初回のみ実行
  
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

依存配列の動き：

useEffect(() => { ... }, []);        // 初回のみ実行
useEffect(() => { ... }, [count]);   // countが変わったら実行
useEffect(() => { ... });            // 毎回実行（非推奨）

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

Propsでデータをバケツリレーするのではなく、離れたコンポーネント間で直接データを共有できます。

import { createContext, useContext, useState } from 'react';

// コンテキストを作成
const UserContext = createContext();

// 親コンポーネント
function App() {
  const [user, setUser] = useState({ name: "太郎", role: "admin" });
  
  return (
    <UserContext.Provider value={user}>
      <Header />
      <MainContent />
    </UserContext.Provider>
  );
}

// 深い階層の子コンポーネント
function UserDisplay() {
  const user = useContext(UserContext);
  
  return <p>ようこそ、{user.name}さん（{user.role}）</p>;
}

4. 実践！TodoアプリをReactで作り直す

JavaScript基礎編で作ったTodoアプリを、Reactで作り直してみましょう。これでReactの状態管理が体感的に理解できます。

完成イメージ

タスクを追加・削除できる
タスクの完了/未完了を切り替えられる
統計情報を表示する

コード全体

import { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [inputText, setInputText] = useState("");
  const [nextId, setNextId] = useState(1);

  // タスク追加
  const addTodo = () => {
    if (inputText.trim() === "") return;
    
    const newTodo = {
      id: nextId,
      text: inputText,
      completed: false
    };
    
    setTodos([...todos, newTodo]);
    setNextId(nextId + 1);
    setInputText("");
  };

  // Enter キーで追加
  const handleKeyPress = (e) => {
    if (e.key === 'Enter') addTodo();
  };

  // 完了状態の切り替え
  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  // タスク削除
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  // 統計計算
  const totalCount = todos.length;
  const completedCount = todos.filter(todo => todo.completed).length;
  const remainingCount = totalCount - completedCount;

  return (
    <div className="container">
      <h1>📝 Todo リスト（React版）</h1>
      
      <div className="input-area">
        <input
          type="text"
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder="新しいタスクを入力..."
        />
        <button onClick={addTodo}>追加</button>
      </div>

      <ul className="todo-list">
        {todos.map(todo => (
          <TodoItem
            key={todo.id}
            todo={todo}
            onToggle={toggleTodo}
            onDelete={deleteTodo}
          />
        ))}
      </ul>

      <div className="stats">
        全{totalCount}件 / 完了{completedCount}件 / 残り{remainingCount}件
      </div>
    </div>
  );
}

// 子コンポーネント：個別のTodoアイテム
function TodoItem({ todo, onToggle, onDelete }) {
  return (
    <li className={todo.completed ? 'completed' : ''}>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
      />
      <span>{todo.text}</span>
      <button onClick={() => onDelete(todo.id)}>削除</button>
    </li>
  );
}

export default App;

CSS（App.css）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.container {
  background: white;
  border-radius: 15px;
  padding: 30px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

h1 {
  color: #667eea;
  margin-bottom: 20px;
  text-align: center;
}

.input-area {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.input-area input {
  flex: 1;
  padding: 12px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
}

.input-area input:focus {
  outline: none;
  border-color: #667eea;
}

.input-area button {
  padding: 12px 24px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}

.input-area button:hover {
  background: #5568d3;
}

.todo-list {
  list-style: none;
  margin-bottom: 20px;
}

.todo-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: all 0.3s;
}

.todo-list li:hover {
  background: #e9ecef;
}

.todo-list li.completed span {
  text-decoration: line-through;
  color: #999;
}

.todo-list input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.todo-list span {
  flex: 1;
  font-size: 16px;
}

.todo-list button {
  padding: 6px 12px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.todo-list button:hover {
  background: #c82333;
}

.stats {
  text-align: center;
  color: #666;
  font-size: 14px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

JavaScript版との違いを理解する

JavaScript版：

DOMを直接操作（createElement, appendChild など）
データが変わったら手動でHTMLを再構築
イベントリスナーを手動で登録

React版：

JSXで宣言的にUIを記述
状態（State）が変わったら自動でUIが更新される
データの流れが分かりやすい

例えば削除機能を比較すると：

// JavaScript版
deleteTodo(id) {
  this.todos = this.todos.filter(t => t.id !== id);
  this.render();  // 手動で画面を再描画
}

// React版
const deleteTodo = (id) => {
  setTodos(todos.filter(todo => todo.id !== id));
  // 自動で再描画される！
};

重要ポイント3つ

配列の操作にはmap/filterを使う：Reactでは配列を直接変更せず、新しい配列を作って状態を更新します。
keyプロップは必須：リスト表示時は必ずkeyを指定します。Reactが効率的に差分を検知するために必要です。
イベントハンドラーで関数を渡す：onClick={() => deleteTodo(todo.id)}のように、アロー関数で引数を渡します。

さらにレベルアップ：Context APIを使う

TodoアプリをContext APIでリファクタリングすると、Propsのバケツリレーを避けられます。

import { createContext, useContext, useState } from 'react';

// コンテキスト作成
const TodoContext = createContext();

// カスタムフック
const useTodos = () => {
  const context = useContext(TodoContext);
  if (!context) {
    throw new Error('useTodos must be used within TodoProvider');
  }
  return context;
};

// プロバイダーコンポーネント
function TodoProvider({ children }) {
  const [todos, setTodos] = useState([]);
  const [nextId, setNextId] = useState(1);

  const addTodo = (text) => {
    const newTodo = { id: nextId, text, completed: false };
    setTodos([...todos, newTodo]);
    setNextId(nextId + 1);
  };

  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const value = {
    todos,
    addTodo,
    toggleTodo,
    deleteTodo
  };

  return (
    <TodoContext.Provider value={value}>
      {children}
    </TodoContext.Provider>
  );
}

// 使用例
function App() {
  return (
    <TodoProvider>
      <TodoApp />
    </TodoProvider>
  );
}

function TodoApp() {
  const { todos, addTodo, toggleTodo, deleteTodo } = useTodos();
  
  // あとは同じように使える
  // Propsを何階層も渡す必要がない！
}

5. 次のステップへ

Reactの基礎を押さえたら、次は実務で必要なスキルを身につけましょう。

5-1. TypeScriptを学ぶ

モダンなフロント開発では、JavaScriptではなくTypeScriptを使うのが主流です。型定義によってバグを事前に防げるため、ほぼ必須のスキルです。

// TypeScriptでのReact
interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoItemProps {
  todo: Todo;
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

function TodoItem({ todo, onToggle, onDelete }: TodoItemProps) {
  // 型が保証されているので安全！
}

5-2. React Routerでルーティング

複数ページを持つSPAを作るには、React Routerが必要です。

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">ホーム</Link>
        <Link to="/about">About</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

5-3. グローバル状態管理（Redux）

複数のコンポーネントで共通の状態を使いたい場合、ReduxやZustandなどのライブラリを使います。

Context APIでも実現できますが、大規模アプリではReduxの方が管理しやすいケースが多いです。

5-4. 実務レベルのアウトプット

簡単なTodoアプリができたら、次はこれらに挑戦しましょう：

APIを使ったデータ取得：外部APIから天気情報やニュースを表示
認証機能付きアプリ：ログイン/ログアウト機能の実装
リアルタイム通信：チャットアプリやコラボレーションツール
レスポンシブデザイン：スマホ・タブレット対応

6. まとめ

Reactは一見難しそうですが、正しい順序で学べば必ず習得できます。重要なのは段階を飛ばさないことです。

今日から始める3ステップ：

JavaScript基礎の確認：配列操作、非同期処理、モジュールを復習。JavaScriptでTodoアプリを作る。
Reactの核心を理解：コンポーネント、JSX、State/Props、React Hooksの概念を掴む。完璧でなくてOK。
実践！作って学ぶ：TodoアプリをReactで作り直す。動いた瞬間の達成感が次のモチベーションになる。

挫折しないための心構え：

最初から全てを理解しようとしない
エラーは成長のチャンス
小さく作って、少しずつ機能を追加
分からないことは調べながら進める

ReactはWeb開発の世界で最も求められているスキルの1つです。この記事で紹介した内容を実践すれば、確実にReactエンジニアへの道が開けます。

まずはJavaScriptでTodoアプリを作り、それをReactで作り直してみましょう。その経験が、あなたのキャリアを大きく変える第一歩になるはずです。頑張ってください！