React でよく使う useState / useEffect / useLocation / useContext / fetch について、簡単な説明とコード例を紹介する。
1. useState（状態管理）
コンポーネント内で 状態（変数）を管理 するためのフック。
状態が変更されると、コンポーネントが 再レンダリング される。
例: カウンター
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0); // 状態を 0 で初期化
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>増やす</button>
</div>
);
}
export default Counter;ポイント
useState(初期値)で状態を作成[状態変数, 更新関数]の配列を受け取るsetCount(新しい値)で状態を更新（再レンダリング）
小学生でも理解できるように説明してください。
useState（ものを覚えておく）
ページの中で 数字や文字を覚えておくための道具 だよ！
たとえば、ボタンを押すと カウントが増える 仕組みを作れるよ。
例：ボタンを押すと数字が増える！
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0); // 0 からスタート
return (
<div>
<p>今の数: {count}</p>
<button onClick={() => setCount(count + 1)}>増やす</button>
</div>
);
}
export default Counter;ポイント
useState(0)で 最初の数字を 0 にするsetCount(count + 1)をすると、数字が1つ増えるuseStateは 「覚えておくノート」みたいなもの！
2. useEffect（副作用の処理）
データ取得・購読・クリーンアップなど、レンダリングのタイミングで実行する処理 を定義する。
例: タイマー
import { useState, useEffect } from "react";
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setTime((prevTime) => prevTime + 1);
}, 1000);
return () => clearInterval(interval); // クリーンアップ（解除）
}, []); // 初回のみ実行
return <p>経過時間: {time}秒</p>;
}
export default Timer;ポイント
useEffect(関数, 依存配列)[]（空配列）→ 初回のみ実行[変数]（依存関係）→ 変数が変わるたびに実行なし→ 毎回レンダリング時に実行
return () => {...}で クリーンアップ処理 を実行
小学生でも理解できるように説明してください。
useEffect（特別なタイミングで動く）
「ページが表示されたときに、何かをしたい！」ときに使うよ！
たとえば、5秒ごとに「こんにちは！」と表示 するプログラムが作れるよ。
例：5秒ごとにカウントが増える
import { useState, useEffect } from "react";
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setTime((prevTime) => prevTime + 1);
}, 5000); // 5秒ごとに増える
return () => clearInterval(interval); // ストップする
}, []);
return <p>時間: {time}秒</p>;
}
export default Timer;ポイント
useEffectは 「特別なときに動くプログラム」[]をつけると、1回だけ動く- タイマーや、ページが開いたときにデータをとる などに使える！
3. useLocation（現在のURLを取得）
React Router のフックで、現在のURL情報を取得 できる。
ページごとに異なる表示をしたいときに便利。
例: 現在のURLパスを表示
import { useLocation } from "react-router-dom";
function ShowLocation() {
const location = useLocation();
return <p>現在のURLパス: {location.pathname}</p>;
}
export default ShowLocation;セットアップ
useLocationを使うには、アプリをBrowserRouterでラップ する。
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import ShowLocation from "./ShowLocation";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<ShowLocation />} />
<Route path="/about" element={<ShowLocation />} />
</Routes>
</Router>
);
}
export default App;ポイント
useLocation()で 現在のURL情報（location）を取得location.pathnameで 現在のパスを取得
小学生でも理解できるように説明してください。
useLocation（今どのページにいる？）
「今、どのページを見ている？」を調べることができるよ！
例：今のページを教えてくれる
import { useLocation } from "react-router-dom";
function ShowLocation() {
const location = useLocation(); // 今のページを調べる
return <p>今のページ: {location.pathname}</p>;
}
export default ShowLocation;ポイント
useLocation()を使うと、今のページのURLがわかる！- たとえば
http://example.com/aboutのとき、location.pathnameは"/about"になる！
4. useContext（グローバルなデータ共有）
コンポーネント間で データを共有 するためのフック。useState だと 親 → 子 にしかデータを渡せない が、useContext を使うと どのコンポーネントからでもデータを取得 できる。
例: ユーザー名をコンテキストで管理
import { createContext, useState, useContext } from "react";
// 1. Context を作成
const UserContext = createContext();
function UserProvider({ children }) {
const [user, setUser] = useState("Alice"); // ユーザー名を管理
return (
<UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
);
}
// 2. コンテキストを利用するカスタムフック
function useUser() {
return useContext(UserContext);
}
// 3. ユーザー情報を表示するコンポーネント
function UserProfile() {
const { user, setUser } = useUser();
return (
<div>
<p>現在のユーザー: {user}</p>
<button onClick={() => setUser("Bob")}>Bob に変更</button>
</div>
);
}
// 4. アプリ全体でコンテキストを提供
function App() {
return (
<UserProvider>
<UserProfile />
</UserProvider>
);
}
export default App;ポイント
createContext()で コンテキストを作成UserProviderを作り、value={{ user, setUser }}で データを提供useContext(UserContext)で データを取得setUser("Bob")で ユーザー名を変更可能
小学生でも理解できるように説明してください。
useContext（みんなでデータを共有！）
たとえば、ゲームで 「プレイヤーの名前」 を、いろんな画面で使いたい！ というときに使えるよ。
例：「プレイヤーの名前」をどこでも使えるようにする！
import { createContext, useState, useContext } from "react";
// 1. プレイヤーの情報を作る
const PlayerContext = createContext();
function PlayerProvider({ children }) {
const [player, setPlayer] = useState("たろう");
return (
<PlayerContext.Provider value={{ player, setPlayer }}>
{children}
</PlayerContext.Provider>
);
}
// 2. プレイヤーの名前を使う
function PlayerInfo() {
const { player, setPlayer } = useContext(PlayerContext);
return (
<div>
<p>プレイヤーの名前: {player}</p>
<button onClick={() => setPlayer("はなこ")}>名前を変える</button>
</div>
);
}
// 3. アプリでプレイヤーを共有
function App() {
return (
<PlayerProvider>
<PlayerInfo />
</PlayerProvider>
);
}
export default App;ポイント
createContext()で 「みんなで使えるデータ」 を作る！useContext(PlayerContext)で どこでもデータが使える- ゲームのプレイヤー名や、アプリのテーマ（暗いモード・明るいモード） などに使えるよ！
5. fetch（APIデータ取得）
fetch() は、外部APIからデータを取得するための関数。
通常、useEffect と組み合わせて使う。
例: API からデータ取得
import { useState, useEffect } from "react";
function FetchData() {
const [data, setData] = useState(null);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos/1") // APIリクエスト
.then((response) => response.json()) // JSON に変換
.then((json) => setData(json)) // 状態を更新
.catch((error) => console.error("Error:", error)); // エラーハンドリング
}, []);
return <pre>{data ? JSON.stringify(data, null, 2) : "データ取得中..."}</pre>;
}
export default FetchData;ポイント
fetch(URL)で API リクエスト.then((response) => response.json())で JSON に変換.then((data) => setData(data))で 状態を更新.catch((error) => console.error("Error:", error))で エラー処理
小学生でも理解できるように説明してください。
fetch（インターネットからデータをもらう！）
fetch() を使うと、インターネットからデータをとってこれる！
たとえば、天気のデータやニュースのデータ をもらってくることができるよ。
例：ニュースをとってくる！
import { useState, useEffect } from "react";
function FetchData() {
const [data, setData] = useState(null);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos/1") // API からデータをもらう
.then((response) => response.json()) // JSON にする
.then((json) => setData(json)) // データを保存
.catch((error) => console.error("エラー:", error));
}, []);
return <pre>{data ? JSON.stringify(data, null, 2) : "データ取得中..."}</pre>;
}
export default FetchData;ポイント
fetch(URL)で データをもらう.then((response) => response.json())で 読みやすくする.then((data) => setData(data))で データを覚える.catch((error) => ...)で エラーが出たときに知らせる！
まとめ
| フック / 関数 | 役割 | 補足 |
|---|---|---|
useState | 状態を管理（変数の更新で再レンダリング） | ページの中で変わる数字や文字を覚える！ |
useEffect | 副作用（データ取得・イベント登録など） | 「ページが表示されたとき」などに動く！ |
useLocation | 現在のURL情報を取得（React Router） | 「今どのページ？」を知る！ |
useContext | アプリ内でデータを共有（グローバルステート） | 「みんなでデータを使う！」 |
fetch | API からデータを取得 | 「インターネットからデータをもらう！」 |
どんなケースで使う？
例えば…
- ページの状態管理 →
useState - APIデータ取得 →
fetch+useEffect - 現在のページの情報を取得 →
useLocation - アプリ全体のデータ共有（例: ユーザー情報） →
useContext
何か 試したいことや、実装したい機能 があれば教えて！