スライドショースライドショー

【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の使い方まとめ
更新日 : 2019年5月17日

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

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

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

<%= 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

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

sato

sato

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説