React初心者がSpring Boot + ReactでSPA簡易アプリを作成してみた

# Reactプロジェクトの雛形作成（Viteを使用）
npm create vite@latest todo-ui
◇ Select a framework: 
│ React 
│
◇ Select a variant: 
│ JavaScript
│

# プロジェクトディレクトリへ移動
cd todo-ui

# 依存関係のインストールと開発サーバー起動
npm install
npm run dev

package com.example.todo;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**") // APIエンドポイントのパスパターン
                .allowedOrigins("http://localhost:5173") // 許可するReactアプリのURL
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 許可するHTTPメソッド
                .allowedHeaders("*") // 許可するヘッダー
                .allowCredentials(true); // Cookieなどを許可するか
    }
}

import React, { useState, useEffect } from 'react';

// APIのベースURLを定義
const API_BASE_URL = 'http://localhost:8080/api/todos';

function App() {
  // Stateの定義
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(true);
  // ... (その他のStateの定義は省略) ...

  // データ取得（API通信）と画面への反映
  // 【R: Read】タスク一覧の取得
  useEffect(() => {
    const fetchTodos = async () => {
      try {
        const response = await fetch(API_BASE_URL);// APIにGETリクエスト
        if (!response.ok) {
          throw new Error('データの取得に失敗しました。');
        }
        // 取得したJSONデータをJavaScriptのオブジェクトに変換
        const data = await response.json();
        // 【Point】取得したデータをStateにセット
        setTodos(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchTodos();
  }, []); // 依存配列が空の [] なので、コンポーネント初回描画時のみ実行される。

  // ... (その他の関数の処理内容は省略) ...
  const handleAddTodo = async (e) => {
  // ... (省略) ...
  };

  const handleToggleComplete = async (id) => {
  // ... (省略) ...
  };

  const handleDeleteTodo = async (id) => {
  // ... (省略) ...
  };


  if (loading) return <div className="App"><h1>ローディング中...</h1></div>;
  if (error) return <div className="App"><h1 style={{ color: 'red' }}>エラー: {error}</h1></div>;

  // メインのTODOアプリの表示内容
  return (
    <div className="todo-container">
      {/* ... (入力フォームは省略) ... */}

      {/* Stateに保持されたデータをループして表示 */}
      {/* タスク一覧 */}
        <ul className="todo-list">
            {todos.map((todo) => (
            <li
                key={todo.id}
                className={`todo-item ${todo.completed ? 'completed' : ''}`}
            >
                <input
                    type="checkbox"
                    className="todo-checkbox"
                    checked={todo.completed}
                    onChange={() => handleToggleComplete(todo.id)}
                />
                <span className="todo-title">{todo.title}</span>
                <button
                    className="delete-btn"
                    onClick={() => handleDeleteTodo(todo.id)}
                >
                削除
                </button>
            </li>
            ))}
        </ul>
    </div>
  );
}

export default App;

import React from 'react';
import TodoItem from './TodoItem'; // 個別のアイテムコンポーネントをインポート

/**
 * App -> TodoList
 * 引数として以下のPropsを受け取る
 * @param {{ todos, onToggle, onDelete }} 
 */
export default function TodoList({ todos, onToggle, onDelete }) {
  return (
    <ul className="todo-list">
      {todos.map((todo) => (
　　　　　// TodoItemコンポーネントの呼び出し。TodoList -> TodoItem へPropsを渡す。
        <TodoItem
          key={todo.id} 
          todo={todo} // Props①
          onToggle={onToggle}　// Props②
          onDelete={onDelete}　// Props③
        />
      ))}
    </ul>
  );
}