React Hooks 入門

Hook（フック）を使用すると、クラス（Class）を使用せずに関数（Function）からステート（State）やその他のReact機能にアクセスできるようになります。

プロップス（Props）、ステート、コンテキスト（Context）、リファレンス（Refs）、ライフサイクル（Lifecycle）といったReactの概念に対して、より直接的なAPIを提供します。

1. Hookとは？

Hookとは、関数コンポーネントからReactのステートやライフサイクル機能に「接続（フック）」するための関数です。

1.1 実装例

以下はHookを使用した実装例です。現時点で内容が完全に理解できなくても心配しないでください。詳細は次のセクションで詳しく解説します。

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function FavoriteColor() {
  // useStateフックを使用してステートを定義
  const [color, setColor] = useState("赤");

  return (
    <>
      <h1>私のお気に入りの色は {color} です！</h1>
      <button
        type="button"
        onClick={() => setColor("青")}
      >青</button>
      <button
        type="button"
        onClick={() => setColor("赤")}
      >赤</button>
      <button
        type="button"
        onClick={() => setColor("ピンク")}
      >ピンク</button>
      <button
        type="button"
        onClick={() => setColor("緑")}
      >緑</button>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <FavoriteColor />
);

Hookは必ず react からインポート（import）して使用する必要があります。

この例では、useState フックを使用してアプリケーションのステートを追跡しています。
一般的に「ステート（State）」とは、追跡が必要なアプリケーションのデータやプロパティを指します。

2. Hookのルール (Hook Rules)

Hookを利用する際には、3つの厳格なルールが存在します。

1. Reactの関数コンポーネント内でのみ呼び出すこと: クラスコンポーネント内では動作しません。
2. コンポーネントのトップレベル（最上位）でのみ呼び出すこと: ネストされた関数内で呼び出すことはできません。
3. 条件分岐（if文など）の中で呼び出さないこと: 常に同じ順序で実行される必要があります。

注意: HookはReactのクラスコンポーネント（Class Components）内では使用できません。現代のReact開発では、これらのHookを活用した関数コンポーネントによる設計が主流となっています。