7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Railsで並び替え機能を実装する

Last updated at Posted at 2021-01-21

##自己紹介
初めてQiitaに記事を投稿します。
9月から独学でプログラミング学習を開始し、
11月からスクールを使って学習しています。
現在はポートフォリオの作成中です。
知識を定着させるために、学びをアウトプットします。
また、これから学び始める方の参考になることを願っています。


##開発環境

  • Ruby 3.0
  • Ruby on Rails 6.0.3.4

#並び替え機能を実装する

現在、映画情報を保存するためのMovieというテーブルがあるとします。
まずはMovieモデルを編集します。

class Movie < ApplicationRecord

  scope :sort_movies, -> (sort) { order(sort[:sort]) }
  scope :sort_list, -> {
    {
      "並び替え" => "",
      "作成の古い順" => "updated_at ASC"
      "作成の新しい順" => "updated_at DESC"
    }
  }

情報を取得し並び替える為の:sort_moviesと、
並び替える方法を指定する:sort_listを追加しました
これらを使って、
app/controllers/movies_controllerindexを編集します。

class MoviesController < ApplicationController
  def index
    if sort_params.present?
      @movies = Movie.sort_movies(sort_params)
    else
      @movies = Movie.all
    end
    @sort_list = Movie.sort_list
  end


  private
    def sort_params
      params.permit(:sort)
    end

ここではif文を用いて、並び替えを行った時と行わなかった時を場合分けしています。
@sort_listはビューの並び替え項目で使用します。
また、並び替えの情報はsort_paramsというメソッドを通して受け取っています。
最後に、app/views/movies/index.html.erbに並び替えを追加します。

<%= form_with movies_path, method: :get do |f| %>
  <% if @sorted.present? %>
    <%= f.select :sort, @sort_list, selected: @sorted, onChange: "javascript: this.form.submit();" %>
  <% else %>
    <%= f.select :sort, @sort_list, {}, onChange: "javascript: this.form.submit();" %>
  <% end %>
<% end %>

javascriptを使用し、
並び替え項目@sort_listを選択した時に、
並び替える情報が:sortに送られるようになっています。


その他、必要に応じて、並び替えたい項目は
:sort_listに追加することで使用できます。

  "表示される名前" => "並び替えに使うカラム 並び順の指定"

##(追記: 2021/2/7)
上記の方法ではセキュリティの問題がありました。
下記を参考に修正して下さい。

Railsの並び替え機能のセキュリティを改善する。
https://qiita.com/KON-ch/items/a22863d269503261fbb7

以上で並び替え機能の実装は終了です。

7
6
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?