Nuxt.jsとRailsでコメントが多い順に投稿を表示し、コメント数も表示する

5041 ワード
初心者 tech テキストリンク

ポートフォリオ作成中に「人気順に投稿をいくつか表示させたいな〜」と思い、投稿についているコメントが多い順に投稿を表示させ、それぞれについているコメントの数を表示させた。忘れないうちにメモしておく。
postsテーブルとcommentsテーブルは紐づいている。
ちなみにNuxt.jsとRails間はaxiosを使って通信している。

ランキングメソッドを作る

投稿に紐づいているコメントの数をcountメソッドで算出し、その数が多い順にソートさせる。
今回はlimit(5)で上位５つのスポットを抽出した。

posts_controller.rb
  def ranking
    @all_ranks = Post.find(Comment.group(:post_id).order('count(post_id) desc').
    limit(5).pluck(:post_id)) 
  end

コメント数をカウントするメソッド作成

post.rb
  def comment_count
    comments.count
  end

json形式で送る

メソッドを"@all_ranks"と一緒にjsonで送る
送るときは"methods："とインスタンスの前に".to_json"をつける

posts_controller.rb
  def ranking
    @all_ranks = Post.find(Comment.group(:post_id).order('count(post_id) desc').
    limit(5).pluck(:post_id)) 
   # 追加
    render json: @all_ranks.to_json(methods: [:comment_count])
  end

jsonデータのハッシュの中に"comment_count":"コメント数"と表示されていればOK

Nuxt側で表示させる

axiosでgetしdataのpostに格納（省略)
あとは表示させるだけ

index.vue
<template>
 <div>{{ post.comment_count }}</div>
</template>
jquery属性に関するjs実装方法
Next.js で CSS Modules / framer-motion でページ間遷移を作ったらうまくいかなかった話