LaravelとReactで実装するSPAメッセージ機能：リロードなしでUXを向上させる方法

public function store(Request $request, ConversationGroup $conversationGroup): JsonResponse|RedirectResponse
{
    // バリデーション
    $request->validate([
        'message' => 'required|string|max:1000',
    ]);

    // ユーザー権限チェック
    if (!$conversationGroup->hasParticipant(Auth::id())) {
        abort(403, 'Unauthorized action.');
    }

    // メッセージ作成
    $message = new DirectMessage([
        'sender_id' => Auth::id(),
        'message' => $request->message,
    ]);

    $conversationGroup->messages()->save($message);
    $conversationGroup->touch(); // updated_atを更新

    // Ajax リクエストの場合は JSON レスポンスを返す
    if ($request->expectsJson() || $request->ajax()) {
        return response()->json([
            'success' => true,
            'message' => $message->load('sender'),
        ]);
    }

    // 通常のフォーム送信の場合はリダイレクト
    return redirect()->back();
}

import { useState, useEffect, useRef } from "react";
import { useForm } from "@inertiajs/react";
import axios from "axios";
import DirectMessage, { DirectMessageType } from "@/Components/DirectMessage";

// コンポーネント内
export default function Show({
    auth,
    conversationGroup,
    messages: initialMessages,
    participants,
}) {
    // メッセージの状態管理
    const [messages, setMessages] = useState<DirectMessageType[]>(initialMessages);
    const [sending, setSending] = useState(false);
    const messagesContainerRef = useRef<HTMLDivElement>(null);

    const { data, setData, errors, reset } = useForm({
        message: "",
    });

    // メッセージ送信処理
    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        
        if (!data.message.trim() || sending) {
            return;
        }
        
        setSending(true);
        
        try {
            // CSRFトークンの取得
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
            
            // APIでメッセージを送信
            const response = await axios.post(
                route("messages.store", conversationGroup.id), 
                data,
                {
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    }
                }
            );
            
            // 成功したら新しいメッセージを追加
            if (response.data && response.data.message) {
                const newMessage: DirectMessageType = {
                    ...response.data.message,
                    sender: auth.user
                };
                
                setMessages([...messages, newMessage]);
                reset("message");
            }
        } catch (error) {
            console.error('メッセージ送信エラー:', error);
        } finally {
            setSending(false);
        }
    };

    // メッセージが追加されたらスクロール位置を最下部に移動
    useEffect(() => {
        if (messagesContainerRef.current) {
            messagesContainerRef.current.scrollTop =
                messagesContainerRef.current.scrollHeight;
        }
    }, [messages]);

    // JSXの返却（省略）
}