Railsでラジオボタンを実装する方法を現役エンジニアが解説【初心者向け】

初心者向けにRailsでラジオボタンを実装する方法について現役エンジニアが解説しています。ラジオボタンとは、入力フォームで使用する選択形式のボタンのことです。Railsでラジオボタンを実装するにはradio_buttonを使用します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Railsでラジオボタンを実装する方法について解説します。

Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。

田島悠介

今回は、Rubyに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Railsでラジオボタンを実装する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

ラジオボタンとは

ラジオボタンとは、入力フォームでよく見かける以下のような選択形式のボタンのことです。

一般的なHTMLフォームのラジオボタンの例

チェックボックスが複数の項目を選択できるのに対して、ラジオボタンはどれか1つのみを選択するボタンになります。

 

Railsでラジオボタンを実装する方法(radio_buttonの使い方)

Railsでラジオボタンを実装するにはradio_buttonを使用します。

 

<%= form_with(model: user, local: true) do |form| %>
  <%= form.radio_button :gender, :male %>
  <%= form.radio_button :gender, :female %>
<% end %>

 

プロパティ名と値をセットで指定する必要があり、上の例だとUserモデルのgenderプロパティを選択するラジオボタンが生成されます。

 

<input type="radio" value="male" name="user[gender]" id="user_gender_male">
<input type="radio" value="female" name="user[gender]" id="user_gender_female">

 

選択済の状態にしたい場合はcheckedオプションを指定しましょう。

<%= form.radio_button :gender, :male, checked: true %>

 

[PR] Rubyのプログラミングで挫折しない学習方法を動画で公開中

実際に書いてみよう

Userモデルのgenderプロパティを選択するラジオボタンを生成してみましょう。

先ほどのコードでラジオボタンそのものは生成されるのですが、以下の画像のように何を選択するボタンなのかが分からない状態になってしまいます。

Railsでラベルを設定する前のラジオボタンの画像

選択肢が分かるように、適切にラベルを設定してあげましょう。ラベルの設定にはlabelメソッドを使います。

<%= form_with(model: user, local: true) do |form| %>
  <%= form.radio_button :gender, :male %>
  <%= form.label :gender, "男性", {value: :male, style: "display: inline-block;"} %>
  <%= form.radio_button :gender, :female %>
  <%= form.label :gender, "女性", {value: :female, style: "display: inline-block;"} %>
<% end %>

 

対象フォームの指定(:gender)、表示テキストの指定(“男性”, “女性”)、選択肢との紐付け(value)、テキスト位置の指定( “display: inline-block;”) を行うことで、以下の画像のようなラジオボタンを作成することができます。

ラベルを設定した後のRailsのラジオボタン

 

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。
大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。
おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。