Rails Girls アプリのコメント機能

Created by Janika Liiv, @janikaliiv

railsgirls アプリのideas へコメントができるような追加をします。 Rails のインストールと ideas アプリ構築についての手順は、 こちら を参照ください。

1.Comment の scaffold をする

Comment のコメント者名、コメント本文(コメント内容)、Idea テーブルへの関係 (idea_id) を scaffold しましょう。

rails generate scaffold comment user_name:string body:text idea_id:integer

これで新しくコメントテーブルが作成された事をデータベースに教えてあげるためのマイグレーションファイルが作成されました。 マイグレーションを実行するには下記のコマンドを実行します。

rails db:migrate

2.モデルに関係 (relations) を追加する

ideas と comments オブジェクト間の接続を Rails に認識させる必要があります。 一つの idea はたくさんの comments を所有することができるものとして、Idea モデルに認識させます。 app/models/idea.rb を開いて、

class Idea < ApplicationRecord

この行のあとに、次のコードを追加します。

has_many :comments

また、comment は、ある idea に属するものとして認識させます。 app/models/comment.rb を開いて、

class Comment < ApplicationRecord

この行のあとに、次のコードを追加します。

belongs_to :idea

3.コメントフォームの表示と編集

app/views/ideas/show.html.erb を開いて、

<p>
  <strong>Picture:</strong>
  <%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>
</p>

このあとに、次のコードを追加します。

<h3>Comments</h3>
<% @comments.each do |comment| %>
  <div>
    <strong><%= comment.user_name %></strong>
    <br />
    <p><%= comment.body %></p>
    <p><%= link_to 'Delete', comment_path(comment), method: :delete, data: { confirm: '削除してもよろしいですか?' } %></p>
  </div>
<% end %>
<%= render 'comments/form', comment: @comment %>

app/controllers/ideas_controller.rb の show action の、

def show
end

この部分を以下のように書き換えます。

def show
  @comments = @idea.comments.all
  @comment = @idea.comments.build
end

app/views/comments/_form.html.erb を開いて、

<div class="field">
  <%= f.label :body %>
  <%= f.text_area :body %>
</div>

このあとに、次のタグを追加します。

<%= f.hidden_field :idea_id %>

最後にこちらを削除します。

<div class="field">
  <%= f.label :idea_id %>
  <%= f.number_field :idea_id %>
</div>

これだけで、今加えた idea アプリケーションが表示され、comment 挿入・削除フォームが見えるはずです。