【rails】コメント一覧のAPIを作る

※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。

目次表示

目次へ

コメント一覧のAPIを作る

現在、コメントを投稿するときは「コメント投稿するためのページ」に遷移している

今回からは、以下の流れを同じ画面で完結できるようにしていく

まずコメント一覧をAPI(json)で取得できるようにする

articles.controller.rbからshowアクションを削除する

今までarticlesのshowでコメント一覧を表示していたが、不要になるので削除する

views/articles/show.html.hamlでコードを削除する

.article
  %h2 コメント一覧
  - @comments.each do |comment|
    .article_comment
      %p= comment.content

かわりに、jQueryでコメントを表示するためのコードを先に書き足しておく

.article
  %h2 コメント一覧
  .comments-container

comments_controller.rbにindexアクションを追加で定義する

これまでarticlesのshowアクションで表示していたコメント一覧を、今度からはこっちで表示させる

  def index
    article = Article.find(params[:article_id])
    comments = article.comments
  end

まずこれで、コメントが取得できるようになる

このcommentsを、javascriptに渡さないといけない

Active Recordに紐づくインスタンス(comments)を、jsonにAPIとして渡してくれる便利なツール(Serializer)を使う

gemfileに追加して、bundle installする

gem 'active_model_serializers' ,'0.10.10'

※今回は講義の内容にあわせて、バージョン(0.10.10)を指定

インストールが完了したら、続けて以下を実行

commentsに関するjsonを作成したい

rails g serializer Comment

すると、create app/serializers/comment_serializer.rb　が作成される

中を見てみると、↓のファイルが出来ている

class CommentSerializer < ActiveModel::Serializer
  attributes :id
end

comments_controller.rbに戻る

このままcommentsと入力するだけで使える

  def index
    article = Article.find(params[:article_id])
    comments = article.comments
    render json: comments
  end

入力後、サーバーを再起動rails sする

グーグルで「http://localhost:3000/articles/11/comments」を検索すると、以下のように表示される

articles/11の記事にはコメントが3つある状態

serializers/comment_serializer.rbでattributes :idのみ渡しているので、idだけ表示される

コメント内容contentも欲しいので書き加える

class CommentSerializer < ActiveModel::Serializer
  attributes :id
  attributes :content
end

contentも追加すると、コメント内容も渡せるようになる

必要なデータのみAPIにして渡すことが可能（jsonの値が複雑なときに有効）

routesのcommentsにも:indexを追加しておく

  resources :articles do
    resources :comments, only: [:index, :new, :create]

#DAY7