みなさん、こんにちは!
フリーランスプログラマーのsatoです。
今回はRailsの「button_to」について見ていきましょう。
どんなサイトを作るにしてもボタンは必須ですよね?
このbutton_toをマスターして、自在にボタンを操れるようになりましょう!
というわけで今回のアジェンダです。
[基本] button_toを使ってみよう!
[応用] CSSの反映について!
まず仕組みと使い方を学び、その後で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の引数で苦戦をする人は意外と多いと思います。
しかし、こういった問題解決の積み重ねが、プログラムの上達につながります。
ぜひ今回学んだことを生かして、次にぶつかった課題も上手に解決していきましょう!
