スライドショー

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

みなさん、こんにちは!

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

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

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

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

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

[基本] button_toとは?
[基本] button_toを使ってみよう!
[応用] CSSの反映について!

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

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

button_toとは?

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

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

rails-button_to-1

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

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

button_toを使ってみよう!

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

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

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

使用してみる!

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

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

たったこれだけです!

内容も簡単ですね。

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

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

そんな内容です。

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

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

エラーが出た場合

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

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

【Rails入門】resourcesの使い方まとめ
更新日 : 2020年3月10日

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

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

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

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

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

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

これも簡単ですね!

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

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

【Rails入門】params使い方まとめ
更新日 : 2019年7月31日

CSSの反映について!

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

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

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

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

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

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

まとめ

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

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

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

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

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

sato

sato

学生時代を含めると、かれこれ10年以上プログラマーとして過ごしています。
様々な言語や環境、プロジェクトに関わってきましたので、より実践的な記事をみなさんにお届きるよう情報発信していきます!