###前提
記事に対してコメントを投稿・詳細表示・一覧表示・編集・削除するやり方についての続きとなります。
すでに作成してある記事詳細機能の箇所にコメント投稿欄、一覧表示、削除機能を加えていきます。
###ルーティング作成
まず最初に、必要なルーティングを作成していきます。
route.rb
Rails.application.routes.draw do
・
・
・
resources :articles do
resources :comments, only: [:create, :destroy]
end
end
今回は、articleとcommentの関係性が「article:comment = 1:多(has_manyとbelongs_toの関係)」なので入れ子でルーティングを作成します。また、createアクションとdestroyアクション以外は今回使わない予定なので、only:をつけて制限しています。
一旦、正しくルーティングが反映されているか確認してみましょう。
console
$ rails routes
Prefix Verb URI Pattern Controller#Action
article_comments POST /articles/:article_id/comments(.:format) comments#create #コメント投稿
article_comment DELETE /articles/:article_id/comments/:id(.:format) comments#destroy #コメント削除
articles GET /articles(.:format) articles#index
POST /articles(.:format) articles#create
new_article GET /articles/new(.:format) articles#new
edit_article GET /articles/:id/edit(.:format) articles#edit
article GET /articles/:id(.:format) articles#show
PATCH /articles/:id(.:format) articles#update
PUT /articles/:id(.:format) articles#update
DELETE /articles/:id(.:format) articles#destroy
commentのcreateとdestroyのみルーティングが作成されていることや既存のarticleのルーティングが変化していないことが確認できました。
###モデルの作成
モデルを作成していきます。
今回のコメントテーブルにも、titleカラムとcontentカラムを用意していきます。
console
$ rails g model Comment title:string content:text article:references
Running via Spring preloader in process 13297
invoke active_record
create db/migrate/20190702071230_create_comments.rb
create app/models/comment.rb
invoke test_unit
create test/models/comment_test.rb
create test/fixtures/comments.yml
article:referencesを追加することで「commentsテーブルに外部キーを設定すること」と「commentモデルにbelongs_to :article」が設定されます。
comment.rb
class Comment < ApplicationRecord
belongs_to :article
end
db/migrate/hogehoge_create_comments.rb
class CreateComments < ActiveRecord::Migration[5.0]
def change
create_table :comments do |t|
t.string :title
t.text :content
t.references :article, foreign_key: true
t.timestamps
end
end
end
問題なさそうなのでマイグレーションを実行していきます。
console
$ rails db:migrate
== 20190702071230 CreateComments: migrating ===================================
-- create_table(:comments)
-> 0.0056s
== 20190702071230 CreateComments: migrated (0.0061s) ==========================
db/schema.rb
ActiveRecord::Schema.define(version: 20190702071230) do
・
・
・
create_table "comments", force: :cascade do |t|
t.string "title"
t.text "content"
t.integer "article_id"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
t.index ["article_id"], name: "index_comments_on_article_id"
end
・
・
・
end
###モデル間でリレーションを作成する
articleとcommentの関係性
- **1つのarticle(記事)は複数のcomment(コメント)**を持つこどができる→has_many
- **1つのcomment(コメント)は1つのarticle(記事)**に属することができる→belongs_to
この関係性を各モデル間で表現すると以下のようになります。
article.rb
class Article < ApplicationRecord
has_many :comments, dependent: :destroy
end
dependent: :destroyを加えることで記事を削除したら関連するコメントも自動で削除されます。
comment.rb
class Comment < ApplicationRecord
belongs_to :article
end
###コントローラー作成
続いてはcommentsコントローラーを作成していきます。
console
rails g controller Comments
Running via Spring preloader in process 8903
create app/controllers/comments_controller.rb
invoke erb
create app/views/comments
invoke test_unit
create test/controllers/comments_controller_test.rb
invoke helper
create app/helpers/comments_helper.rb
invoke test_unit
invoke assets
invoke coffee
create app/assets/javascripts/comments.coffee
invoke scss
create app/assets/stylesheets/comments.scss
articlesコントローラーとcommentsコントローラーにそれぞれ必要な処理を実装していきます。
/training/app/controllers/articles_controller.rb
class ArticlesController < ApplicationController
・
・
・
def show
@article = Article.find(params[:id])
#コメントフォームに必要なインスタンスを生成
@comment = Comment.new
end
・
・
・
/training/app/controllers/comments_controller.rb
class CommentsController < ApplicationController
def create
#コメントを投稿する対象のインスタンス（記事）を作成
@article = Article.find(params[:article_id])
#buildメソッドを用いることでcommentインスタンスにarticle_idをセットしてcommentインスタンスを作成
@comment = @article.comments.build(comment_params)
if @comment.save
redirect_to @article
end
end
def destroy
#記事(article)の情報を取得
@article = Article.find(params[:article_id])
# その記事内の削除対象のコメントを探して取得
@comment = @article.comments.find(params[:id])
if @comment.destroy
redirect_to article_path(@article)
end
end
private
def comment_params
params.require(:comment).permit(:title,:content)
end
end
buildメソッドは「インスタンスの作成+外部キーを設定」までやってくれますが、DBに保存まではやってくれないので、saveメソッドを使って保存する必要があります。
###ビューの作成
記事詳細画面にコメントの入力フォームやコメントの一覧を表示していきます。
/training/app/views/articles/show.html.erb
<table>
<tbody>
<tr>
<th>タイトル</th>
<td><%= @article.title %></td>
</tr>
<tr>
<th>内容</th>
<td><%= @article.content %></td>
</tr>
</tbody>
</table>
<h2>コメントを入力</h2>
<!--引数の順番は親、子-->
<%= form_for ([@article,@comment]) do |f| %>
<p>
<%= f.label :title %><br/>
<%= f.text_field :title %><br/>
</p>
<p>
<%= f.label :content %><br/>
<%= f.text_area :content %><br/>
</p>
<p>
<%= f.submit "送信" %>
</p>
<%end%>
<h2>コメント一覧</h2>
<!--@article.commentsで該当する記事のコメント一覧を取得-->
<% @article.comments.each do |comment| %>
<p>タイトル</p>
<p><%= comment.title %></p>
<p>内容</p>
<p><%= comment.content %></p>
<!--article_comment_pathヘルパーには親(article)と子(comment)を両方渡す-->
<p><%= link_to '削除',article_comment_path(@article,comment),
method: :delete,data: {confirm:'削除してもよろしいですか？'}%></p>
<% end %>
内容が少し冗長なのでパーシャルを用いて
入力フォームとコメント一覧の箇所をリファクタリングしていきます。
/training/app/views/comments/_comment.html.erb
<h2>コメント一覧</h2>
<!--@article.commentsで該当する記事のコメント一覧を取得-->
<% @article.comments.each do |comment| %>
<p>タイトル</p>
<p><%= comment.title %></p>
<p>内容</p>
<p><%= comment.content %></p>
<!--article_comment_pathヘルパーには親(article)と子(comment)を両方渡す-->
<p><%= link_to '削除',article_comment_path(@article,comment),
method: :delete,data: {confirm:'削除してもよろしいですか？'}%></p>
<% end %>
/training/app/views/comments/_form.html.erb
<h2>コメントを入力</h2>
<!--引数の順番は親、子-->
<%= form_for ([@article,@comment]) do |f| %>
<p>
<%= f.label :title %><br/>
<%= f.text_field :title %><br/>
</p>
<p>
<%= f.label :content %><br/>
<%= f.text_area :content %><br/>
</p>
<p>
<%= f.submit "送信" %>
</p>
<%end%>
/training/app/views/articles/show.html.erb
<table>
<tbody>
<tr>
<th>タイトル</th>
<td><%= @article.title %></td>
</tr>
<tr>
<th>内容</th>
<td><%= @article.content %></td>
</tr>
</tbody>
</table>
<%= render @article.comments %>
<%= render "comments/form" %>
最後に
誤っている箇所や追記した方が良い点等ございましたら
編集リクエストやコメントの方でご指摘していただけると幸いです。
参考文献
Railsを始めたばかりの人向け！Railsの仕組みを一から理解しながらブログを作成する
Ajaxを用いた動的なコメント投稿・削除機能の実装で学ぶRuby on Rails
buildモデルを生成(new/build)