クリックしてテーブルにレコードを追加・削除（button_toメソッド）

はじめに

button_toの概要とlink_toとの違いについて書いていこうと思います。

参考記事
https://pikawaka.com/rails/button_to

ビューファイルはhamlを利用します。
hamlが分からない方は以下を参照ください。
https://pikawaka.com/rails/haml

ファイルの準備

今回はクリックするとテーブルにレコードを追加したり削除したりする機能を実装してみようと思います。
完成イメージは下のような感じです

では早速準備していきましょう！
まずはモデルとテーブルを作成していきます。

モデル

$ rails g model count

class CreateCounts < ActiveRecord::Migration[5.2]
  def change
    create_table :counts do |t|
      t.integer :number, null: false
      t.timestamps
    end
  end
end

今回はnumberカラムを用意しておきました。（特に理由はありません）
マイグレーションファイルを追記したらmigrateしておきます。

$ rails db:migrate

続いてコントローラを作成してルーティングを設定しておきます。

コントローラ

$ rails g controller counts

class CountsController < ApplicationController
  def create
    Count.create(number: 1)
    redirect_to root_path
  end

  def destroy
    Count.last.destroy
    redirect_to root_path
  end
end

ルーティング

Rails.application.routes.draw do
  # (略)
  resources :counts, only: [:create, :destroy]
end

これで準備できました。

button_toメソッド

button_toメソッドの書き方は下のような感じです。

button_to "ボタン名", { パス or コントローラー名とアクション名 }, { オプション }

第1引数にはボタンに表示されるテキストを、第2引数ではボタンをクリックした時に動くアクションを指定するコードを、第3引数にはオプションを指定します。オプションはメソッドを指定する時なんかに使います。
個人的に第2引数はパスを書いた方が使いやすいです。（一応両方書いてみます）

今回はボタンを押すとnumberカラムに１を追加するボタンと最新のレコードを削除するボタンを作ります。

カウント
= Count.all.length

= button_to "カウントボタン１", {controller: "counts", action: "create"}
= button_to "カウントボタン２", counts_path

- if Count.exists?
  - id = Count.last.id
  = button_to "削除ボタン１", {controller: "counts", action: "destroy", id: id}, method: :delete
  = button_to "削除ボタン２", count_path(id), method: :delete

第2引数にはコントローラ指定ver.とパス指定ver.の両方を記述しておきました。
（どちらも同じ動きをします）
ブラウザで動作確認してみると下のようにちゃんと動いてくれてます。

button_toではデフォルトがpostメソッドなのでcreateアクションを動かす場合はメソッドの指定（第3引数）は不要になります。ですのでdestroyアクションを動かすためにはdeleteを指定する必要があります。

ちなみに第3引数にはメソッドの指定の他にもクラス名の指定とかもできます。
クラス名の指定はメソッド指定の後ろに続けて書くこともできます。（第4引数っぽくなりますね）
書いてみると下のような感じです。

= button_to "カウントボタン", counts_path, class: "count-btn"
= button_to "削除ボタン", count_path(id), method: :delete, class: "delete-btn"

2つ目のちなみにですが、ビューファイル中の if 〜はcountのレコードが0になったときにエラーを回避するためです。（レコードがないと削除するidを指定できないので）

link_toとの違い

link_toメソッドでも同様のことができますが、大きく違いが２つあります
・button_toはフォームが作成され、link_toはリンクが作成される
・link_toはデフォルトでGETメソッドが動く

実際にコードを書いて確かめてみましょう！

= button_to "button_to", counts_path
= link_to "link_to", counts_path, method: :post

どちらも同じく動作していますね！
さらに検証ツールを使えば違いがよくわかります。

link_toはaタグを生成するだけですが、button_toはformを作りその中にinputタグでボタンが生成されます。
見た目的にもbutton_toはボタンの形に、link_toはリンクの形になっていますね。

まとめ

以上、button_toメソッドの使い方とlink_toとの違いを解説してみました。
これといった使い分けは思いつきませんが、cssを当てる時にやりやすいように使い分けすれば良いのではないでしょうか。（テキトーですみません）

間違いがあれば教えていただけると助かりますm(_ _)m