表示順の入れ替え(2)

前回からタスクの表示順を入れ替える機能を作り始めました。現状は上下移動のボタンを設置したところです。今回はサーバー側 API を作ります。

---

まず、リストの順序入れ替え処理を容易にしてくれる Gem パッケージ actsaslist を導入しましょう。

Gemfile

gem 'acts_as_list'

ターミナルで次のコマンドを実行します。

bin/bundle

acts_as_list の README.md に従って、さらに以下のコマンドを順に実行します。

bin/rails g migration AddPositionToTasks position:integer
bin/rake db:migrate
bin/rake db:reset

Task クラスに acts_as_list を組み込みます。app/models/task.rb を次のように書き換えてください。

class Task < ActiveRecord::Base
  acts_as_list
end

---

続いて、API を作ります。現在、config/routes.rb は次のようになっています。

Rails.application.routes.draw do
  root 'top#index'

  namespace :api do
    resources :tasks, only: [ :index, :create, :update, :destroy ]
  end
end

これを次のように変更します。

Rails.application.routes.draw do
  root 'top#index'

  namespace :api do
    resources :tasks, only: [ :index, :create, :update, :destroy ] do
      patch :move_higher, :move_lower, on: :member
    end
  end
end

acts_as_list では「上に移動する」を move_higher、「下に移動する」を move_lower と表現します。私たちの API にもそれに合わせた名前を付けました。

次に、move_higher アクションと move_lower アクションを実装します。app/controllers/tasks_controller.rb を次のように書き換えてください。

class Api::TasksController < ApplicationController
  def index
    @tasks = Task.order(position: :asc)
  end

  (省略)

  def destroy
    Task.find(params[:id]).destroy
    render text: 'OK'
  end

  def move_higher
    task = Task.find(params[:id])
    task.move_higher
    render text: 'OK'
  end

  def move_lower
    task = Task.find(params[:id])
    task.move_lower
    render text: 'OK'
  end

  private
  (省略)

acts_as_list のおかげで、とてもシンプルなコードとなりました。これらのアクションは Ajax で用います。サーバーからブラウザへは単に「OK」という文字列を返しています。

---

以上で API の準備ができました。次回は、この API を利用して JavaScript 側を完成させます。