Ruby on Railsでcheck_box_tagを使う方法【初心者向け】
Webサービスでユーザから入力を求める際にフォーム(form)を用いることが多々あります。今回はフォームの中でcheck_box_tag(チェックボックス)を使用する方法を解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
Webサービスでユーザから入力を求める際にフォーム(form)を用いることが多々あります。
今回は、RubyのフレームワークであるRailsで、フォームの中でチェックボックスを使用する方法を解説します。
田島メンター！！画面にチェックボックスを表示させたいのですが、どうすればいいですか～？
そういうときはヘルパーを活用しよう。
ヘルパーというのは何ですか～？
フォームを簡単な記述で作成したりできる便利なものだよ。実際に使ってみようか。
事前準備
チェックボックスを表示するためのコーディングはViewファイルに対して行います。
ここでは、サンプルプロジェクトを作成してからRailsのScaffoldという機構を使い雛形を生成してからチェックボックスの記述を行います。
まず、サンプルプロジェクトを生成します。
$ rails new check_box_tag
生成に成功したら生成したプロジェクトのディレクトリに移動します。
$ cd check_box_tag
ここでは例としてUserという名前の雛形を作ります。ユーザには最低限名前を設定したいのでnameという属性を設定しておきます。
rails generate scaffold User name:string
たくさんファイルが生成されました。
このファイルの中で今回編集するファイルはapp/views/users/_form.html.erbのみです。
_form.html.erbではユーザの新規作成、編集時に表示されるフォームがコーディングされています。
現在の状態をブラウザで確認してみましょう。
ブラウザで表示するために必要なデータベースに必要なテーブル作成とサーバの起動を下記コマンドで行います。
$ rake db:migrate # テーブルの作成 $ rails s # サーバ起動
上記コマンドを実行後下記URLにアクセスしてください。
http://localhost:3000/users/new
このような表示になっていれば事前準備は完了です。
ここでは「ユーザーの名前」を「短い文字列」で取り扱う一式を作成しているよ。
new.html.erbを開くと、renderでformが呼び出されているのが分かりますね。
そうだね。なのでそのformの部分にチェックボックスを追加してみよう。app/views/users/_form.html.erbに追記していくよ。
check_box_tagの書き方
今回はユーザ名の入力欄の下にチェックボックスを表示させようと思います。
下記コードを追記します。
<%= check_box_tag :sample %>
この記述だけでは、ただチェックボックスが表示されているだけでユーザにはなんのチェックボックスなのか判断することができません。
チェックボックスに対応するラベルを定義することで何のチェックボックスかわかるようにします。
<%= label_tag :sample, 'チェックボックス' %>
ラベルを作成する際、属性(上記例では:sample)をチェックボックスの属性と同じにしておくとラベルをクリックした場合にもチェックボックスのオン/オフの切り替えができユーザビリティ向上に繋がるので意識するようにしましょう。
ブラウザ上ではこのように表示されます。
最終的な_form.html.erbのコードはこのようになります。赤い枠線で囲まれた部分が追記部分です。
今回はcheck_box_tagを使ったチェックボックスの表示方法について解説しました。
チェックボックスは必ずラベルをつけるようにしよう。何のチェックか分かる上に、ラベルの部分をクリックして選択することもできるためとても使いやすいものになるからね。
この”check_box_tag”というのがヘルパーなんですね。
ヘルパーには他にも例えばラジオボタンを生成する”radio_button_tag”、テキスト入力エリアを生成する”text_area_tag”など様々なものがあるんだ。
こんなに簡単に作れるなら活用したいですね。ありがとうございます！
[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
