• はじめに Reactのカスタムフックを学びましょう！カスタムフックを使うと、コンポーネントのロジックを再利用可能な関数に抽出できます。GeekとGalが楽しく魅力的な形でカスタムフックを調べてみましょう。
Gal Normal

カスタムフックって、コンポーネント間でロジックを共有するのにめちゃくちゃ便利なんだよね！

Geek Curious

それってすごいね！カスタムフックってどうやって作るの？

Gal Happy

カスタムフックを作るのは簡単だよ！"use"で始まる関数を作って、その中で他のフックを使うだけなんだ！

  • カスタムフックの作成
Gal Pleased

カウンターの状態を管理するカスタムフックの例を見てみてね：

import { useState } from 'react';

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return [count, increment, decrement];
}
Geek Happy

じゃあ、"use"で始まる関数を作って、その中で他のフックを使うだけなんだね！簡単だ！

Gal Happy

そう！カスタムフックを使いたいときは、コンポーネントで他のフックと同じように呼び出すだけなんだ！

  • カスタムフックの使用
Gal Pleased

useCounter カスタムフックを使ったコンポーネントの例を見てみて：

import React from 'react';
import useCounter from './useCounter';

function Counter() {
  const [count, increment, decrement] = useCounter(0);

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}
Geek Happy

なるほど！他のフックと同じようにカスタムフックを呼び出して、必要な値や関数が返ってくるんだね！

Gal Happy

その通り！カスタムフックを使うと、コンポーネント間でロジックを簡単に共有して再利用できるようになるんだ！

  • おわりに カスタムフックは、Reactの強力な機能で、コンポーネネント間でロジックを抽出して共有することができます。“use"で始まる関数を作成し、その中で他のフックを使用することで、カスタムフックを作成してコードをより再利用可能でモジュール化された形にすることができます。カスタムフックを使って楽しいコーディングをしましょう！😃