メインコンテンツにスキップ

⚛️ Reactとは？

📖 定義​

Reactは、Facebook（Meta）が開発したユーザーインターフェース（UI）を構築するためのJavaScriptライブラリです。コンポーネントベースで再利用可能なUIを作成し、Virtual DOMを使用して効率的に画面を更新します。宣言的プログラミングで複雑なUIを簡単に管理できます。

🎯 簡単な例え​

LEGOブロック​

Reactコンポーネント = LEGOブロック
├─ 小さなブロックを組み合わせ
├─ 同じブロックを何度も再利用
├─ 複雑な構造を簡単に組み立て
└─ 必要に応じてブロックを交換

<House>
  <Roof />
  <Wall />
  <Door />
  <Window />
</House>

⚙️ 核心概念​

コンポーネント構造​

// 関数コンポーネント（現代的なアプローチ）
function Welcome({ name }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

// 使用
<Welcome name="太郎" />

状態管理​

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        増加
      </button>
    </div>
  );
}

useEffectフック​

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);  // userIdが変更された時に実行

  return <div>{user?.name}</div>;
}

💡 主な例​

リストレンダリング​

function TodoList() {
  const [todos, setTodos] = useState([
    { id: 1, text: '運動', done: false },
    { id: 2, text: '勉強', done: true }
  ]);

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

フォーム処理​

function LoginForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // API呼び出し...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" onChange={handleChange} />
      <input name="password" type="password" onChange={handleChange} />
      <button type="submit">ログイン</button>
    </form>
  );
}

🤔 よくある質問​

Q1. なぜReactを使うのですか？​

// ❌ Vanilla JS（複雑）
const button = document.createElement('button');
button.addEventListener('click', () => {
  // 手動DOM操作
});

// ✅ React（シンプル）
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Q2. JSXとは何ですか？​

A: JavaScript + XML構文でReact要素を記述：

// JSX
const element = <h1 className="title">こんにちは</h1>;

// 変換後
React.createElement('h1', { className: 'title' }, 'こんにちは');

Q3. フックとは何ですか？​

A: 関数コンポーネントで状態とライフサイクルを使用できる関数：

useState    // 状態管理
useEffect   // 副作用（API呼び出し）
useContext  // コンテキストアクセス
useRef      // DOM アクセス
useMemo     // メモ化
useCallback // 関数メモ化

🎬 まとめ​

  • コンポーネント: 再利用可能なUIブロック
  • Virtual DOM: 効率的な更新
  • JSX: 直感的な構文
  • フック: 強力な関数コンポーネント

Reactでインタラクティブなアプリケーションを構築しましょう！ ⚛️