コメント登録機能の追加 - (2)コメントの追加・削除

このセクションでは「コメント登録機能の追加 - (1)コメントの表示」に続いて、記事にコメントを追加・削除する機能を実装する手順を解説します。

 

＜チュートリアルを進めるにあたって＞ 

  •  ・アプリケーション名は"blog"、アプリケーションのルートフォルダは、"c:¥rails_apps¥blog"とします

  •  ・アプリケーションのルートフォルダのパスは、"RAILS_ROOT"と記載します

 ・コマンドプロンプトを用いた操作は、特別な指定がない限り全て"RAILS_ROOT"に移動した状態で行います

 

コメントの追加・削除機能の追加

コメントの追加・削除機能を「コメント登録機能の追加 - (1)コメントの表示」で作成したコメント一覧画面に対して追加します。この画面をWebブラウザ上で表示し、コメントの追加（登録）操作をすると、サーバ側ではコメントのコントローラ（※）のcreateメソッドが自動的に実行されます。コメントの削除操作をすると、destroyメソッドが実行されます。

※コメントのコントローラは、次の手順で作成します。


ビューへのコメント登録欄と削除ボタンの実装

「コメント登録機能の追加 - (1)コメントの表示」で作成したコメント一覧画面のビュー "RAILS_ROOT\app\views\home\page.html.erb"に、「コメントの削除リンク」と「コメント登録欄」を追加します。以下のように実装します。

 <div style="width:500px;border:1px solid #ccc;margin:5px">
   <div style="float:left">
     <h2 ><%= @article.title %></h2>
   </div>
   <div style="clear:both">
     <pre><%= @article.content %></pre>
   </div>

   <h3>コメント：</h3>
   <% @article.comments.each do |comment| %>
     <h4><%= comment.from %> さん</h4>
     <pre><%= comment.body %></pre>
+    <p>[<%= link_to 'コメントを削除する',  [@article, comment], 
+             confirm: 'Are you sure?', method: :delete %>]</p>
   <% end %>

+  <h3>コメント追加：</h3>
+  <%= form_for [@article, @comment] do |f| %>
+    <p>from:</p><p><%= f.text_field :from %></p>
+    <p>comment:</p><p><%= f.text_area :body, :rows => 5 %></p>
+    <%= f.submit 'コメントを投稿する' %>
+  <% end %>

   <div style="float:right">
     <%= link_to 'トップページに戻る', root_path %>
   </div>
 </div>

※行頭に"+"がついた行が追加したコードです。

 

コメント登録欄で使用するインスタンス変数「@comment」の設定

上記ビュー（"RAILS_ROOT\app\views\home\page.html.erb"）のインスタンス変数@commentを準備するため、「コメント登録機能の追加 - (1)コメントの表示」で作成した「HomeController#page」メソッドでCommentクラスの空のインスタンスを生成しておきます。

 class HomeController < ApplicationController
   def index
     @articles = Article.all
   end
   def page
     @article = Article.find(params[:id])
+    @comment = Comment.new
   end
 end

※行頭に"+"がついた行が追加したコードです。

 

コメントの登録・削除に用いるコントローラーの作成

コメントの追加・削除のための処理を実装するコントローラを作成します。

コマンドプロンプトで「rails generate controller comments」とタイプしてEnterキーを押下します。コマンドプロンプト上には、ファイル・フォルダが自動生成される様子が以下のように表示されます。 

c:\rails_apps\blog>rails generate controller comments
      create  app/controllers/comments_controller.rb
      invoke  erb
      create    app/views/comments
      invoke  test_unit
      create    test/functional/comments_controller_test.rb
      invoke  helper
      create    app/helpers/comments_helper.rb
      invoke    test_unit
      create      test/unit/helpers/comments_helper_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/comments.js.coffee
      invoke    scss
      create      app/assets/stylesheets/comments.css.scss

 

コメントの追加・削除処理の実装

上記で作成したコントローラー、"RAILS_ROOT\app\controllers\comments_controller.rb"にあるCommentsControllerクラスに、データベース内のコメントを追加する機能（createメソッド）、削除する機能（destroyメソッド）を以下のように実装します。redirect_toは指定したURLやアクションにリダイレクトさせるメソッドです。

 class CommentsController < ApplicationController
+  def create
+    @article = Article.find(params[:article_id])
+    @comment = @article.comments.create(params[:comment])
+    redirect_to page_path(params[:article_id])
+  end

+  def destroy
+    Comment.destroy(params[:id])
+    redirect_to page_path(params[:article_id])
+  end
 end

※行頭に"+"がついた行が追加したコードです。

 

ルーティング設定

上記でコントローラに追加した機能のルーティング定義のため、"RAILS_ROOT\config\routes.rb" を以下のように変更します。"

記事データ：コメントデータ（１：N） の関連付けを意識して、RESTfulなURLを用いるため定義をネストして記述します。

 Blog::Application.routes.draw do
-  resources :articles
+  resources :articles do
+    resources :comments, :only => [:create, :destroy]
+  end

   get "home/index"
   match "page/:id" => 'home#page', :as => 'page'
　 　： 
 　以下略

※行頭に"-" が付いた行が削除したコードです。
※行頭に"+" が付いた行が追加したコードです。

 

コメント追加・削除の確認

アプリケーションを起動して、トップページから記事のタイトルをクリックして画面に遷移すると、以下の画面のように"コメントを削除するためのリンク"や"コメントを追加するための入力フォーム"が表示されます。実際にコメントの削除や追加を行うことができます。

記事ごとにコメントを一覧表示する画面（コメント追加・削除の確認）
  （記事ごとにコメントを一覧表示する画面　：　コメント追加・削除の確認）

 

 「リファクタリングと入力チェック機能の追加」に続きます。

 

Page Top