コメント投稿機能を実装しよう

学習の目標
はじめに
CommentsController の実装
- コメントの作成と関連付け
- 保存処理とフラッシュメッセージ
動作確認
トラブルシューティング
変更をコミット
まとめ

学習の目標

本章では、以下の内容を学習します。

CommentsController の create アクションを実装する方法を理解する
フォームから送信されたパラメータの取り扱い方を習得する
コメント保存後のリダイレクト処理とフラッシュメッセージの設定方法を学ぶ
エラーハンドリングの基本的な実装方法を理解する

はじめに

前回のレッスンでは、投稿詳細ページにコメントフォームを追加しました。見た目は整いましたが、まだ実際にコメントを投稿する機能は実装していません。そのため、「コメントする」ボタンをクリックしてもエラーになってしまいます。

今回は、コメントフォームから送信されたデータを処理し、データベースに保存する機能を実装します。この機能により、ユーザーが実際に投稿に対してコメントを残せるようになり、TechLog アプリケーションがより対話的なプラットフォームへと進化します。

コメント投稿機能の実装では、前回作成した CommentsController の create アクションを中心に作業を進めていきます。このアクションでは、フォームから送信されたデータを受け取り、新しいコメントをデータベースに保存します。また、処理が成功した場合と失敗した場合のハンドリングも実装します。

それでは、具体的なコードと共に実装を進めていきましょう。

CommentsController の実装

前回のレッスンで作成した CommentsController に、create アクションを実装していきます。app/controllers/comments_controller.rb を開き、create アクションを以下のように実装してください。

def create
  @comment = @post.comments.build(comment_params)
  @comment.user = current_user

  if @comment.save
    flash[:notice] = 'コメントを投稿しました'
    redirect_to post_path(@post)
  else
    flash[:alert] = 'コメントの投稿に失敗しました'
    redirect_to post_path(@post)
  end
end

この create アクションでは、いくつかの重要な処理を行っています。順番に見ていきましょう。

コメントの作成と関連付け

@comment = @post.comments.build(comment_params)
@comment.user = current_user

まず、@post.comments.build(comment_params) により、現在表示している投稿（@post）に紐づく新しいコメントを作成しています。build メソッドは new メソッドと似ていますが、親オブジェクト（この場合は @post）との関連付けも同時に行います。そのため、新しいコメントの post_id には自動的に現在の投稿のIDが設定されます。

また、comment_params はストロングパラメータと呼ばれるメソッドで、フォームから送信されたデータのうち、許可されたパラメータ（この場合は content）のみを取り出します。これにより、セキュリティリスクを軽減しています。

次に、@comment.user = current_user により、コメントの投稿者を現在ログインしているユーザーに設定しています。current_user は Devise が提供するヘルパーメソッドで、現在ログインしているユーザーのオブジェクトを返します。

これらの処理により、「誰が」「どの投稿に」コメントしたのかという情報が正しく設定されます。

保存処理とフラッシュメッセージ

if @comment.save
  flash[:notice] = 'コメントを投稿しました'
  redirect_to post_path(@post)
else
  flash[:alert] = 'コメントの投稿に失敗しました'
  redirect_to post_path(@post)
end

コメントの保存は @comment.save メソッドで行います。このメソッドは保存が成功すると true を、失敗すると false を返します。そのため、if 文を使って成功と失敗の場合で処理を分けることができます。

成功した場合は、flash[:notice] に成功メッセージを設定し、投稿詳細ページにリダイレクトします。失敗した場合は、flash[:alert] にエラーメッセージを設定し、同じく投稿詳細ページにリダイレクトします。

フラッシュメッセージは、一度だけ表示される一時的なメッセージで、ユーザーアクションの結果をフィードバックするために使用されます。TechLog アプリケーションでは、既に他の機能（投稿やログインなど）でもフラッシュメッセージを使用しているので、同じパターンに従っています。

なお、失敗時のエラー処理については、今回は簡単のためにエラーメッセージを表示するだけにしていますが、実際のアプリケーションでは、エラーの詳細を表示したり、入力された内容を保持したりするなど、より親切な処理を行うことが一般的です。

動作確認

CommentsController の実装が完了したら、実際にコメント投稿機能が動作するか確認してみましょう。

$ bin/dev

ブラウザで投稿詳細ページにアクセスし、コメントフォームに何か入力して「コメントする」ボタンをクリックしてください。すると、以下のような流れになるはずです。

コメントが投稿される
「コメントを投稿しました」というフラッシュメッセージが表示される
投稿詳細ページにリダイレクトされる

ただし、まだコメント一覧を表示する機能を実装していないため、投稿したコメントは表示されません。次のレッスンで、コメント一覧表示機能を実装していきます。

トラブルシューティング

もし「コメントする」ボタンをクリックしてもエラーが表示される場合は、以下の点を確認してみてください。

CommentsController の create アクションが正しく実装されているか
コメントフォームのURL設定（post_comments_path(@post)）が正しいか
ルーティングが正しく設定されているか（rails routes | grep comment で確認できます）

特に、ネストされたリソースのルーティングは少し複雑なので、エラーが発生した場合はまずルーティングを確認するのが良いでしょう。

変更をコミット

ここまでの変更をコミットしておきましょう。コードの変更点をまとめて管理することで、開発の進捗を把握しやすくなります。

$ git add .
$ git commit -m "コメント投稿機能を実装"
$ git push

まとめ

本章では、コメント投稿機能を実装しました。CommentsController の create アクションを実装することで、ユーザーが投稿に対してコメントを残せるようになりました。

具体的には、以下の内容を実装しました。

CommentsController の create アクションの実装
フォームから送信されたパラメータを使ったコメントオブジェクトの作成
コメントの保存処理と成功/失敗時のフラッシュメッセージ設定
処理後のリダイレクト設定

この実装により、ユーザーは投稿に対してコメントを投稿できるようになりました。

しかし、まだコメントを表示する機能は実装していないため、投稿したコメントを確認することはできません。次のレッスンでは、投稿詳細ページにコメント一覧を表示する機能を実装し、ユーザー間のコミュニケーションをより活性化させていきます。