【Rails】button_toの基本的な使い方とlink_toとの違い

こんにちは！CODE CLUB965のKです！

今回は、Railsで簡単にボタンを作ることができる button_to の基本的な使い方を解説したいと思います。
また、同じくボタンを作ることができる link_to との違いについても書きたいと思います。

button_to

まずはbutton_toの書きた方ですが、viewファイルに下記のように記述することでボタンを作成することができます。

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

第1引数には、ボタンに表示されるテキストを指定します。
第2引数には、ボタンをクリックした時に遷移するパスか、コントローラーとアクションを指定します。
第3引数には、オプションを指定します。
オプションには、クラスやidの指定、パラメータの付与などができます
ちなみに、{ } の中のオプションが1つであれば { } は省略できます。

link_toとの違いは？

link_toはその名の通りリンクを作成することができるヘルパーメソッドです。
button_toと同じようにボタンを作ることができます。

link_toについては使い方をまとめた記事がありますので参考にして下さい。

では、button_toとlink_toとの違いは何でしょうか？

まず、違いを簡単に説明すると、link_toは aタグを生成するだけですが、button_to は、formが作られその中にinputタグでボタンが生成されます。

具体的には以下のような感じです。

link_toの場合

<%= link_to "Google",  "https://www.google.co.jp/" %>

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

<a href="https://www.google.co.jp/">Google</a>

button_toの場合

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

上記のような場合、下記のコードにコンパイルされます。

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

このようにformの中にボタンが作られる形になります。

なので、form_withなどを使っている場合は、その中でボタンを作成したければlink_toを使います。

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

最後に

button_toやlink_toを使えば簡単にボタンが実装できて便利ですね！
button_toもlink_toもそれぞれ違いがありますので、使い方には注意しましょう。

それでは、また！

Follow me!