こんにちは😊
株式会社プロドウガの@YushiYamamotoです！
らくらくサイトの開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️
今回は、React初心者向けに「React Hooks」の基本的な使い方と実用例を分かりやすく解説します。Hooksは、Reactでの開発をさらに効率的にするための重要なツールです。この記事を読めば、Hooksの基礎から実践的な使い方までしっかり理解できます！
🧐 React Hooksとは？
React Hooksは、関数コンポーネントで状態管理やライフサイクルメソッドを扱えるようにするための仕組みです。クラスコンポーネントを使わずに、よりシンプルで直感的なコードが書けるようになります。
主な特徴は以下の通りです：
- 状態管理や副作用処理が関数コンポーネントで可能になる
- コードが簡潔になり、再利用性が向上
- クラスコンポーネントの複雑さを回避
🎯 よく使う主要なHooks
以下は、Reactで頻繁に使用される主要なHooksです：
| Hook名 | 用途 |
|---|---|
useState |
状態管理（state）を追加 |
useEffect |
副作用（データ取得やDOM操作など）の処理 |
useContext |
コンテキストAPIを利用 |
useReducer |
複雑な状態管理（Reduxライクなロジック） |
useRef |
DOM要素や値の参照 |
useMemo |
計算結果のメモ化 |
useCallback |
関数のメモ化 |
🛠️ 実践：カウンターアプリを作ってみよう！
まずは、最も基本的なHooksであるuseStateとuseEffectを使ったカウンターアプリを作成してみましょう。
1. 環境準備（2025年最新版）
Create React Appは2025年2月14日に非推奨となりました。現在はViteまたはNext.jsなどのモダンなツールが推奨されています。今回は高速でシンプルなViteを使用して環境構築します。
npm create vite@latest react-hooks-demo -- --template react
cd react-hooks-demo
npm install
npm run dev
2. カウンター機能の実装
以下は、カウンターアプリのコード例です：
カウンターアプリコード
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`現在のカウント: ${count}`);
document.title = `Count: ${count}`;
}, [count]);
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>カウンターアプリ</h1>
<p>現在のカウント: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setCount(count - 1)}>-1</button>
<button onClick={() => setCount(0)}>リセット</button>
</div>
);
}
export default Counter;
解説ポイント
-
状態管理：
useStateでカウント値（count）を管理。 -
副作用処理：
useEffectでカウント値が変更された際にタイトルを更新。 - 依存配列：依存配列（第二引数）により、特定の値が変更されたときのみ処理を実行。
📊 応用例：APIデータ取得
次に、useEffectを活用して外部APIからデータを取得する例を紹介します。
APIデータ取得コード
import React, { useState, useEffect } from 'react';
function UserList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await response.json();
setUsers(data);
setLoading(false);
} catch (error) {
console.error('データ取得エラー:', error);
}
};
fetchData();
}, []);
if (loading) return <p>Loading...</p>;
return (
<div>
<h2>ユーザーリスト</h2>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
export default UserList;
解説ポイント
- 非同期処理：データ取得は非同期関数（async/await）で実装。
- 初回レンダリング時のみ実行：依存配列が空の場合、初回レンダリング時のみ実行されます。
🚀 パフォーマンス最適化Tips
リッチなUIや複雑なロジックではパフォーマンス最適化が重要です。以下のHooksを活用しましょう：
1. useMemo
計算コストが高い処理結果をメモ化します。
const expensiveCalculation = useMemo(() => {
return heavyFunction(data);
}, [data]);
2. useCallback
関数オブジェクトの再生成を防ぎます。
const handleClick = useCallback(() => {
console.log('クリックされました');
}, []);
🏁 まとめ
今回は、React Hooksの基本と実用例について解説しました。Hooksは、React開発において非常に強力なツールです。まずは基本的なHooks（useState, useEffect）から始めて、徐々に応用的なHooksにも挑戦してみてください！
ぜひこの記事を参考に、自分だけのオリジナルアプリケーションを作成してみましょう✨
質問やフィードバックがあればお気軽にコメントしてください😊
最後に：業務委託のご相談を承ります
私は業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用したレスポンシブなWebサイト制作、インタラクティブなアプリケーション開発、API連携など幅広いご要望に対応可能です。
「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！
👉 ポートフォリオ
🌳 らくらくサイト