【フロント・バック】コメント機能の連携

[erika-to-omochi]

概要（Summary）

ユーザーが特定の絵本にコメントを投稿でき、投稿したコメントが非同期でシームレスに一覧へ反映されるようにします。コメントは絵本ごとに一覧表示され、最新のコメントが上に表示されます。

ゴール（Goals）

• [ ] コメントが一覧表示される
• [ ] コメントを投稿できる
• [ ] コメントを投稿したらシームレスに反映される

ブランチ名（Branch）

feature/issue番号-comment-functionality

コントローラとアクション

• コントローラ名：CommentsController
• アクション名：
  • [ ] index: 特定の絵本に関連するコメントを取得して一覧表示する
  • [ ] create: コメントを追加し、非同期で画面へ反映させる

成功したとき：

• index: 特定の絵本に関連するコメントがJSON形式で返される
• create: 新しいコメントがデータベースに保存され、レスポンスで返される 失敗したとき：
• index: コメントが取得できない場合、エラーメッセージを返す
• create: コメント投稿が失敗した場合、エラーメッセージを返す

手順（Steps）

1. コメント一覧の取得
   • CommentsControllerにindexアクションを実装し、特定の絵本に関連するコメントを取得する。
   • JSON形式でコメント一覧を返し、フロントエンドで表示する。
2. コメントの投稿機能
   • CommentsControllerにcreateアクションを実装し、コメントをデータベースに保存。
   • コメントが成功した場合、新しいコメントをJSON形式で返し、フロントエンドに非同期で表示する。
3. フロントエンドでの非同期処理
   • JavaScriptやAJAXを使用して、コメントを非同期で投稿・反映。
   • createアクションが成功した際、新しいコメントが画面に追加表示されるようにする。
4. エラーハンドリング
   • 投稿が失敗した場合、エラーメッセージを表示し、ユーザーに通知。