3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【初心者向け】コメント機能作成追加

Last updated at Posted at 2019-09-29

##前提
・記事投稿一覧ページがすでに作成されている状態であること
・記事投稿一覧ページにコメント機能を追加する
・コメントはUserと紐づいてはいない仕様にしています
(説明が少なくて恐縮ですがお許しください)

##コメント機能作成
###コメントモデルを作成する
作成するカラムは
user_id
content
topic_id
を用意します。

$ rails g model comment user_id:integer content:text topic_id:integer
rails db:migrate

###アソシエーションの追加(モデルの関連付け)
コメントと投稿の関係は以下のようになります。
・Commentは1つのTopicを持っている
・Commentは1つのUserを持っている
・Topicは複数のCommentを持っている
という関連を持っています。

ですので、Commentモデルに「belongs_to」、Topicモデルに「has_many」を以下のように追加します。

app/models/comment.rb
class Comment < ApplicationRecord
  belongs_to :topic
  belongs_to :user
  
  validates :content, presence: true
end
models/topic.rb
  has_many :comments, dependent: :destroy
  has_many :comment_users, through: :comments, source: 'user'

###コントローラを作成しルーティングを設定する

$rails g controller comments
config/routes.rb
  get 'comment/new'
  #中略

resources :topics do
  resources :comments
  #/topics/:topic_id/comment/newのパスが使用できる
end
controllers/comments_controller.rb
class CommentsController < ApplicationController
  def new
    @comment = Comment.new
    @topic_id = params[:topic_id]
  end
  
  def create #コメントを登録する
    @comment = Comment.new #コメントのインスタンスを作成
    @comment.topic_id = params[:topic_id] #記事番号をパラメータから受け取る
    @comment.content = params[:content] #コメントの内容をパラメータから受け取る
   
    if @comment.save #コメント登録の条件分岐
      redirect_to topics_path, success: 'コメントに成功しました' 
    else
      flash.now[:danger] = "コメントに失敗しました"
      render :new
    end
  end
end

###リンクの追加
今回は投稿一覧ページの投稿からコメントページへと遷移できるようにします。コメントアイコンを用意してリンクを貼ります。

topics/index.html.erb
<%= link_to new_topic_comment_path(topic_id: topic.id), method: :get do %>
 <%= image_tag 'icons/comment.png', class: 'topic-index-icon' %>
<% end %>

###コメント投稿のページ作成

views/comments/new.html.erb
<div class="topic-new-wrapper" >
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <h1 class="text-center">Add Comment</h1>
        <%= form_with url: '/topics/' + @topic_id.to_s + '/comments' ,local: true do |f| %>
          <div class="form-group">
            <%= f.label :content %>
            <%= f.text_area :content, class: 'form-control' %>
          </div>

          <% if logged_in? %>
            <%= f.submit 'コメント送信', class: 'btn btn-black btn-block' %>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
</div>

##作成結果
コメント追加ページ
スクリーンショット 2019-09-29 23.31.29.png

記事投稿一覧ページ
comment_function.png

拙い記事で恐縮ですが、何かの参考になればと思います。
間違いや認識違い等ございましたらご指摘くださればと思います。

3
3
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?