【Rails】button_toの使い方をどこよりもわかりやすく解説!

Rails

button_toとは

ボタンを簡単に作成することができるヘルパーメソッドです。

button_toを使うと下のようなボタンを簡単に作成することができます。

ユーザー登録

button_toの書き方

button_toは下記のように記述します。

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

第1引数にはボタンに表示されるテキストを、第2引数ではボタンをクリックした時に動くアクションを指定するコードを、第3引数にはオプションを指定します。

上の例のボタンは下記のように記述します。

erb
1
<%= button_to 'ユーザー登録', {controller: 'users', action: 'new'}, {method: :get }%>

上のコードは下記のコードにコンパイルされます。

html
1
<form class="button_to" method="get" action="/users/new"><input type="submit" value="ユーザー登録" /></form>

なお { } の中のオプションが1つであれば { } は省略できます。

erb
1
2
3
4
<%= button_to 'ユーザー登録', { controller: 'users', action: 'new' }, { method: :get } %>

# 3番目の{}は省略可能
<%= button_to 'ユーザー登録', {controller: 'users', action: 'new'}, method: :get %>

link_toとの違い

リンクを作成するヘルパーメソッドにlink_toというメソッドがあります。
link_toとbutton_toの違いはlink_toは下記のようにaタグを生成するだけですが、button_toは上の例のようにformを作りその中にinputタグでボタンが生成されます。

erb
1
<%= link_to "Yahoo!", "https://www.yahoo.co.jp/" %>

link_toは下のようにaタグが生成されます。

html
1
<a href="https://www.yahoo.co.jp/">Yahoo!</a>

formの中にボタンが作られる形になるので、form_for内のボタンを作成するときなどは使うことができません。

また何も記述しない場合のhttpリクエストがlink_toだとgetになって、button_toだとpostになるという違いがあります。

オプションの指定

それでは使い方の中のオプションについて解説していきます。

パスの指定

ボタンをクリックした時にどのコントローラーのどのアクションを動かすかのパスを指定します。

erb
1
<%= button_to "ボタン名", "パス" %>

パスは直接、文字列で指定もできますし、Prefixで指定することもできます。

erb
1
2
3
4
5
# 文字列で指定
<%= button_to 'ユーザー登録', '/users/new', method: :get %>

# Prefixで指定
<%= button_to 'ユーザー登録', new_user_path, method: :get %>

Prefixとは?

Prefixはパスが代入されている変数のようなものです。
Prefixにどのパスが設定されているかは「rake routes」コマンドで確認ができます。

prefix
コマンドを実行すると上のようにPrefixが確認できます。
Prefixを使うときは末尾に「_path」と追記します。
prefixを確認するとルートパスを表す「/」というパスは「root」になっています。
なのでbutton_toのパスを指定する場所には「_path」をつけた「root_path」を書いてあげれば「/」で指定した記述と同じになります。

パスにidが入っているときはidの情報が入っているインスタンスを引数として渡してあげることにより指定ができます。
例えばusersコントローラーのshowアクションを動かすときは通常のパスだと「users/"ユーザーのid"」になりますが、Prefixを使って書くと「user_path(@user)」のような記述になります。
上の「@user」はコントローラーで「@user = User.find(params[:id])」などで記述してあげれば@userの中にはそのユーザーのidも含まれているのでuser_pathの引数として指定できます。

Prefixはresourcesメソッドを使いルーティングを設定すれば自動で作成されます。
可読性をあげるためにもパスを指定するときにはPerfixを使用したほうがいいです。

controller

ボタンをクリックした時に動かすコントローラーを指定します。
第2引数内で定義します。
下で紹介するactionと一緒に使います。

erb
1
<%= button_to "ボタン名", {controller: 'コントローラー名', action: 'アクション名'} %>

action

上の説明同様、クリックした時に動かすコントローラー内のアクションを指定します。
第2引数内で定義します。
記述方法は上記の通りです。

コントローラーとアクションの指定は必ず第2引数で定義する必要があるので、{ } で囲う必要があることに注意しましょう。

method

httpメソッドを指定する時に使います。
何も指定しないときは「post」になります。
destroyアクションを動かしたいときはhttpメソッドはdeleteになりますね。
ですので下記のような記述になります。

erb
1
2
<!-- 例 -->
<%= button_to "削除", "/users/1", method: :delete %>

id

button_toでコンパイルされるタグにidを指定させます。

erb
1
2
<!-- 例 -->
<%= button_to "削除", "/users/1", { method: :delete, id: "hoge" } %>

下記のようにコンパイルされます。

html
1
<form class="button_to" method="post" action="/users/1"><input type="hidden" name="_method" value="delete" /><input id="hoge" type="submit" value="削除" /></form>

第3引数に指定するので、methodオプションを指定している場合は { } で囲う必要があるので注意しましょう。

class

button_toでコンパイルされるタグにclassを指定させます。
記述法はidと同じです。

erb
1
2
<!-- 例 -->
<%= button_to "削除", "/users/1", { method: :delete, class: "hoge" } %>

disabled

ボタンを無効化することができるオプションです。
trueとすることで、下の画像のように表示が薄くなりボタンをクリックできないようにすることができます。

無効化

erb
1
2
<!-- 例 -->
<%= button_to "削除", "/users/1", { method: :delete, disabled: true } %>

デフォルトはfalseです。

params

パラメーターを送る時に使用するオプションです。

erb
1
2
<!-- 例 -->
<%= button_to "送信", "/users/", { method: :get, params: {name: 'ピカわか', age: 25} } %>

このように定義するとurlのクエリに情報が入り、コントローラー内でparams[:キー]で値を取得することができます。

url

コントローラー
1
2
@name = params[:name]
@age = params[:age]

confirm

ボタンをクリックした時の確認メッセージを表示させることができるオプションです。

メッセージを表示

下記のように記述します。

erb
1
2
<!-- 例 -->
<%= button_to "削除", "/users/1", { method: :delete, data: { confirm: '本当に削除しますか?' } } %>

ボタンにアイコンを埋め込んでみよう

ボタンの中にアイコンを使いたい場合は下記のようにブロックで指定します。

アイコンを埋め込む

erb
1
2
3
<%= button_to new_user_path, method: :get do %>
  <i class="fas fa-user"></i> ユーザー登録
<% end %>

注意点

最初の方にも記述しましたが、button_toのデフォルトのhttpリクエストはPOSTです。
link_toはGETなので間違いやすいので、注意しましょう。
またformの中にボタンが作られるので、form系のヘルパーメソッド内では使うことができません。

まとめ

・button_toメソッドを使うと簡単にボタンを作成することができます。
・オプションを使うとclassを指定したり、ボタンを無効化することができます。
・デフォルトのhttpメソッドはPOSTなので注意しましょう