🚀 はじめに

React Hooksは、関数コンポーネントで状態とライフサイクル機能を使用できるようにする強力な機能です。以前はクラスコンポーネントでのみ利用可能だった機能が、Hooksを使用することで、より簡潔で再利用可能なコードで実現できます。このガイドでは、React Hooksの基礎から応用までを網羅し、初心者でも簡単に理解できるように解説します。

📚 基礎知識

Hooksは、React 16.8で導入された新しい機能です。Hooksを使用することで、関数コンポーネントで状態とライフサイクル機能を扱うことができます。これにより、コードの可読性が向上し、再利用性が高まります。

🔍 詳細解説

useState Hookの使い方

useStateは、関数コンポーネントに状態を追加するためのHookです。状態変数を宣言し、その値を更新するための関数を返します。

import React, { useState } from 'react';

function Counter() {
  // count変数を宣言し、初期値を0に設定
  const [count, setCount] = useState(0);

  // カウントを増やす関数
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

useEffect Hookの使い方

useEffectは、関数コンポーネントで副作用を実行するためのHookです。副作用とは、データの取得、DOMの操作、タイマーの設定など、コンポーネントのレンダリングとは直接関係のない処理のことです。

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

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

  useEffect(() => {
    // コンポーネントのマウント時に実行
    const fetchData = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const result = await response.json();
      setData(result);
    };

    fetchData();

    // クリーンアップ関数 (コンポーネントのアンマウント時に実行)
    return () => {
      console.log('Component unmounted');
    };
  }, []); // 空の依存配列は、コンポーネントのマウント時に一度だけ実行

  if (!data) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>Data from API</h1>
      <p>Title: {data.title}</p>
    </div>
  );
}

export default DataFetcher;

カスタム Hooksの作成

カスタム Hooksは、ロジックを再利用可能な形でまとめるための仕組みです。カスタム Hooksは、`use`で始まる名前を付ける必要があります。

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error('Error getting item from localStorage:', error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (error) {
      console.error('Error setting item to localStorage:', error);
    }
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
}

export default useLocalStorage;

カスタム Hooksを使うことで、コンポーネントのロジックをより整理し、再利用性を高めることができます。

— React Docs

⚡ 実践ガイド

npx create-react-app my-app
cd my-app
npm start

import React, { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Input value:', inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="myInput">Enter text: </label>
      <input type="text" id="myInput" value={inputValue} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

🎯 応用編

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

function MyComponent() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState([]);

  // メモ化された関数
  const fetchData = useCallback(() => {
    // データ取得処理
    setData([1, 2, 3, 4, 5]);
  }, []);

  // メモ化された値
  const processedData = useMemo(() => {
    // データ加工処理
    return processedData.map(item => item * 2);
  }, [processedData]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Processed Data: {processedData}</p>
    </div>
  );
}

export default MyComponent;

🛠️ トラブルシューティング

🎉 まとめ