• はじめに 今日はReact Hooksについて学びましょう。Hooksは、関数コンポーネントで状態や他のReact機能を使う方法で、より強力で使いやすくなります。GeekとGalという2人のキャラクターと一緒に、React Hooksを探検しましょう！
Gal Normal

React Hooksは、Reactの関数コンポーネントにとって画期的なものなのよ！

Geek Curious

Hooksはどのように動作し、なぜ重要なの？

Gal Happy

Hooksは、関数コンポーネントで状態やライフサイクル機能を使うことができ、より柔軟でメンテナンスが容易になります。一般的なHooksは、 useState と useEffect です。

  • useState
Gal Pleased

useState フックは、関数コンポーネントに状態を追加することができます。現在の状態値とそれを更新する関数の2つの要素を持つ配列を返します。

Geek Curious

例を見せてもらえる？

Gal Happy

もちろん！ useState を使った関数コンポーネントの簡単な例を見てください：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>インクリメント</button>
    </div>
  );
}
Geek Happy

なるほど！ useState を使って関数コンポーネントに状態を追加し、現在の状態値と更新関数を返すんだね。

Gal Happy

その通り！関数コンポーネントをより強力で使いやすくするわ。

  • useEffect
Gal Pleased

useEffect フックは、関数コンポーネントで副作用を実行することができます。データの取得やDOMの更新などです。これはクラスコンポーネントのライフサイクルメソッドに似ています。

Geek Curious

useEffect の例を見せてもらえる？

Gal Happy

もちろん！ useEffect を使って関数コンポーネントでデータを取得する例を見てください：

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

function DataFetcher() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      setData(data);
    }

    fetchData();
  }, []);

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}
Geek Happy

なるほど！ useEffect を使って関数コンポーネントで副作用を実行できるんだね。さらに強力になるね！

Gal Happy

まさに！ useState や useEffect のようなフックを使うことで、関数コンポーネントはより多機能でメンテナンスが容易になりました。

  • おもしろい例
Geek Curious

React Hooksを使った面白い例はある？

Gal Pleased

もちろん！フックを使ってランダムなジョークを表示する関数コンポーネントを作ってみましょう！

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

function RandomJoke() {
  const [joke, setJoke] = useState('');

  useEffect(() => {
    async function fetchJoke() {
      const response = await fetch('https://api.example.com/random-joke');
      const data = await response.json();
      setJoke(data.joke);
    }

    fetchJoke();
  }, []);

  return (
    <div>
      <p>{joke}</p>
    </div>
  );
}