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

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

このような表示になっていれば事前準備は完了です。

 

 

check_box_tagの書き方

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

<%= check_box_tag :sample %>

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

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

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

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

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

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

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

 

 

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