【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 }%>

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

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

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

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

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

formの中にボタンが作られる形になるので、form_forやform_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を使うときは末尾に_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" } %>

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

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[:キー]で値を取得することができます。

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系のヘルパーメソッド内では使うことができません。実際に開発現場でも使われるようなRailsの知識について学びたいという方は、こちらの書籍が役に立つでしょう。

役に立ったらSHARE♪

• twitter
• facebook
• はてブ