Railsでチェックボックスを実装する方法のひとつにcheckboxメソッドがあります。本記事では、checkboxメソッドの使い方をご紹介します。checkboxメソッドと同じようにチェックボックスを表示できるRailsの別メソッドとの違いもご紹介します。
checkboxとは
チェックボックスは、GUI(グラフィカルユーザーインターフェイス)の1つで、利用者が選択しやすく作られたツールのひとつです。チェックボックスの機能としては、複数の項目から複数の選択も可能とします。
Railsではcheckboxメソッドを使って、チェックボックスを実装することができます。Railsでは、checkboxメソッドを使う方法のほか、check_box_tagを使う方法もあります。
類似の機能「ラジオボタン」
チェックボックスと同じように、複数の選択肢を提示し、GUIを使って利用者に選択させるツールに「ラジオボタン」があります。
基本概念としては、チェックボックスは複数選択可であり、ラジオボタンは択一選択です。Railsではラジオボタンの実装はradio_buttonを使って実装することができます。checboxの使い方を確認する際に、あわせてradio_buttonも確認しておくことをおすすめします。
Railsのcheckboxの書き方を基本から応用まで解説
Railsのcheckboxを使ってチェックボックスを実装してみましょう。動作確認に必要な、モデルやコントローラを、以下のコードを実行して作りましょう。モデルには、checkbox以外の項目も作っておきます。
【サンプルコード】
rails g scaffold Sample name:string checkbox:boolean ingredients:text
rake db:migrateRailsのcheckboxの書き方
モデルやコントローラーを作る際に自動生成されるapp/views/sample/_form.html.erbを開き、自動生成された内容をすべて削除します。_form.html.erbには、チェックボックスなどのユーザーインターフェースを記述します。
今回のチェックボックスの動作確認に関するコード記述は、この自動生成コードを削除したapp/views/sample/_form.html.erに記述していきます。
checkboxにて単一のチェックボックスを作成する方法
単一のチェックボックスを表示するため以下のサンプルコードを「app/views/sample/_form.html.er」に記述します。
app/config/route.rbでルーティングを確認し、「rails s」でRailsサーバを起動した後、確認したルーティングに従って、テストURL（参考：http://localhost:3000/samples/new）に接続しましょう。
| サンプルコード |
|---|
<%= form_with(model: sample, local: true) do |form| %> |
チェックボックスに初期値を設定する方法
チェックボックスはその値がtrueかfalseかによって、チェックのON/OFFを切り替えます。初期値を設定することで、ON状態で表示するかOFF状態で表示するかの切り替えが行えます。
チェックボックスの記述部分を以下のコード記述に変えると、チェックボックスがON状態で表示されるようになります。
| 記述するコード |
|---|
<%= form.check_box :checkbox, id: :sample_checkbox,:as => :boolean,checked:true%> |
利用規約のチェックボックスを作成する方法
Webサイトでよく見かける「利用規約に同意する」といったチェックボックスの実装について考えてみます。チェックボックスのラベルの部分とcheckbox記述の部分を以下のコードに変えて確認してみましょう。
| コード記述 |
|---|
<%= form.label :利用規約とプライバシーポリシーに同意する %%> |
複数のチェックボックスを作成する方法
ここまでの説明では、単一のチェックボックスのみの実装でしたが、チェックボックスは複数の選択肢を提示するのが一般的です。複数のチェックボックスを実装してみましょう。
| コード記述 |
|---|
<% %w(①の選択肢 ②の選択肢 ③の選択肢).each.with_index do |ingredient,i| %%> |
samples_controller.rbの変更
複数のチェックボックスを保存するため、app/controllers/samples_controller.rbの内容を変更します。「:ingredients」を「ingredients:[]」に変更します。
【コード変更】
def sample_params
params.require(:sample).permit(:name, :checkbox,ingredients:[])
endcheck_box_tagを使ったチェックボックスの作成
Railsでは、check_box_tagを使ってチェックボックスを作成することもできます。check_box_tagによるチェックボックスの実装を確認するため、サンプルとして以下のコントローラーとビューをご自分の実装環境に作成しましょう。
【実行コード】
Rails g controller Check bbb
Check：コントローラー
bbb：ビューcheck_box_tagを使ったチェックボックスの記述
コントローラーとビューを作成した際に生成されるapp/views/check/bbb.html.erbファイルには、ユーザインターフェースを記述します。チェックボックスの実装を試すために、このファイルの内容を変えておきましょう。
app/views/check/bbb.html.erbを開き、一旦、自動生成されたファイルの内容をすべて削除します。
サンプルコードの記述
app/views/check/bbb.html.erbに、単一のチェックボックスを表示するコードを記述して、確認してみましょう。check_box_tagを使います。
【サンプルコード】
<h1>チェックボックス確認テスト</h1>
<%= check_box_tag :test1 %>
<%= label_tag :test1, "単一チェックボックス" %>実行確認
bbb.html.erbのルーティングを確認するためにapp/config/route.rbを開いて、自動生成されている記述を確認します。「get 'check/bbb'」と記載されているはずです。これがテストで使うURLになります。
【テストURL】http://localhost:3000/check/bbb/
「localhost:3000」の部分は、各自の開発環境に応じて読み替えてください。
check_box_tagの使い方
チェックボックスを表示する場合は、「check_box_tag」を使いますが、このメソッドはチェックボックスそのものを表示するコードです。
チェックボックスには、選択内容を表示する文言がセットで使われます。チェックボックスを使う多くの場合、そのチェックボックスの内容を示す文言と一緒に使うので、check_box_tagメソッドとlabel_tagメソッドはセットで覚えておきましょう。
checkboxとcheck_box_tagの違い
Railsでチェックボックスを実装する場合、checkboxを使うのとcheck_box_tagを使うのとでは挙動が異なります。check_box_tagはform_tagとセットで使われ、checkboxはform_forとセットで使われます。
Railsのform_forは、特定のモデルと結びつけを行うため、checkboxはモデルと紐づくことになります。
checkboxの使い方を考えよう！
Railsでは、画面上にチェックボックスを表示する方法はcheckboxによるものとcheck_box_tagがあるため、用途に応じて使い分ける必要があります。
サンプルコードなどを使って、それぞれのメソッドによりチェックボックスがどう動くかを確認し、用途に応じて適切なメソッドを選択できるように備えておきましょう。
