フロント/バックそれぞれ独立した課題の完了

[spheal363]

フロントエンド

• フロントエンド課題 「TODOリストを作ろう」に書かれているステップを全て実装

• 動作

2025-02-25_15h40_51.mp4

バックエンド

• テスト前のtodosテーブル一覧

2025winterhackathon=# INSERT INTO todos (id, title, status_id) VALUES
    (1, 'Todo 1', 1),
    (2, 'Todo 2', 2),
    (3, 'Todo 3', 1),
    (4, 'Todo 4', 3);
INSERT 0 4

2025winterhackathon=# SELECT todos.id, todos.title, statuses.name
FROM todos
  JOIN statuses
    ON todos.status_id = statuses.id;
 id | title  |   name
----+--------+-----------
  3 | Todo 3 | pending
  1 | Todo 1 | pending
  2 | Todo 2 | completed
  4 | Todo 4 | active
(4 rows)

• BashスクリプトでのAPIテスト（正しく出力できていそうなのにFailedとなってしまいます）

~/student-hackathon-training/backend_training$ bash bin/test_api.sh
1) Test GET /todos              4) Test POST /todos             7) Test GET /todos/cause-error
2) Test GET /todos/1            5) Test PUT/todos?id=1          8) Run All Tests
3) Test GET /todos?id=9999      6) Test DELETE /todos?id=1      9) Exit
Please select a test case to run: 8
Testing GET /todos (Retrieve all Todos)
Status: 200 ✅ Passed
Response: {"status":"ok","todos":[{"id":3,"title":"Todo 3","name":"pending"},{"id":1,"title":"Todo 1","name":"pending"},{"id":2,"title":"Todo 2","name":"completed"},{"id":4,"title":"Todo 4","name":"active"}]}

Testing GET /todos/1 (Retrieve Todo by ID)
Status: 200 ❌ Failed (Expected 200)
Response: {"status":"ok","todos":{"id":1,"title":"Todo 1","name":"pending"}}

Testing GET /todos/9999 (Not Found)
Status: 404 ✅ Passed
Response: {"status":"error","message":"Todoが見つかりません"}

Testing POST /todos (Create new Todo)
Status: 201 ❌ Failed (Expected 201)
Response: {"status":"ok","todos":{"id":"34","title":"New Todo","status_id":"1"}}

Testing PUT /todos?id=1 (Update Todo)
Status: 200 ❌ Failed (Expected 200)
Response: {"status":"ok","todos":{"id":1,"title":"Updated Title","status":"completed"}}

Testing DELETE /todos?id=1 (Delete Todo)
Status: 200 ❌ Failed (Expected 200)
Response: {"status":"ok","todos":{"id":1,"title":"Updated Title","status_id":2}}

Testing GET /todos/cause-error (Server Error)
Status: 500 ✅ Passed
Response: {"error":"Internal Server Error"}

[kirikirisu]

今回の状況では特に問題になりませんが、todosはuseStateのセッター（setTodos）による再レンダリング後でないとセッターによる更新後のtodosの値にアクセスできないため、セッターのコールバック関数から値を参照するようにするのが定番です（ハッカソンでは動けばOKです！）。
このあたり以下の記事が参考になると思います。
https://zenn.dev/takuty/articles/c032310a6643ac

以下のようになるかなと思います。

  setTodos((previousTodos) => {
    return previousTodos.map((todo) => ({...todo, isEdit: todo.id === id}));
  });

[kirikirisu]

アクセシビリティ的には span にonClickをつけるのはアンチパターンです。今回の課題ではデザイン的にどうしてもTODOの文字にonClickをつけなくてはいけないのでOKです。
本来はデザインとして編集ボタンを付けて、そこにonClickをつけるべきでした 🙏

[kirikirisu]

細かいですがButtonにはtype="button"属性をつけるようにしてください。デフォルトだとtype="submit"になるので意図しないリクエストが発生する可能性があります（ハッカソンでは動けば良いので気にしなくてOKです）。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/button#type

[kirikirisu]

最近だとCSS Nestingが使えるようになったので、これを使うともう少し簡潔に書けるかなと思います（修正の必要はないです）。

[sduccao]

バックエンドの方は特に問題ないです！
ありがとうございます！
BashスクリプトがFailedとなってしまうことは、そもそもテストスクリプトがよくないので、正しく出力できているなら大丈夫です 🚀