既読ユーザー
その他4人
kaminariを使った非同期ページネーションの実装方法
ディスカッション
  • miketa-webprgr(みけた) 2020/12/19 00:18

    おつかれさまです!

    イメージが湧きやすいよう、画像も使ってあって力作ですね!

    なんとなくkaminariを非同期で実装するって難しそうな気がしていましたが、こうやって

    手順を追っていくと、そんなに難しくないんだなとイメージを掴むことができました。

    ありがとうございます!

    あと、URL(具体的にはクエリパラメータ部分ですかね?)まで変更するよう実装しているので、

    細かいところまで気を使っているなと感じました。

    この部分ですが、初学者向けにさらに補足すると、kaminariのページネーションは、

    https://tech-essentials.work/course_outputs?page=2
    

    というような形で、?page=2というURLの情報でページネーションをコントロールしているんですが、

    js.erbを使う場合、2ページや3ページ目に移動した場合であってもこのURLは変わらないので、

    そこも変わるように、history.replaceState( "", "" ,"?page=<%= @page %>") というコードを書くことで対応しています。

    非同期のページネーションの場合、非同期で差し替えるデータ量が少ないほど威力を発揮すると思うので、

    一度に表示するpostsが少なければ少ないほど効果的なんだろうなと思ったんですが、今回の場合はどうな

    んですかね? 例えば、10枚ごとにpaginateする場合のパフォーマンスがどうなのか、結構気になりました。

    (よければ、gyazoのgifでみたいです笑)

    あと、最後に本当に口うるさいコメントを載せておきます笑

    こんなこと書いておいて何ですが、記事投稿おつかれさまでした!!!笑

    • likes_countカラムを設けてあるのが気になりました
      • 通常であれば、likesの数を数えることが多い?
      • 今回の記事には関係ないから、この部分を消してしまったもよいかも
    • おそらく、画像についてはcarrierwaveを使っている?
      • 画像についてはこのコードだけで完結しないことを少し触れてあげると初学者に親切?
  • miketa-webprgr(みけた) 2020/12/19 00:21

    あと、本当に余談ですが、画像のコメントがさりげなく過激で笑いました笑

    おそらくfakerだと思うんですけど、you son of a bitch とかって普通に書いてあるのもすごいですね笑

  • miketa-webprgr(みけた) 2020/12/19 00:25

    何かと思ったら、Back to the Future のセリフでした。

  • Taishikun0721 2020/12/19 10:38

    イメージが伝わればいいかなと思って書いたんで良かったです!
    URLは他の人からしたら細かいって言われそうなので、やった人だけわかる様にしました笑
    補足助かります!

    likes_countカラムを設けてあるのが気になりました

    僕的にいいねは数あった方が嬉しい派です。QiitaのLGTMが多ければなんとなく信頼できるみたいなのと一緒のイメージです笑けど確かに記事にはいらないのでテーブル構成のところから消しました笑

    carrierwaveの説明は非同期ページネーションとは関係ないからとりあえずはいいかなと思いました!

  • Taishikun0721 2020/12/19 10:39

    おお笑
    調査力笑よくわかりましたね!

  • Taishikun0721 2020/12/19 10:48

    3枚

    Image from Gyazo

    10枚

    Image from Gyazo

    こんな感じです笑
    よくわからん笑

  • miketa-webprgr(みけた) 2020/12/19 16:02

    ページネーションのgifありがとうございます!

    結構早いですね! 特に3枚だと早いですね!

    あまり縦に長くしたくない場合、表示枚数を限定して、非同期通信で対応するのもありですね!

    あと、likes_countについては、完全に本筋から逸れる話ですけど、userとpostの中間テーブルであるlikesテーブルの

    レコードの数で表現することが多いのかなと思ったので、少し気になったという意味です。(とはいえ、そこまで話を

    しだすと、likesテーブルも掲載しなくちゃいけなくなるので、この記事ではlikesカラムがなくてもいいんじゃないかな

    と思いました。・・・まあ、どうでもよすぎる話ですよね汗) 

    それに、likes_countカラムがないと、それはそれでいいねをどう表現しているのかという疑問も出てきそうですしね。

    完全なる気にしすぎです。すみません。。。

  • Taishikun0721 2020/12/19 16:54

    いや気になった事は書いてもらって大丈夫ですよ笑
    これcounter_cultureってgem使ってるんで、ここにカラム持ってる感じです!

    僕の特訓コース課題5のプルリク見たらいろいろ書いてるんでよろしければ!

  • daidai3110 2020/12/20 00:14

    めちゃ力作お疲れ様です!!
    自分もkaminariで非同期処理を行ったことなかったので参考になりました!

    みけたさんといいたいしろうさんといい、初学者目線での記事の書き方がうまくて脱帽です。

    本筋とは関係ないですが、こういうところいいですねー。しっかり理屈を理解してる感が伝わってくる。

    開発者ツールのNetworkタグのContentTypeを見てみましょう。remote: trueにするとこの項目がhtmlからjavascriptに変更されます。

    さらに使い勝手をよくするのであれば、ページネーションのボタンを押した時にページの一番上にスクロールするとか?余裕があったらやってみてください笑

  • miketa-webprgr(みけた) 2020/12/20 16:17

    これcounter_cultureってgem使ってるんで、ここにカラム持ってる感じです!

    Rails特訓コースでも使っていたんですか笑

    そういうことなんですね笑