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

Rails

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

ビューファイル | button_toの基本構文
1
<%= button_to "ボタン名", { パス or コントローラー名とアクション名 }, { オプション } %>

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

ボタン

button_toの使い方

この章では、button_toの使い方について解説します。

button_toの定義方法
リンクをコピーしました

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

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

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

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

ビューファイル
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>

このようにformを作りその中にinputタグでボタンが生成されます。
なお { } の中のオプションが1つであれば { } は省略できます。

ビューファイル
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_tobutton_toの違いはlink_toは下記のようにaタグを生成するだけですが、button_toは上の例のようにformを作りその中にinputタグでボタンが生成されます。

ビューファイル
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_forform_with内のボタンを作成するときなどは使うことができません。

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

オプションの指定
リンクをコピーしました

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

パスの指定
リンクをコピーしました

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

ビューファイル
1
<%= button_to "ボタン名", "パス" %>

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

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

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

Prefixとは?
リンクをコピーしました

Prefixは接頭辞とも呼ばれ、この後に_pathヘルパーをつけるとパスを返してくれるヘルパーメソッドとして使うことができます。
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と一緒に使います。

ビューファイル
1
<%= button_to "ボタン名", {controller: 'コントローラー名', action: 'アクション名'} %>

action
リンクをコピーしました

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

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

method
リンクをコピーしました

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

ビューファイル
1
2
<!-- 例 -->
<%= button_to "削除", "/users/1", method: :delete %>

id
リンクをコピーしました

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

ビューファイル
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と同じです。

ビューファイル
1
2
<!-- 例 -->
<%= button_to "削除", "/users/1", { method: :delete, class: "hoge" } %>

disabled
リンクをコピーしました

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

無効化

ビューファイル
1
2
<!-- 例 -->
<%= button_to "削除", "/users/1", { method: :delete, disabled: true } %>

デフォルトはfalseです。

params
リンクをコピーしました

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

ビューファイル
1
2
<!-- 例 -->
<%= button_to "送信", "/users/", { method: :get, params: {name: 'ピカわか', age: 25} } %>

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

url

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

confirm
リンクをコピーしました

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

メッセージを表示

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

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

ボタンにアイコンを埋め込んでみよう
リンクをコピーしました

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

アイコンを埋め込む

ビューファイル
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なので注意しましょう