Spring BootとReactだけの簡単メモアプリ

package com.example.simplememo.model;

import java.time.LocalDateTime;

public class Memo {
  private int id;
  private String content;
  private LocalDateTime createdAt;
  private LocalDateTime updatedAt;

  public Memo(int id, String content, LocalDateTime createdAt, LocalDateTime updatedAt) {
    this.id = id;
    this.content = content;
    this.createdAt = createdAt;
    this.updatedAt = updatedAt;
  }
  
  // フィールドのGetterとSetterの定義は省略
}

// 必要なライブラリ・パッケージについては省略

@RestController // JSONやXMLなどのデータを返すコントローラーであることを示す
@RequestMapping("/api/memos") // 個別のメソッドに"api/memos/create"と書く必要がなくなる
@CrossOrigin(origins = "http://localhost:3000") // 開発環境におけるCORSを許可する
public class SimpleMemoController {

  private List<Memo> allMemos = new ArrayList<Memo>();
  private int nextId = 0; // 削除されたメモIDと重複しないように次のメモのIDを保持する

  @GetMapping
  public ResponseEntity<List<Memo>> getAllMemos() {
    return ResponseEntity.ok(allMemos);
  }

  @PostMapping
  public ResponseEntity<Integer> createMemo(@RequestBody String content) {
    LocalDateTime now = LocalDateTime.now();
    Memo newMemo = new Memo(nextId++, content, now, now);
    allMemos.add(newMemo);
    return ResponseEntity.ok(newMemo.getId());
}

  @PutMapping("/{id}")
  public ResponseEntity<Void> updateMemo(@PathVariable int id, @RequestBody String content) {
    LocalDateTime now = LocalDateTime.now();
    Memo memoToUpdate = findMemoById(id);
    if (memoToUpdate != null) {
        memoToUpdate.setContent(content);
        memoToUpdate.setUpdatedAt(now);
        return ResponseEntity.ok().build();
    } else {
        return ResponseEntity.notFound().build();
    }
}

  @DeleteMapping("/{id}")
  public ResponseEntity<Void> deleteMemo(@PathVariable int id) {
    Memo memoToDelete = findMemoById(id);
    if (memoToDelete != null) {
        allMemos.remove(memoToDelete);
        return ResponseEntity.noContent().build(); // 物理削除は204
    } else {
        return ResponseEntity.notFound().build();
    }
}

  private Memo findMemoById(int id) {
    for (Memo memo : allMemos) {
      if (memo.getId() == id) {
        return memo;
      }
    }
    return null;
  }

}

03_SimpleMemo(親ディレクトリ)
├─ simple-memo-frontend(React)
│  ├─ src
│  ├─ node_modules
│  ├─ package.json
│  └─ etc...
└─ simple-memo-backend(SpringBoot)
   ├─ src
   ├─ target
   ├─ pom.xml
   └─ etc...

npx create-react-app simple-memo --template typescript

{
  "version": "0.2.0", // launch.jsonのバージョン(記述の解釈方法の指定)
  "configurations": [ // デバッグ構成のリスト(複数設定できる)
    {
      "type": "node-terminal",       // Node.jsをVSCodeのターミナルで起動する
      "name": "スクリプトの実行: start", // ユーザーがデバッグ構成を識別するための名前
      "request": "launch",           // launch = 新しいデバッグセッションを開始する
      "command": "npm run start",    // デバッグボタンを押した時に実行するコマンド 
      "cwd": "${workspaceFolder}"    // コマンドを実行する作業ディレクトリ (現在のワークスペースフォルダー)
    }
  ]
}

// GET：メモ一覧を取得
const fetchMemos = async () => {
  // API通信
  try {
    const response = await fetch("http://localhost:8080/api/memos");
    if (!response.ok) {
      throw new Error("Failed to fetch memos");
    }
    const memos = await response.json();
    // バックエンドと同期した編集前のメモ
    setOriginalMemos(memos);
    // フロントで修正したバックエンド反映前のメモ
    setCurrentMemos(JSON.parse(JSON.stringify(memos)));
  } catch (error) {
    console.error("Error fetching memos:", error);
  }
};
  
// PUT・POST：メモを更新・作成
const handleMemoUpdate = async (targetMemo: Memo) => {
  // 空メモの場合は終了(空白文字のみも終了の対象)
  if (targetMemo?.content.trim() === "") {
    setCurrentMemos(originalMemos);
    return;
  }
  
  if (targetMemo.createdAt !== "") {
    // 修正
    const isUpdating = originalMemos.some(
      (memo) =>
        memo.id === targetMemo.id && memo.content !== targetMemo.content
    );
    // 変更されてなかったら終了
    if (!isUpdating) {
      return;
    }
    // API通信
    try {
      const response = await fetch(
        `http://localhost:8080/api/memos/${targetMemo.id}`,
        {
          method: "PUT",
          headers: {
            "Content-Type": "application/json",
          },
          body: targetMemo.content,
        }
      );
      if (!response.ok) {
        throw new Error(`Failed to update memos id: ${targetMemo.id}`);
      }
      // 反映後のメモ一覧を取得
      fetchMemos();
    } catch (error) {
      console.error("Error updating memo:", error);
    }
  } else {
    // 登録
    try {
      const response = await fetch("http://localhost:8080/api/memos", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: targetMemo.content,
      });
      if (!response.ok) {
        throw new Error("Failed to add memos");
      }
      // 反映後のメモ一覧を取得
      fetchMemos();
      // 新規登録用の変数を初期化
      setAddingMemo(initialMemo);
    } catch (error) {
      console.error("Error adding memo:", error);
    }
  }
};