[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

##機能について

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

元々の画面こちらです。

〈一覧画面〉
<img width="1238" alt="スクリーンショット 2019-05-05 16.19.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330524/63c54159-4e30-b8f5-7939-1c53b806ca21.png">
〈編集画面〉
<img width="1239" alt="スクリーンショット 2019-05-05 16.24.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330524/10d2b451-dfff-ddf0-68a9-e06380f5cf08.png">
機能は以下になります。

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

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

〈一覧画面〉
<img width="1237" alt="スクリーンショット 2019-05-05 16.32.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330524/b0ee9a85-47db-e497-9c3a-8b4b2e47cf82.png">
〈編集画面〉
<img width="1237" alt="スクリーンショット 2019-05-05 16.33.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330524/23590daf-0cf5-b891-f3fc-fc2de67a8cf5.png">



##テーブル定義

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

###登録項目

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

###追加内容
| 登録項目  |カラム名|
|:--------:|:--------:|
|ステータス|complated|


###コード定義

| ステータス  |値|
|:--------:|:--------:|
|未完了|０|
|完了|1|


##DBのカラム追加

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

```

$ rails g migration AddCompletedToTasks completed:integer
```

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

```ruby: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されるようにします。

```ruby: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'
```

##編集画面

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

```ruby: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にステータスが保管できるようになりました。

```ruby: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のレコードを取得します。

```ruby: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を付与することで出し分けています。

```ruby: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も使ってみたいなあ。