【Rails入門】button_toが一目でわかる!上手なボタンの作り方

みなさん、こんにちは!

フリーランスプログラマーのsatoです。

今回はRailsの「button_to」について見ていきましょう。

どんなサイトを作るにしてもボタンは必須ですよね?

このbutton_toをマスターして、自在にボタンを操れるようになりましょう!

というわけで今回のアジェンダです。

まず仕組みと使い方を学び、その後でCSSの反映やJavaScriptとの組み合わせ方などを見ていくことにしましょう。

それではよろしくお願いいたします。

button_toとは?

button_toとは一言で言えば「ボタンを作成する」仕組みです。

いわゆる以下のようなボタンが作成できるわけですね!

そして一行で、非常に簡単にボタンを生成することができます。

今回はその辺りも見ていきましょう。

button_toを使ってみよう!

兎にも角にも、まずは使用してみましょう。

まずは一番シンプルに、ボタンを押したら「mypagesコントローラー」の「indexビュー」へ飛ぶ。

そんな流れを見てみましょう。

使用してみる!

作成はとてもシンプルです。

<%= button_to "ボタン", {controller: 'mypages', action: 'index'}, {method: :get} %>

たったこれだけです!

内容も簡単ですね。

「ボタン」という文字を中に表示しているボタンで…

「mypagesコントローラー」の「indexアクション」へ「getメソッド」で通信を行う。

そんな内容です。

別ページへ飛ばしたいだけなら、通常これだけで事足りると思います。

※今回は初心者向けに、多分ルーティング設定はgetだろうと予測し「getメソッド」を指定しています。もしエラーが出る場合は、次のエラーが出た場合をお読みください。

エラーが出た場合

もしルーティング設定をいじっている場合は「No route matches」のようなエラーが出る可能性もあります。

その辺りの解消はルーティングの設定を学ぶ必要がありますので、以下の記事を参考に勉強してみてください。

パラメーターを追加してみる!

ページを遷移する際にパラメーターを渡したい場合もあるでしょう。

その場合は、以下のように追加しましょう。

<%= button_to "ボタン", {controller: 'coins', action: 'index'}, {method: :get, params: {num1: 'aaa', num2: 'bbb'}} %>

追加されたのは「params: {num1: ‘aaa’, num2: ‘bbb’}」の部分です。

これで「num1(中身はaaaという文字列)」と「num2(中身はbbbという文字列)」という二つのパラメーターを送ることができます。

これも簡単ですね!

またパラメーターの受け取りについては、以下の記事が参考になるでしょう。

受け取り方がわからない人は読んでおきましょう。

CSSの反映について!

次に応用としてボタンにCSSをつけてみましょうか。

今回は仮に「mybutton」というクラスがあったとして、ボタンにつける場合を見てみましょう。

<%= button_to "ボタン", {controller: 'coins', action: 'index'}, {method: :get, class: "mybutton"} %>

先ほどの引数を加えたものの後ろに「class: "mybutton"」部分が追加されているのがわかると思います。

これだけでclassの追加が可能です。

またclassではなくidを追加したい場合「id: "mybutton"」とidを指定し追加を行いましょう。

まとめ

いかがでしたでしょうか。

Railsの引数で苦戦をする人は意外と多いと思います。

しかし、こういった問題解決の積み重ねが、プログラムの上達につながります。

ぜひ今回学んだことを生かして、次にぶつかった課題も上手に解決していきましょう!