Ruby on Railsでcheck_box_tagを使う方法【初心者向け】

Webサービスでユーザから入力を求める際にフォーム(form)を用いることが多々あります。今回はフォームの中でcheck_box_tag(チェックボックス)を使用する方法を解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,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

たくさんファイルが生成されました。

179580a3821b15aa66b5d18746545ac0

このファイルの中で今回編集するファイルはapp/views/users/_form.html.erbのみです。
_form.html.erbではユーザの新規作成、編集時に表示されるフォームがコーディングされています。

現在の状態をブラウザで確認してみましょう。

ブラウザで表示するために必要なデータベースに必要なテーブル作成とサーバの起動を下記コマンドで行います。

$ rake db:migrate # テーブルの作成
$ rails s                # サーバ起動

上記コマンドを実行後下記URLにアクセスしてください。
http://localhost:3000/users/new

このような表示になっていれば事前準備は完了です。
スクリーンショット 2016-03-10 10.33.55

 

田島悠介

ここでは「ユーザーの名前」を「短い文字列」で取り扱う一式を作成しているよ。

大石ゆかり

new.html.erbを開くと、renderでformが呼び出されているのが分かりますね。

田島悠介

そうだね。なのでそのformの部分にチェックボックスを追加してみよう。app/views/users/_form.html.erbに追記していくよ。

 

check_box_tagの書き方

今回はユーザ名の入力欄の下にチェックボックスを表示させようと思います。
下記コードを追記します。

<%= check_box_tag :sample %>

この記述だけでは、ただチェックボックスが表示されているだけでユーザにはなんのチェックボックスなのか判断することができません。

チェックボックスに対応するラベルを定義することで何のチェックボックスかわかるようにします。

<%= label_tag :sample, 'チェックボックス' %>

ラベルを作成する際、属性(上記例では:sample)をチェックボックスの属性と同じにしておくとラベルをクリックした場合にもチェックボックスのオン/オフの切り替えができユーザビリティ向上に繋がるので意識するようにしましょう。

ブラウザ上ではこのように表示されます。

2dc2297a82a771ca3dc1c67d5662bf06

最終的な_form.html.erbのコードはこのようになります。赤い枠線で囲まれた部分が追記部分です。

b5884f08d333425a8fd9af9984be8894

今回はcheck_box_tagを使ったチェックボックスの表示方法について解説しました。

 

田島悠介

チェックボックスは必ずラベルをつけるようにしよう。何のチェックか分かる上に、ラベルの部分をクリックして選択することもできるためとても使いやすいものになるからね。

大石ゆかり

この”check_box_tag”というのがヘルパーなんですね。

田島悠介

ヘルパーには他にも例えばラジオボタンを生成する”radio_button_tag”、テキスト入力エリアを生成する”text_area_tag”など様々なものがあるんだ。

大石ゆかり

こんなに簡単に作れるなら活用したいですね。ありがとうございます!

 

[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。