React 応用②

カスタムフック、共通化、振り返り

前回の復習

React 応用①のおさらい

シングルページアプリ【SPA】＝単一HTMLファイル

アプリケーション全体が1つのindex.htmlから始まる
ページ遷移時も同じHTMLファイル内で完結
JavaScriptがDOMを直接操作してコンテンツを切り替える
URLが変わる場合もあるが、実際にはページリロードしない



<!DOCTYPE html>
<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div> <!-- ここにReactがコンテンツを描画 -->
    <script src="bundle.js"></script> <!-- アプリケーションのコード -->
</body>
</html>

従来じゅうらいのサイトは、ページごとに別べつのHTMLファイルを読よみ込こみます。
でもSPAは違ちがいます。最初さいしょに一度いちどだけHTMLを読よみ込こんで、あとはJavaScriptで中身なかみを入いれ替かえます。
だから画面がめんの切きり替かえが速はやいです。
ただし、SPAは最初さいしょにすべてのJavaScriptをダウンロードするため、初回しょかいのロード時間じかんが長ながくなることがあります。

コンポーネント＝関数

// コンポーネント定義（大文字で開始）
function UserCard({ name, email, children }) {
  return (
    <div className="card">
      <h3>{name}</h3>
      <p>{email}</p>
      {children}
    </div>
  );
}


// 使用
<UserCard name="Kurotsuchi Mayuri" email="m.kurotsuchi@seireitei.co.jp">
  <button>編集</button>
</UserCard>

props = 関数の引数
children = タグの中身

状態＝再レンダーを引き起こす変数


import React, { useState } from 'react';

function LikeButton() {
  // [現在の値, セッター関数] = useState(初期値)
  const [likes, setLikes] = useState(0);

  return (
    <div>
      <button onClick={() => setLikes((prevLikes) => prevLikes + 1)}>
        ♡ {likes}
      </button>
    </div>
  );
}

動作の流れ

useState(0) → 初期値0でいいね数を作成
ボタンクリック → setLikes(likes + 1)
状態更新 → コンポーネント再レンダリング
新しい値でUI更新

重要：状態が変わるたびに関数コンポーネント全体が再実行される

制御されたコンポーネント＝状態＋イベントハンドラー

基本構造

// 3つの要素が必須
const [value, setValue] = useState('');        // 1. 状態

return (
  <input 
    value={value}                              // 2. input要素
    onChange={(e) => setValue(e.target.value)} // 3. ハンドラー関数
  />
);

重要なポイント

valueは必ずstate由来
onChangeでstateを更新
状態変更 → 再レンダリング
Reactが完全に制御

・「Controlled」では、Reactが扱います
・「Uncontrolled」では、Reactが状態を知らない、DOMに任せます

なぜ純粋コンポーネントが必要なのか？

コンポーネント(props, state) → JSX

Reactの要求:

同じ入力 → 同じ出力
レンダー中に副作用を起こさない

理由: レンダー中、Reactは勝手に

コンポーネントを複数回実行
途中でキャンセル・やり直し
最適化のため結果を破棄

副作用＝外部世界との相互作用

レンダー中に副作用を実行すると → いつ何回実行されるかわからない

Reactは、同おなじpropsとstateなら同おなじ結果けっかが返かえることを期待きたいしています。
なぜなら、Reactは最適化さいてきかのために、コンポーネントを何度なんども実行じっこうしたり、途中とちゅうでキャンセルしたりするからです。
もしレンダー中ちゅうにAPIを叩たたいたら、同おなじリクエストが何回なんかいも飛とんでしまいます。
だから副作用ふくさようは、決きまったタイミングでだけ実行じっこうする必要ひつようがあります。

管理された副作用

ユーザーアクション時 ✅

function handleClick() {
  fetch('/api/data'); // 予測可能
}

コンポーネント状態変化時 ✅

useEffect(() => {
  fetch('/api/data'); // 安全なタイミング
}, []);

レンダー中 ❌

function Component() {
  fetch('/api/data'); // 同じAPIを何回も叩く
  document.title = "バカ"; // タイトルがチカチカする
  ...
}

エフェクト＝副作用を「いつ実行するか」で制御する仕組み

import { useEffect } from "react";

function Component() {
    function cleanup() { // クリーンアップ関数：リソースの解放
        console.log("アンマウント時や次のエフェクト実行前");
    }

    function setup() { // エフェクト関数：副作用を実行
        console.log("DOM更新後に実行される");
        return cleanup;
    }

    useEffect(setup, [/* 依存配列 */]);

    return <div>...</div>;
}

エフェクト関数: 副作用を実行する関数
クリーンアップ関数（オプション）: リソース解放
依存配列（オプション）: 実行制御

依存配列なし → 毎回実行
空の依存配列 [] → 初回のみ
値を指定 [userId] → 値変更時のみ

コンポーネントのライフサイクル

マウント

コンポーネント初期化
初回レンダリング
DOM更新
useEffect実行

画面に追加された時

初回ページ読み込み
親コンポーネントが初回作成

条件付きレンダリング

{show && <Component />} // show → true

更新

stateやpropsの変更検知
再レンダリング
DOM差分更新
前のエフェクトクリーンアップ
新しいエフェクト実行

propsやstateが変化した時

setState呼び出し
親からpropsが変更
useEffect依存配列の値変更

アンマウント

全エフェクトクリーンアップ
DOMから削除
メモリ解放

画面から削除された時

親コンポーネントが削除
ページを閉じる/離脱

条件付きレンダリング

{show && <Component />} // show → false

ビジュアル解説はこちら

フックとは

useで始まる特別な関数

フックとは

コンポーネント内でReactの機能を使うための関数

すべてuseで始まる特別な関数 → フック

function Counter() {
    const [count, setCount] = useState(0);        // 状態管理
    const inputRef = useRef(null);                // DOM参照
    
    useEffect(() => {                             // 副作用
        document.title = `カウント: ${count}`;
    }, [count]);
    
    return <div>カウント: {count}</div>;
}

組み込みの React フック

フックを使つかうと、コンポーネントに色々いろいろな機能きのうを追加ついかできます。
例たとえば、データを記憶きおくしたり、DOMを直接ちょくせつ触さわったり。
名前なまえが必かならずuseで始はじまるので、すぐ分わかります。
公式こうしきドキュメントには、もっとたくさんのフックが載のっています。

Reactはフックを順序で管理する

function MyComponent() {
    const [name, setName] = useState("");     // フック #1
    const [age, setAge] = useState(0);        // フック #2
    useEffect(() => { ... }, []);             // フック #3
    const [email, setEmail] = useState("");   // フック #4
    
    // React内部では配列のように管理（概念的に）
    // [useState, useState, useEffect, useState]
}

各レンダー時に同じ順序でフックが呼ばれることをReactは期待している

順序が変わると何が起こるか

1回目のレンダー：`showAge = true`

function Component({ showAge }) {
    const [name, setName] = useState("竜騎");  // #1

    if (showAge) {
        const [age, setAge] = useState(51);   // #2
    }

    const [email, setEmail] = useState("");   // #3
    
    // React: [useState, useState, useState]
}

React: [name, age, email]

2回目のレンダー：`showAge = false`

function Component({ showAge }) {
    const [name, setName] = useState("竜騎");  // #1

    // age のフックがスキップされる！

    const [email, setEmail] = useState("");   // #2 ← 前回の#3
    
    // React: [useState, useState] 
    // 「あれ？ #3 のフックはどこ？」
}

React: [name, email] ← 順序が変わった！

Reactが混乱 → エラーまたは予期しない動作

フックのルール

要するに：毎回同じ順序でフックを呼び出す

ルール1：トップレベルでのみ呼び出し

ループ、条件分岐、ネストした関数内で
呼び出してはいけない
コンポーネントやフックの最上位で呼び出す

ルール2：React関数からのみ呼び出し

Reactコンポーネントから呼び出す
またはuseで始まる関数から呼び出す

フックのルール違反例

条件分岐内でのフック

function Component({ condition }) {
  if (condition) {
    const [state, setState] = useState(0); // NG!
    
    useEffect(() => {
      // ...
    }, []);
  }
  
  return <div>...</div>;
}

正しい書き方

function Component({ condition }) {
  const [state, setState] = useState(0); // OK!
  
  useEffect(() => {
    if (condition) {
      // 条件分岐はフック内部で
    }
  }, [condition]);
  
  return <div>...</div>;
}

フックの実行順序が変わると、Reactの内部状態管理が破綻します

まとめ

Reactはフックを呼び出し順序で管理している
毎回同じ順序で呼ぶ必要がある（ルール）
ルールを破ると予期しない動作やエラーが発生
リンター（ESLintなど）でルール違反を自動検出できる

カスタムフック

コンポーネント間でのロジック共有

カスタムフック

既存のフックを組み合わせて作る独自のフック

// 1. 名前は「use」で始める（必須）
function useToggle(initialValue = false) { 
    // 2. 組み込みフックを最上位で呼び出す
    const [value, setValue] = useState(initialValue); 
    
    // 3. 必要なロジックを書く
    const toggle = () => setValue(prev => !prev);
    
    // 4. 必要なロジックを書く
    return [value, toggle];
}

useStateを内部で使っている → これはフック
複数のコンポーネントで再利用できる
同じフックのルールが適用される

➡

使用例：通常のフックと同じように使う

function Modal() {
    // カスタムフックを呼び出す
    const [isOpen, toggleOpen] = useToggle(false); 
    
    return (
        <>
            <button onClick={toggleOpen}>
                {isOpen ? '閉じる' : '開く'}
            </button>
            {isOpen && <div>モーダル内容</div>}
        </>
    );
}

// 他のコンポーネントでも同じロジックを再利用可能
function Sidebar() {
    const [isVisible, toggleVisible] = useToggle(true);
    // ...
}

カスタムフックは、既存きぞんのフックを組くみ合あわせて作つくります。
名前なまえをuseで始はじめるのは、Reactへの約束やくそくです。
この例れいでは、useStateを使つかっているので、これは立派りっぱなフックです。
一度いちど作つくれば、色々いろいろなコンポーネントで使つかい回まわせます。

何がフックを「フック」にするのか

フック = 他のフック（組み込みのReact機能）を呼び出す関数

実際のフック

useStateを呼び出している → フック

function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);
    
    const increment = () => setCount(prev => prev + 1);
    
    return [count, increment];
}

フックではない普通の関数

他のフックを呼び出していない → ただの関数

function formatPrice(price) {
    return `¥${price.toLocaleString()}`;
}

見分みわけ方かたは簡単かんたんです。中なかで他ほかのフックを呼よんでいるか？
左側ひだりがわはuseStateを呼よんでいるので、フックです。
右側みぎがわはフックを全然ぜんぜん呼よんでいません。ただの関数かんすうです。
フックじゃない関数かんすうなら、useで始はじめちゃダメです。

フックは他のフックを呼び出せる

カスタムフック同士も組み合わせ可能

// 基本的なフック
function useToggle(initialValue = false) {
    const [value, setValue] = useState(initialValue);
    const toggle = () => setValue(prev => !prev);
    return [value, toggle];
}

// 他のカスタムフックを使うカスタムフック
function useModal() {
    const [isOpen, toggleOpen] = useToggle(false);  // カスタムフック呼び出し
    const [data, setData] = useState(null);         // 組み込みフック呼び出し
    
    const openModal = (modalData) => {
        setData(modalData);
        toggleOpen();
    };
    
    return { isOpen, data, openModal, closeModal: toggleOpen };
}

フックの中でフックを呼ぶ = 普通のこと

カスタムフックも同じルールに従う

カスタムフックは既存のフックの組み合わせ

function useToggle(initialValue) {
    const [value, setValue] = useState(initialValue); // これは普通のuseState呼び出
    const toggle = () => setValue(prev => !prev);
    
    return [value, toggle];
}

// Reactから見ると：
function MyComponent() {
    const [isOpen, toggleOpen] = useToggle(false);    // useToggleの中のuseState
    const [isDark, toggleDark] = useToggle(true);     // 2つ目のuseToggleの中のuseState
    
    // Reactから見ると普通のフック呼び出しと同じ
}

Reactの追跡システムに新しい魔法は加えない

【例】同じロジックを何度も書いている...

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    
    useEffect(() => {
        fetch(`/api/users/${userId}`)
            .then(res => res.json())
            .then(setUser)
            .catch(setError)
            .finally(() => setLoading(false));
    }, [userId]);
    
    if (loading) return <div>ユーザーを読み込み中...</div>;
    // ...
}


function PostList() {
    const [posts, setPosts] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    
    useEffect(() => {
        fetch('/api/posts')
            .then(res => res.json())
            .then(setPosts)
            .catch(setError)
            .finally(() => setLoading(false));
    }, []);
    
    if (loading) return <div>投稿を読み込み中...</div>;
    // ...
}

この3つの状態パターンが繰り返されている
このuseEffectのfetchパターンも同じ

バグ修正や機能追加で両方変更する必要があります

【例】カスタムフック

共通状態ロジックを抽出

function useApi(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    
    useEffect(() => {
        setLoading(true);
        fetch(url)
            .then(res => res.json())
            .then(setData)
            .catch(setError)
            .finally(() => setLoading(false));
    }, [url]);
    
    return { data, loading, error };
}

➡

使用例：

function UserProfile({ userId }) {
    const { data, loading, error } = useApi(`/api/users/${userId}`);
    
    if (loading) return <div>ユーザーを読み込み中...</div>;
    if (error) return <div>エラー</div>;
    
    return <div>{data.name}</div>;
}

function PostList() {
    const { data, loading, error } = useApi('/api/posts');
    
    if (loading) return <div>投稿を読み込み中...</div>;
    if (error) return <div>エラー</div>;
    
    return data.map(post => <div>{post.title}</div>);
}

【例】なぜレンダリングロジックは含めないのか？

フックはロジック、コンポーネントは表示

// ❌ 責任が混在 - 再利用しにくい
function useBadApi(url) {
    // ... fetchロジック
    
    if (loading) return <div>読み込み中...</div>;  // UIをフックが決めてる

    return data; // フックがデーターもを返してる？
}

// ✅ データだけを返して、表示は各コンポーネントに任せる
function useApi(url) {
    // ... fetchロジック

    return { data, loading, error };  // コンポーネントが表示を決める
}

フックは状態を管理、コンポーネントがJSXを管理

カスタムフックを作る理由

1. ロジックの再利用

// 複数のコンポーネントで同じロジック
function Profile() {
    const [isOpen, toggleOpen] = useToggle(false);
    // ...
}

function Settings() {
    const [isVisible, toggleVisible] = useToggle(true);
    // ...
}

一度書けば、どこでも使える

2. 複雑なロジックの抽象化

function useApi(url) {
    // 3つの状態 + useEffect
    // 複雑なfetchロジック
    // ...
}

function Profile() {
    // シンプルな1行
    const { data, loading, error } = useApi(url);
}

実装の詳細を気にしなくていい

3. テストが簡単

フックは独立してテストできる

4. コンポーネントがすっきり

ビジネスロジック vs 表示ロジック

まとめ

既存のフックを組み合わせて作る独自のフック
複雑な状態ロジックを抽象化できる
コンポーネント間でロジックを簡単に共有できる
同じフックのルールが適用される

理解度チェック①【フックのルール】

このコードの問題は？

function Component({ showData }) {
  if (showData) {
    const [data, setData] = useState(null);
    
    useEffect(() => {
      fetchData().then(setData);
    }, []);
  }
  
  return <>...</>;
}

A) fetchDataが定義されていない

B) 条件分岐内でフックを呼んでいる

C) useEffectの依存配列が間違い

D) 特に問題なし

答え: B) フックは必ずトップレベルで呼び出す必要がある

理解度チェック②【カスタムフック】

次のうち、カスタムフックとして正しいものは？

function getUser(id) { // A
    return fetch(`/users/${id}`); 
}

function useUser(id) { // C
    const [user, setUser] = useState(null); 
    return user; 
}

function useUser(id) { // B
    return fetch(`/users/${id}`); 
}

function User(id) { // D
    const [user, setUser] = useState(null); 
    return <div>{user}</div>; 
}

A) getUser(id)

B) useUser(id)

C) useUser(id)

D) User(id)

答え: C) 他のフックを呼んでいて、useで始まる

カスタムフックは、useで始はじまり、中なかで他ほかのフックを使つかいます。
CのuseUserはuseStateを使つかっているので、正ただしいカスタムフックです。
だから、Cが正解せいかいです。

理解度チェック③【フックの呼び出し】

このコードの問題は？

function useCounter() {
  let count = 0;  // 普通の変数
  const increment = () => count++;

  return [count, increment];
}

A) 名前が間違っている

B) countがuseStateじゃない → 再レンダリングされない

C) incrementの書き方が間違い

D) 問題なし

答え: B) 状態はuseStateで管理する必要がある

このコードでは、countが普通ふつうの変数へんすうです。
でも、Reactでは状態じょうたいをuseStateで管理かんりしないと、再さいレンダリングされません。
だから、Bが正解せいかいです。

React 実践演習

1つの課題 (15-20分)

今日学んだ内容を実際に使ってみよう！

react-lessons/lesson_4/task.md

実践演習ポケモンAPIフック

共通のfetchパターンをuseApiフックに抽出してください

現在：重複したコード

PokemonCard で fetch
TypeInfo でも同じ fetch
同じ状態管理パターン

→

目標：共通化

useApi(url) を作成
両方のコンポーネントで使用
重複を削除

function useApi<T>(url: string) {
  // 1. data, loading, error の状態を管理
  // 2. useEffect で fetch 処理を実装
  // 3. { data, loading, error } を返す
}

// 使用例
const { data, loading, error } = useApi<Pokemon>(url);

react-lessons/lesson_4/task.md

第4回まとめ

今日学んだこと

フックは React の機能を活用するための特別な関数です
フックのルールを守らないと、バグやエラーが発生する可能性があります
カスタムフックを使えば、状態ロジックを抽象化して再利用できます

次のステップ

実際のプロジェクトで使ってみる
質問があればChatWorkで
宿題のプルリクエストは（まだ）大歓迎です

お疲れ様でした！

ありがとうございました

React 応用②

カスタムフック、共通化、振り返り

前回の復習

シングルページアプリ【SPA】＝ 単一HTMLファイル

コンポーネント ＝ 関数

状態 ＝ 再レンダーを引き起こす変数

動作の流れ

制御されたコンポーネント ＝ 状態 ＋ イベントハンドラー

基本構造

重要なポイント

なぜ純粋コンポーネントが必要なのか？

管理された副作用

ユーザーアクション時 ✅

コンポーネント状態変化時 ✅

レンダー中 ❌

エフェクト ＝ 副作用を「いつ実行するか」で制御する仕組み

コンポーネントのライフサイクル

マウント

更新

アンマウント

フックとは

フックとは

Reactはフックを順序で管理する

順序が変わると何が起こるか

1回目のレンダー：showAge = true

2回目のレンダー：showAge = false

フックのルール

ルール1：トップレベルでのみ呼び出し

ルール2：React関数からのみ呼び出し

フックのルール違反例

条件分岐内でのフック

正しい書き方

まとめ

カスタムフック

カスタムフック

既存のフックを組み合わせて作る独自のフック

使用例：通常のフックと同じように使う

何がフックを「フック」にするのか

実際のフック

フックではない普通の関数

フックは他のフックを呼び出せる

カスタムフックも同じルールに従う

【例】同じロジックを何度も書いている...

【例】カスタムフック

共通状態ロジックを抽出

使用例：

【例】なぜレンダリングロジックは含めないのか？

カスタムフックを作る理由

1. ロジックの再利用

2. 複雑なロジックの抽象化

3. テストが簡単

4. コンポーネントがすっきり

まとめ

理解度チェック①【フックのルール】

このコードの問題は？

理解度チェック②【カスタムフック】

次のうち、カスタムフックとして正しいものは？

理解度チェック③【フックの呼び出し】

このコードの問題は？

React 実践演習

1つの課題 (15-20分)

実践演習 ポケモンAPIフック

現在：重複したコード

目標：共通化

第4回まとめ

今日学んだこと

次のステップ

お疲れ様でした！

シングルページアプリ【SPA】＝単一HTMLファイル

コンポーネント＝関数

状態＝再レンダーを引き起こす変数

制御されたコンポーネント＝状態＋イベントハンドラー

エフェクト＝副作用を「いつ実行するか」で制御する仕組み

1回目のレンダー：`showAge = true`

2回目のレンダー：`showAge = false`

実践演習ポケモンAPIフック