気ままに気ままのエンジニアブログ

日々学んだこと / 課題解決したこと / 思うことなど気軽にアップしております。

【Rails/kaminari】ページネーションで起こった2つのバグを解消した話

こんにちは。

今年は例年と比べ、梅雨が早いらしいです。あーまた髪のうねる時期か。。

どうも天パのハチマキです。

はじめに

今回は、ページネーション関連の「バグを解消した話」と「解消に至った実装方法」を合わせて紹介したいと思います。

UIイメージ

最初に簡単にUIのイメージをお伝えしたいと思います。
こちらはgithubのものですが、イメージとしてはこれらの各タブ内にページネーションがあり、どれもkaminariのgemが使われております。


何が問題だったのか?

各タブ内にページネーションが設置されることで、ページネーションをクリックすると、

  • 1つ目:すべてのタブのページネーションが効いてしまう
  • 2つ目:タブの先頭に遷移してしまう

このような問題を抱えておりました。
イメージ画像を例にすると、例えばCommitsタブ内のページネーションの2ページ目をクリックすると、「各タブのページネーションが2ページ目になる」、且つ「Converationタブに遷移」してしまうという問題です。

解消するために何をやったか?

  • バグ調査
    • ページネーションの仕組みをあまり理解できていなかったため、まず仕組みの理解を行いました。どこでどのような使われ方をしているのか、どのように実装されているのかを画面操作と共に調査しました。
    • 調査を行う過程で、問題を捉えることができたものの、2つの問題を1つと捉え、実装方法を模索してしまいました。問題を分解し、2つの問題と捉えることができていれば、各々の実装方法が早期に見つかったなぁと反省しました。
  • 1つ目の実装方針の模索:すべてのタブのページネーションが効いてしまう
    • 「すべてのタブのページネーションが効いてしまう」問題を調べると、「対象パラメータにkeyを付与」することで実現できることがわかりました。
  • 実装方法

html.erb

# 修正前
<%= paginate @test %>

# 修正後
# 各種タブを引数に定義
<%= paginate @test, param_name: test_page(tab)%>

helper.rb

def test_page(tab)
    page = {
      'test1' => 'test1_page',
      'test2' => 'test2_page',
      'test3' => 'test3_page'
    }
    page[tab_type]
end

controller.rb

# 各タブで取得するパラメーターを定義する
# 定義方法は設計の仕方により異なりますが、helper.rbで定義した値を受け取るように実装しました
params[:test1_page]

params[:test2_page]

params[:test3_page]


上記のように実装することで、パラメーターが定義したキー名に変わります

# 変更前
page=2

# 変更後
test1_page=2
test2_page=2
test3_page=2

これで1の問題は解消できました。

  • 2つ目の実装方針の模索:タブの先頭に遷移してしまう
    • 解決策を模索しておりましたが、なかなか検討が掴めず苦しみました。なぜならこの問題を「kaminariのgem絡みの問題」だと思ってしまっていたからです。つまり、kaminariとは別の問題と捉える必要がありました
    • 結果的に先輩エンジニアに質問し、解消しました(神です..)。実装方法は「tabのパラメータを追加する」です。
  • 実装方法(各タブタイプは定義済みとします)

html.erb

# 修正前
<%= paginate @test, param_name: test_page(tab)%>

# 修正後
<%= paginate @test, param_name: test_page(tab), params: { tab: tab }%>

こうすることで、tabを持ったパラメーターに変わります

# 変更前
test1_page=2

# 変更後
test1_page=2&tab=tab1

これで2の問題も解消できました。

最後にまとめ

問題を正確に捉える

何が問題かを的確に捉える。当たり前かもしれませんが、問題として定義したものを解消するため、ここがずれるとそりゃ解消できませんね。。改めて学びました。

結局質問は神

自分で考えることも必要(調査することが理解は格段に上がります)ですが、やっぱ質問することで解消に至れるスピードは格段に上がりますね。。