React リファレンスマニュアル

Reactマニュアルには、各種コアAPI、Hooks、コンポーネントのライフサイクルメソッドなどが含まれています。

以下は、基礎から高度なすべてのコア概念を網羅した完全な React リファレンスマニュアルです（React 18+ のモダンなプラクティスに基づき、関数コンポーネント + Hooks を優先）。各テーブルには以下が含まれます。概念/構文、説明、サンプルコードと注意事項。

1、JSX 基礎

概念/構文 説明 サンプルコード 注意事項
JSX の基本構造 HTML に似た構文で、コンパイルされるとReact.createElement return <div>Hello</div>; 単一のルート要素が必要です。使用可能なのは<></>フラグメント
式の埋め込み 用 {}JS式を埋め込む（式のみ可能で、文は不可） <h1>{name.toUpperCase()}</h1> 計算、変数、三項演算子などをサポート
属性のバインド class → className，for → htmlFor <div className="box" htmlFor="id"> キャメルケース命名（例：tabIndex）
自己クロージングタグ すべてのタグを閉じる必要があります <img src="....html" alt="..." /> 子要素のないタグは自己終了させる必要があります
条件付きレンダリング 三項演算子または&& {isLogin ? <User /> : <Login />}<br>{count > 0 && <span>{count}</span>} &&「存在する場合にレンダリング」に使用
リストレンダリング 用 map()、必ず追加する必要がありますkey {items.map(item => <li key={item.id}>{item.name}</li>)} key は一意かつ安定している必要があり、index の使用は避ける
コメント 用 {/* */} {/* これはコメントです */} JSX 内に置く
フラグメント（Fragment） 空タグで、余分な DOM を避ける <><p>1</p><p>2</p></> 或 <React.Fragment> 短縮構文<></>より一般的

2、コンポーネント基礎

概念/構文 説明 サンプルコード 注意事項
関数コンポーネント（推奨） 最初の文字を大文字にし、JSX を返す function App() { return <div>Hello</div>; } モダンな選択肢で、this がない
クラスコンポーネント（レガシー） 使用するclass継承React.Component class App extends React.Component { render() { return <div/>; } } 古いコードを理解するためだけに使用
Props の受け渡し 単方向データフローで、親から子へ渡す <Child name="QiXin" age={25} /><br>子コンポーネント：function Child({name}) {...} 読み取り専用で、変更不可
デフォルト Props defaultProps（関数コンポーネントでは引数のデフォルト値を使用） function Child({name = 'Guest'}) {...} ES6 のデフォルト引数の方が簡潔
Props の型チェック PropTypes（または TypeScript） Child.propTypes = { name: PropTypes.string.isRequired } 開発モードで警告、本番では削除
コンポーネント合成 ネスト、children <Card><h1>Title</h1></Card><br>親：{props.children} children は特別な Prop

3、状態と Hooks（核心）

Hook / 概念 説明 サンプルコード 注意事項
useState 状態変数の宣言 const [count, setCount] = useState(0);<br><button onClick={() => setCount(c => c+1)}> set 関数型更新で古い状態を回避
useEffect 副作用（マウント、更新、クリーンアップ） useEffect(() => { ... }, [dep]);<br>クリーンアップ関数を返す 空配列 [] は一度だけマウント
useRef 可変値または DOM 参照を保存 const inputRef = useRef(null);<br>inputRef.current.focus(); 再レンダリングをトリガーしない
useContext Context を消費し、Prop Drilling を回避 const theme = useContext(ThemeContext); Context.Provider と組み合わせる
useReducer 複雑な状態ロジック（Redux に類似） const [state, dispatch] = useReducer(reducer, initial); 複数の関連状態に使用
useMemo 計算結果のキャッシュ const memoValue = useMemo(() => compute(), [dep]); 高コストな計算の再実行を回避
useCallback 関数参照のキャッシュ const handle = useCallback(() => {...}, [dep]); 子コンポーネントの Props を最適化
カスタム Hook 再利用可能なロジックをカプセル化 function useFetch(url) { ... return data; } use で始める

4、ライフサイクル（クラスコンポーネント vs Hooks）

段階 クラスコンポーネントのメソッド Hooks の同等物 注意事項
マウント（Mount） constructor → render → componentDidMount useEffect(() => {…}, []) 初期状態/API 呼び出し
更新（Update） shouldComponentUpdate → render → componentDidUpdate useEffect(() => {…}, [dep]) + memo 依存関係の変化でトリガー
アンマウント（Unmount） componentWillUnmount useEffect はクリーンアップ関数を返す タイマー/購読のクリア
エラーハンドリング componentDidCatch ErrorBoundary コンポーネント Hooks に直接の同等物はない

5、コンテキストとグローバル状態

概念 説明 サンプルコード 注意事項
Context API グローバルデータ共有 const ThemeContext = createContext();<br><Provider value="dark"> 過度な使用を避ける、パフォーマンス消費
useContext 関数コンポーネントで消費 const theme = useContext(ThemeContext); Consumer の簡潔な代替

6、高度な機能（React 18+）

概念 説明 サンプルコード 注意事項
Concurrent Mode 中断可能なレンダリングで応答性を向上 <React.StrictMode> + Transitions 自動バッチ更新
Suspense 遅延ロード/データ取得の待機 <Suspense fallback={<Loading/>}><LazyComp /></Suspense> lazy と組み合わせる
React.lazy コード分割の遅延ロード const Lazy = React.lazy(() => import('./Comp')); Suspense でラップする必要がある
startTransition 緊急でない更新をマーク startTransition(() => setQuery(e.target.value)); UI の応答性を維持
useDeferredValue 緊急でない値を遅延 const deferred = useDeferredValue(query); 入力のデバウンスに類似

7、パフォーマンス最適化

テクニック 説明 サンプルコード 注意事項
React.memo Props を浅く比較し、不要なレンダリングを回避 export default React.memo(Component); 関数コンポーネント専用
useMemo / useCallback 値/関数のキャッシュ 上記の通り 子コンポーネントの再レンダリングを防止
キー（key）の最適化 安定した一意の key 例：リストレンダリング index を避ける
仮想リスト 長いリストの最適化（react-window） <FixedSizeList height={500} itemCount={1000} /> サードパーティライブラリ

8、一般的なエコシステムツール

ツール 用途 インストール/使用方法 注意事項
React Router v6 ルーティング/ナビゲーション npm i react-router-dom<br><BrowserRouter><Routes><Route path="/" element={<Home/>}/></Routes></BrowserRouter> ネストされたルート、Outlet
Redux Toolkit グローバル状態管理 npm i @reduxjs/toolkit react-redux RTK Query データ取得
React Hook Form フォーム処理 useForm() 高性能、検証が簡単
Axios / Fetch データリクエスト fetch('/api') useEffect 内で使用
Tailwind / MUI UI スタイル npm i tailwindcss 或 mui すばやく美しくする

9、デバッグとベストプラクティス

項目 説明 ツール/方法
デバッグツール コンポーネントツリー、Props、Hooks を表示 React DevTools（ブラウザ拡張機能）
Strict Mode 潜在的な問題を発見 <React.StrictMode>
ESLint + Prettier コード規約 VS Code 拡張機能
テスト Jest + React Testing Library npm i --save-dev jest

以下は、一般的な関数とメソッド、およびその簡単な説明です：

React コア API

createElement(type, [props], [...children])- React 要素またはコンポーネントを作成します。

例

import React from 'react';

const element = React.createElement('div', { className: 'container' }, 'Hello, World!');
// React.createElement は React 要素を返します

cloneElement(element, [props], [...children])- クローンを作成して React 要素を返します。新しい props と子要素を渡すことができます。

例

import React, { cloneElement } from 'react';

const parentElement = <div>Hello</div>;
const clonedElement = cloneElement(parentElement, { className: 'child' });
// clonedElement は新しい className を持つクローンされた React 要素です

createFactory(type)- 指定されたタイプの React 要素を作成するためのファクトリ関数を作成します。

例

import React from 'react';

const factory = React.createFactory('button');
const buttonElement = factory({ onClick: () => console.log('Button clicked') }, 'Click me');
// buttonElement はファクトリで作成された React 要素、クリック可能なボタンです

isValidElement(element)- オブジェクトが有効な React 要素かどうかを判定します。

例

import React, { isValidElement } from 'react';

const element = <div>Hello</div>;
console.log(isValidElement(element)); // true

Children.map(children, function[(thisArg)])- React の子要素を走査してマッピングします。

例

import React, { Children } from 'react';

const parentElement = (
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
);

const mappedChildren = Children.map(parentElement.props.children, child => (
  <li>{child}</li>
));
// mappedChildren はマッピング後の子要素のリストです

React コンポーネントのライフサイクルメソッド

constructor(props)- コンストラクター。コンポーネントの作成時に呼び出され、state の初期化とメソッドのバインドに使用します。

例

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

componentDidMount()- コンポーネントのマウント後に呼び出され、通常はデータ取得や購読などの副作用操作に使用します。

例

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // コンポーネントのマウント後にデータを購読する
    this.subscription = subscribeToData(data => {
      this.setState({ data });
    });
  }

  componentWillUnmount() {
    // コンポーネントのアンマウント前に購読を解除する
    this.subscription.unsubscribe();
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}

componentDidUpdate(prevProps, prevState)- コンポーネントの更新後に呼び出され、通常は props や state の変化に対応するために使用します。

例

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidUpdate(prevProps, prevState) {
    // props または state が変化したときにデータを更新する
    if (this.props.userID !== prevProps.userID) {
      this.fetchData(this.props.userID);
    }
  }

  render() {
    return <div>{this.props.userID}</div>;
  }
}

componentWillUnmount()- コンポーネントがアンマウントされる前に呼び出され、タイマーのクリアや購読解除などのリソース解放に使用します。

例

import React, { Component } from 'react';

class MyComponent extends Component {
  componentWillUnmount() {
    // コンポーネントのアンマウント前にリソースをクリーンアップする
    clearInterval(this.timerID);
  }

  render() {
    return <div>{this.state.time}</div>;
  }
}

static getDerivedStateFromProps(props, state)- componentWillReceiveProps の代替として使用され、props が変化したときに state を更新します。

例

import React, { Component } from 'react';

class MyComponent extends Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.userID !== prevState.userID) {
      return { userID: nextProps.userID };
    }
    return null;
  }

  render() {
    return <div>{this.state.userID}</div>;
  }
}

React Hooks

useState(initialState)- 状態変数とその更新関数を宣言します。

例

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect(callback, [dependencies])- 副作用操作を宣言します。componentDidMount と componentDidUpdate を組み合わせたようなものです。

例

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []); // 第二引数に空の配列を渡すと、コンポーネントのマウント時とアンマウント時のみ実行されます

  return <p>Timer: {seconds} seconds</p>;
}

useContext(context)- React コンテキストを取得して購読します。

例

import React, { useContext } from 'react';

const MyContext = React.createContext('default');

function MyComponent() {
  const contextValue = useContext(MyContext);
  return <p>Context value: {contextValue}</p>;
}

useReducer(reducer, initialState)- 複雑な状態ロジックのための reducer と dispatch 関数を宣言します。

例

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

useCallback(callback, [dependencies])- コールバック関数をキャッシュし、依存関係が変化するまで再作成を避けます。

例

import React, { useState, useCallback } from 'react';

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

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <ChildComponent onClick={increment} />
    </div>
  );
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Increment Count</button>;
}

useMemo(factory, [dependencies])- 計算結果をキャッシュし、依存関係が変化するまで再計算を避けます。

例

import React, { useMemo } from 'react';

function ExpensiveComponent({ data }) {
  const expensiveValue = useMemo(() => {
    return computeExpensiveValue(data);
  }, [data]);

  return <div>Expensive value: {expensiveValue}</div>;
}

useRef(initialValue)- 永続的な参照を作成します。DOM 要素へのアクセスや任意の可変値のキャッシュに使用できます。

例

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </>
  );
}

その他の一般的な関数

ReactDOM.render(element, container[, callback])- React 要素を指定された DOM ノードにレンダリングします。

例

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, World!</h1>;
ReactDOM.render(element, document.getElementById('root'));

ReactDOM.createRoot(container[, options])- コンカレントレンダリング機能をサポートする React ルートインスタンスを作成します。

例

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

ReactDOM.unmountComponentAtNode(container)- 指定された DOM ノード上の React コンポーネントをアンマウントします。

例

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.unmountComponentAtNode(document.getElementById('root'));

ReactDOMServer.renderToString(element)- React 要素を静的 HTML 文字列にレンダリングします。サーバーサイドレンダリングに使用します。

例

import React from 'react';
import ReactDOMServer from 'react-dom/server';

const element = <div>Hello, World!</div>;
const htmlString = ReactDOMServer.renderToString(element);
その他の拡張