背景

実務で検索機能を実装する際、データの並び替えもできるようにしたい、という要望がありました。既にRansackを使った検索機能は実装済みでしたが、並び替え機能も追加するために sort_link を活用することになりました。この実装内容をまとめて記録として残します。また、今回の実装はBootstrapを用いてスタイリングしており、基本的なデザインの調整も行いました。

Ransackとは

Ransackは、Ruby on Railsにおいて簡単に検索機能を追加できるGemです。Ransackを使うと、条件に基づいたデータの検索ができるフォームや、指定したカラムによる並び替えが可能になります。検索ロジックを簡潔に書けるだけでなく、カスタムした条件にも対応しやすく、特に管理画面などでのデータ検索や並び替えが必要な場面で重宝します。

sort_linkとは

sort_link は、Ransackが提供するメソッドの一つで、並び替えリンクを生成します。sort_link を使用することで、簡単に指定したカラムの昇順・降順で並び替えが可能になります。ボタンやリンクをクリックするだけで並び替えが行われるため、UI/UX向上にもつながります。また、カスタマイズ可能なクラスを指定することで、スタイルも自由に調整できます。

実装手順

テーブルの構造
今回はBootstrapを使い、スタイルを設定しています。以下のようなテーブル構造で各列に sort_link を設置し、データを並び替え可能にします。

thead.table-dark
  tr
    th.text-nowrap
      = sort_link(@search, :created_at, "登録日", {class: "text-decoration-none text-white"})
    th.text-nowrap
      = sort_link(@search, :delivery_enduser_created_at, "送信日", {class: "text-decoration-none text-white"})
    th.text-nowrap 店舗名
    th.text-nowrap クライアント名
    th.text-nowrap 電話番号
    th.text-nowrap 理由
    th(style="min-width: 40px;") 通話メモ
    th(style="min-width: 40px;") コメント
    th.text-nowrap 詳細情報

※「delivery_enduser_created_at」はモデルファイルで専用のスコープを定義しています。

  ransacker :delivery_enduser_created_at do
    Arel.sql('delivery_endusers.created_at')
  end

sort_link メソッドの第一引数には、@search オブジェクトを指定しています。このオブジェクトは、Ransackでの検索条件を保持するもので、並び替えリンクでもこれを利用します。

第二引数には並び替えを行いたいカラム名を指定し、第三引数に表示するカラムのタイトルを渡します。

最後のオプション引数には、Bootstrapを使ったクラス (text-decoration-none text-white) を指定し、リンクのデザインを調整しています。

並び替えの動作
sort_link をクリックすると、指定したカラムのデータが昇順・降順で切り替わります。例えば、「登録日」をクリックすると、その列のデータが昇順に並び替えられ、再度クリックすると降順に切り替わります。これにより、ユーザーは簡単に見たい順序でデータを整理して表示することができます。
Bootstrapでのスタイリング
今回は thead.table-dark クラスを使ってヘッダーにダークテーマを適用しています。また、各リンクに text-decoration-none や text-white クラスを追加して装飾を取り除き、見やすい白文字に設定しました。さらに、ヘッダー行の一部に min-width スタイルを直接指定することで、列幅の固定も行っています。

まとめ

sort_link を活用することで、Ransackの検索機能に並び替え機能を簡単に追加でき、ユーザーにとって使いやすいUIを構築することができます。