こんにちは。
今年は例年と比べ、梅雨が早いらしいです。あーまた髪のうねる時期か。。
どうも天パのハチマキです。
はじめに
今回は、ページネーション関連の「バグを解消した話」と「解消に至った実装方法」を合わせて紹介したいと思います。
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の問題も解消できました。
最後にまとめ
問題を正確に捉える
何が問題かを的確に捉える。当たり前かもしれませんが、問題として定義したものを解消するため、ここがずれるとそりゃ解消できませんね。。改めて学びました。
結局質問は神
自分で考えることも必要（調査することが理解は格段に上がります）ですが、やっぱ質問することで解消に至れるスピードは格段に上がりますね。。
