使用技術と構成

先にさっと、使用技術の詳細と構成を書きます

React Router
Chakra UI
Vite

ファイル構成

packages/client/src
├─ assets/        — 画像・フォントなど
├─ components/    — 共通Reactコンポーネント
├─ constants/     — 各種定数
├─ hooks/         — カスタムフック
├─ pages/         — 画面コンポーネント
├─ test/          — テスト類
├─ types/         — 型定義
├─ app.tsx        — ルートApp
├─ main.tsx       — DOMエントリ
├─ router.tsx     — ルーティング設定
└─ vite-env.d.ts  — Vite型宣言

ViewとControllerを分ける？？

自分で実装してみたり、Copilotくんに頼ったりしながら実装してました。

しかしいざレビューをしてもらう時に、

「見た目のコンポーネントにコントローラー相当の実装を詰め込まない方がいい！」

と言われました。

一体どういうことだ...? となりつつも、教えてもらいました！！

React は厳密な MVC ではないものの、「UI（View）に寄せた部分」と「ロジック（Controller 的な振る舞い）」を意識的に切り分けると読みやすくなるケースが多いとのこと。

ずばり、今回のケースではUIとロジックを分けると書きやすかった、つまりTSXでは表示のみに徹し、カスタムフックでコンポーネントのロジックを受け持たせるのがよい構成だったのです。

これだけだとピンとこないので、実例を見てみましょう

分ける前

これを

import { useEffect, useState, type ChangeEvent } from "react"

export function TestComponent() {
    const [inputText, setInputText] = useState<string | null>(null);
    const [response, setResponse] = useState<string | null>(null);

    useEffect(() => {
        // 複雑な処理
        setResponse(`inputは${inputText}だよ！`)
    }, [inputText])

    const onChange = (event: ChangeEvent<HTMLInputElement>) => {
        setInputText(event.currentTarget.value);
    }

    return (
        <div>
            <input type='text' placeholder='Enter some text' onChange={onChange} />
            {response ? <p>{response}</p> : <></>}
        </div>
    )
}

分けた後

こうする！👇 (カスタムフック使用)

import { type ChangeEvent } from "react"
import { useResponder } from "../hooks/useResponder";

export function TestComponent() {
    const { setInputText, response } = useResponder();

    const onChange = (event: ChangeEvent<HTMLInputElement>) => {
        setInputText(event.currentTarget.value);
    }

    return (
        <div>
            <input type='text' placeholder='Enter some text' onChange={onChange} />
            {response ? <p>{response}</p> : <></>}
        </div>
    )
}

import { useEffect, useState } from "react";

export function useResponder() {
    const [inputText, setInputText] = useState<string | null>(null);
    const [response, setResponse] = useState<string | null>(null);

    useEffect(() => {
        if (!inputText) {
            setResponse(null);
            return;
        }
        setResponse(`inputは${inputText}だよ！`)
    }, [inputText])

    return {
        setInputText,
        response
    };
}

分けておくと、見た目のコンポーネントはスッキリ保てます。特に機能が増えてロジックが膨らんできたときに効果を発揮します 😎