[Rails学習記録]タスク管理アプリの拡張 #Rails

Railsの学習記録です。
Railsチュートリアルを進めていましたが、写経に少し飽きてきたので、別途購入していた本のソースを拡張してみることにしました。
本のソースがベースなので、自分が改修した箇所についてのみ書きます。

書籍

参考にした書籍はこちらです。
こちらのChapter3のタスク管理アプリケーションを作ったのですが、出来上がるのが早くて驚きでした。
さすがRails。

現場で使える Ruby on Rails 5速習実践ガイド
https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B-Ruby-Rails-5%E9%80%9F%E7%BF%92%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-%E5%A4%A7%E5%A0%B4%E5%AF%A7%E5%AD%90/dp/4839962227

機能について

まずは、本の通りにタスク登録機能を作りました。

元々の画面こちらです。

〈一覧画面〉

〈編集画面〉

機能は以下になります。

一覧表示
新規登録
更新
削除

今回の改修では、完了・未完了のステータスの管理ができるようにしました。
未完了ボタンを押すと未完了のタスクのみ表示、
すべてボタンを押したときに、完了済みのタスクも含めて表示されます。
(インターフェース的には微妙なのですが、今回は少しいじれればいいくらいの気持ちなので、それで良しとします。)

〈一覧画面〉

〈編集画面〉

テーブル定義

登録項目は以下になります。
完了・未完了のステータスを登録できるようにしました。

登録項目

登録項目
ID
タスク名
内容
登録日時
更新日時

追加内容

登録項目	カラム名
ステータス	complated

コード定義

ステータス	値
未完了	０
完了	1

DBのカラム追加

マイグレーションファイルを作成しカラムの追加を行います。


$ rails g migration AddCompletedToTasks completed:integer

こちらはマイグレーションファイルの内容です。

20190414134906_add_completed_to_tasks.rb


class AddCompletedToTasks < ActiveRecord::Migration[5.2]
  def change
    add_column :tasks, :completed, :integer
  end
end

以下のコマンドでマイグレーションを実行します。


$ rails db:migrate

登録画面

新規登録時には、0(未完了)が登録されるようにします。
ユーザーがステータスを設定することは想定していないので、input[type="hidden"]でPOSTされるようにします。

new.html.slim


= form_with model: @task, local: true do |f|
  #他入力欄(中略)
  .form-group
    =f.hidden_field :completed,:value => 0, id: 'task_completed'
  =f.submit nil, class: 'btn btn-primary'

編集画面

ステータスの変更は編集画面から行います。
セレクトボックスで完了・未完了を選択できるようにします。

edit.html.slim


= form_with model: @task, local: true do |f|
  #他入力欄(中略)
  .form-group
    =f.label :completed
    = f.select :completed, [['未完了',0],['完了',1]], {}, class: 'form-control', id: 'task_completed'
  =f.submit nil, class: 'btn btn-primary'

新規登録時と編集時にステータスが受け取れるよう、StrongParametersにて値を追加します。
登録処理・更新処理はできているので、これでDBにステータスが保管できるようになりました。

tasks_controller.rb


private
def task_params
  params.require(:key).permit(:column, :column, :completed)
end

一覧画面

すべてのタスクを表示

URLのパラメーターを取得し、以下のように?show=allがついている時は、DBからすべてのレコードを表示させます。
http://localhost:3000/tasks?show=all
そうでない時は、completedのカラムが0のレコードを取得します。

tasks_controller.rb


def index
  @show = params[:show]
  if @show == "all" then
    @tasks = Task.all
  else
    @tasks = Task.where(completed: 0)
  end
end

ボタンの出し分け

URLパラメーターによって、アクティブなボタンを変更します。
?show=allが含まれていたら、「すべて」のボタンをアクティブにさせます。
また、「未完了」ボタンを押したら、
http://localhost:3000/tasks
に遷移させます。
URLパラメーターに?show=allが含まれていない場合は、上記の逆の動きになります。
ボタンの色はbootstrapのclassを付与することで出し分けています。

index.html.slim


- if @show
  = link_to 'すべて', tasks_path(:show=>'all'), class: 'btn btn-primary btn-sm ml-2'
  = link_to '未完了', tasks_path, class: 'btn btn-outline-primary btn-sm ml-1'
-else
  = link_to 'すべて', tasks_path(:show=>'all'), class: 'btn btn-outline-primary btn-sm ml-2'
  = link_to '未完了', tasks_path, class: 'btn btn-primary btn-sm ml-1'

以上でステータス管理ができるようになりました。

感想

何が言いたいって、とにかく早い。
MVC、POST/GETまでは比較的簡単に掴めたので、色々作れそうな気がしてきました。
あと個人的にslimが書きやすくていい。
次はログイン機能を作りたいのと、Rails上でAjaxも使ってみたいなあ。