Reactの基本的なコンセプトと特徴

１：コンポーネントベースのアーキテクチャ

• 説明：UI（画面）を小さな部品（コンポーネント）に分けて作る考え方です。
• 特徴：各コンポーネントは独立していて再利用可能。
  たとえば「ボタン」や「入力フォーム」などを部品化します。

jsx

// Button.js
export const Button = () => {
  return <button>クリックしてね</button>;
};

// App.js
import { Button } from './Button';

const App = () => {
  return (
    <div>
      <h1>こんにちは</h1>
      <Button />
    </div>
  );
};

• UIが<Button />のような部品（コンポーネント）で構成されているのがわかります。

---

２：仮想DOM

説明：画面の表示内容をメモリ上に仮想的に表現する仕組みです。

特徴：変更があったときに、仮想DOMと実際のDOMを比較して、
差分だけを効率よく画面に反映します。これにより高速な描画が可能になります。

仮想DOM自体は裏で動いている仕組みなのでコードでは見えませんが、
Reactがどのように変更を最小限にして画面を更新するか
のイメージを以下で説明します：

jsx

const App = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <p>クリック数: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

• ボタンをクリックするとcountが変わります。
• Reactは仮想DOMを使って、「数字が変わっただけ」だと判断し、
  そこだけを更新します。

---

３：JSX

説明：JavaScriptの中にHTMLのような構文を書ける記法です。

特徴：可読性が高く、HTMLとロジックが近くにあるので直感的に書けます。

jsx

const Hello = () => {
  const name = 'React';

  return <h1>こんにちは、{name}！</h1>;
};

• HTMLっぽく書けて、{}でJavaScriptの値や式を埋め込めます。
• JSXはJavaScriptなので、条件分岐や繰り返しなども使えます。

---

４：ステートとライフサイクル（useState, useEffect）

説明：「状態（state）」をコンポーネント内に持たせて、
状態の変化に応じてUIを更新します。

特徴：例えばカウントアップの数字など、動的に変わる情報を保持します。
ライフサイクルは、コンポーネントが「作られる・更新される・消える」
流れの中で何かをする仕組みです。

jsx

import { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  // ライフサイクル：1秒ごとにカウントアップ
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    // クリーンアップ（コンポーネントが消えるとき）
    return () => clearInterval(interval);
  }, []);

  return <p>経過時間: {seconds}秒</p>;
};

---

５：Props

説明：親コンポーネントから子コンポーネントへデータを渡すための仕組み。

特徴：子は受け取ったpropsを元に表示などを行いますが、
props自体は変更できません（読み取り専用）。

jsx

const Greeting = ({ name }) => {
  return <p>こんにちは、{name}さん！</p>;
};

const App = () => {
  return <Greeting name="太郎" />;
};

• name="太郎"がGreetingコンポーネントのpropsに渡されます。
• propsは読み取り専用。

６：コンテキスト（Context）

説明：深い階層のコンポーネントにデータを渡す仕組み。

特徴：「テーマカラー」や「ログイン情報」など、どこからでもアクセスしたい
共通データを扱うのに便利です。propsの「バケツリレー」を避けられます。

jsx

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

const ThemeContext = createContext('light');

const ThemedText = () => {
  const theme = useContext(ThemeContext);
  return <p style={{ color: theme === 'dark' ? '#fff' : '#000' }}>現在のテーマ: {theme}</p>;
};

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedText />
    </ThemeContext.Provider>
  );
};

• コンテキストを使うと、深い階層のコンポーネントにも直接値を渡せます。
• useContextでアクセス可能。