更新日:
【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の知識について学びたいという方は、こちらの書籍が役に立つでしょう。
この記事のまとめ
- button_toメソッドを使うと簡単にボタンを作成することができる
- オプションを使うとclassを指定したり、ボタンを無効化することができる
- デフォルトのhttpメソッドはPOSTなので注意しよう！
