【Rails入門】checkboxの使い方まとめ

こんにちは! フリーエンジニアの長瀬です。

みなさんcheckboxを使っていますか。

checkboxを使えば、設定した項目に該当するかユーザーに選択させることができて便利です。

この記事では、checkboxの使い方について

・checkboxとは

・チェックボックスを作成する方法

という基本的な内容から、

・チェックボックスに初期値を設定する方法

・利用規約のチェックボックスを作成する方法

・複数のチェックボックスを作成する方法

といった応用的な内容についても解説していきます。

この記事の目次

1 checkboxの基本
2 checkboxの実用的な使い方
3 まとめ

checkboxの基本

checkboxとは

チェックボックスはGUI(グラフィカルユーザーインターフェイス)の1つで、ユーザーにいくつかの項目の中から、任意に選択させるときに使います。

単一のものだけではなく、複数の項目について該当するか調べられるので、多くの情報を得られます。

ですが、それぞれの選択肢をチェックするかは任意であって、必ずしも選択しなければならないものではありませんので使用には注意してください。

一方、選択系のGUIにはチェックボックスの他にラジオボックスもあります。

ラジオボックスはいくつかの選択肢の中から、1つだけ選択するときに使います。

なので、必ず1つ選択させたいときにはラジオボックスを使い、選択するかしないはユーザーの意思によるという場面ではチェックボックスを使うようにしてください。

check_box_tagにて単一のチェックボックスを作成

check_box_tagメソッドを使って単一のチェックボックスを作成してみましょう。

まず、今回使うコントローラー(Check)、ビュー(example)を用意するために以下のコードをコマンドプロンプトに入力してください。

コントローラーとビューを作成

rails g controller Check example

1	rails g controller Check example

[実行結果]

create  app/controllers/samurai_controller.rb
create  app/controllers/check_controller.rb
    route  get 'check/example'
   invoke  erb
   create    app/views/check
   create    app/views/check/example.html.erb
   invoke  test_unit
   create    test/controllers/check_controller_test.rb
   invoke  helper
   create    app/helpers/check_helper.rb
   invoke    test_unit
   invoke  assets
   invoke    coffee
   create      app/assets/javascripts/check.coffee
   invoke    scss
   create      app/assets/stylesheets/check.scss

create app/controllers/samurai_controller.rb

create app/controllers/check_controller.rb

route get 'check/example'

invoke erb

create app/views/check

create app/views/check/example.html.erb

invoke test_unit

create test/controllers/check_controller_test.rb

invoke helper

create app/helpers/check_helper.rb

invoke test_unit

invoke assets

invoke coffee

create app/assets/javascripts/check.coffee

invoke scss

create app/assets/stylesheets/check.scss

これでコントローラーとビューを作成できました。

それでは、今回作成したapp/views/check/example.html.erbを開いて、既存のコードをすべて削除した後、以下のコードを入力してください。

[app/views/check/example.html.erbの入力する内容]

<h1>単一のチェックボックス例</h1>
<%= check_box_tag :test1 %>
<%= label_tag :test1, "朝は苦手だ" %>

<h1>単一のチェックボックス例</h1>

<%= check_box_tag :test1 %>

<%= label_tag :test1, "朝は苦手だ" %>

続いて、結果を確認するためにコマンドプロンプトにrails sと入力して、サーバーを起動してください。

そして、example.html.erbのルーティングを確認するためにapp/config/route.rbを開いてルーティングを確認してください。

[app/config/route.rbの内容]

  get 'check/example'

1	get 'check/example'

となっていることが確認できます。

以下のURLにアクセスして、example.html.erbを開いてください。

http://localhost:3000/check/example

(補足) http://ocalhost:3000 の箇所は各自の開発環境により読み替えてください。

このように単一のチェックボックスが表示されるのを確認できます。

check_box_tagはlabel_tagと組み合わせて使うことが多いので、label_tagもセットで覚えてください。

checkboxにて単一のチェックボックスを作成する方法

続いてはcheckboxメソッドを使って、単一のチェックボックスを作成してみましょう。

まずは、必要なモデルやコントローラを作成するためにscaffoldを使います。
scaffoldがわからない人は以下の記事を参考にしてください。

【Rails入門】scaffoldの使い方まとめ

https://www.sejuku.net/blog/26515

こんにちは! フリーエンジニアの長瀬です。みなさん、scaffoldを使っていますか。 scaffoldを使えば、基本的な機能を備えたアプリケーションをコマンド一つで作成できます。この記事では、scaffoldの使い方について・scaffoldの基本的な使い方という基本的な内容...

それでは以下のコードをコマンドプロンプトに入力してください。

[scaffoldを使ってcheckboxを使うための準備をする]

rails g scaffold Samurai name:string checkbox:boolean ingredients:text
rake db:migrate

1 2	rails g scaffold Samurai name:string checkbox:boolean ingredients:text rake db:migrate

[実行結果]

      create    db/migrate/20170711113856_create_samurais.rb
      create    app/models/samurai.rb
      invoke    test_unit
      create      test/models/samurai_test.rb
      create      test/fixtures/samurais.yml
      invoke  resource_route
       route    resources :samurais
      invoke  scaffold_controller
      create    app/controllers/samurais_controller.rb
      invoke    erb
      create      app/views/samurais
      create      app/views/samurais/index.html.erb
      create      app/views/samurais/edit.html.erb
      create      app/views/samurais/show.html.erb
      create      app/views/samurais/new.html.erb
      create      app/views/samurais/_form.html.erb
      invoke    test_unit
      create      test/controllers/samurais_controller_test.rb
      invoke    helper
      create      app/helpers/samurais_helper.rb
      invoke      test_unit
      invoke    jbuilder
      create      app/views/samurais/index.json.jbuilder
      create      app/views/samurais/show.json.jbuilder
      create      app/views/samurais/_samurai.json.jbuilder
      invoke  test_unit
      create    test/system/samurais_test.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/samurais.coffee
      invoke    scss
      create      app/assets/stylesheets/samurais.scss
      invoke  scss
   identical    app/assets/stylesheets/scaffolds.scss

create db/migrate/20170711113856_create_samurais.rb

create app/models/samurai.rb

invoke test_unit

create test/models/samurai_test.rb

create test/fixtures/samurais.yml

invoke resource_route

route resources :samurais

invoke scaffold_controller

create app/controllers/samurais_controller.rb

invoke erb

create app/views/samurais

create app/views/samurais/index.html.erb

create app/views/samurais/edit.html.erb

create app/views/samurais/show.html.erb

create app/views/samurais/new.html.erb

create app/views/samurais/_form.html.erb

invoke test_unit

create test/controllers/samurais_controller_test.rb

invoke helper

create app/helpers/samurais_helper.rb

invoke test_unit

invoke jbuilder

create app/views/samurais/index.json.jbuilder

create app/views/samurais/show.json.jbuilder

create app/views/samurais/_samurai.json.jbuilder

invoke test_unit

create test/system/samurais_test.rb

invoke assets

invoke coffee

create app/assets/javascripts/samurais.coffee

invoke scss

create app/assets/stylesheets/samurais.scss

invoke scss

identical app/assets/stylesheets/scaffolds.scss

これで、準備が整いました。

今回モデルのカラムとして、checkboxだけは少し寂しいのでnameも作成してあります。
また、ingredients(材料)は後半に使用しますので、今は気にしないでください。

それでは、実際にcheckboxメソッドを使っていくので、今回作成されたapp/views/samurais/_form.html.erbを開いて、内容をすべて削除した後に以下のコードを入力してください。

[app/views/samurais/_form.html.erbに入力する内容]

<%= form_with(model: samurai, local: true) do |form| %>
  <% if samurai.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(samurai.errors.count, "error") %> prohibited this samurai from being saved:</h2>

      <ul>
      <% samurai.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :名前 %>
    <%= form.text_field :name, id: :samurai_name %>
  </div>

  <div class="field">
    <%= form.label :朝が苦手である %>
    <%= form.check_box :checkbox, id: :samurai_checkbox,:as => :boolean%>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

<%= form_with(model: samurai, local: true) do |form| %>

<% if samurai.errors.any? %>

<h2><%= pluralize(samurai.errors.count, "error") %> prohibited this samurai from being saved:</h2>

<ul>

<% samurai.errors.full_messages.each do |message| %>

<% end %>

</ul>

</div>

<% end %>

<%= form.label :名前 %>

<%= form.text_field :name, id: :samurai_name %>

</div>

<%= form.label :朝が苦手である %>

<%= form.check_box :checkbox, id: :samurai_checkbox,:as => :boolean%>

</div>

<%= form.submit %>

</div>

<% end %>

朝が苦手であるの下のform.check_boxの部分でcheck_boxメソッドを使用しています。

check.boxでは0か1かの真偽値を返すので、ここでは:as=>booleanを設定してtrue/falseの論理値に変更してあります。

続いて、結果を確認するためにコマンドプロンプトにrails sと入力して、サーバーを起動してください。

そして、_form.html.erbのルーティングを確認するためにapp/config/route.rbを開いてルーティングを確認してください。

[app/config/route.rbの内容]

resources :samurais

1	resources :samurais

となっていることが確認できます。

なので、以下のURLにアクセスして、new.html.erbを開いてください。

http://localhost:3000/samurais/new

このように、check_boxメソッドを使って単一のチェックボックスを作成できました。

名前入力して、登録を押してみると実際にユーザー登録を確認できます。

check_box_tagとcheckboxの違い

今回使用したcheck_box_tagメソッドとcheckboxメソッドでは少し挙動が違います。

check_box_tagの〇〇_tag系のヘルパーはform_tagメソッドと組み合わせて使われます。

一方、語尾に_tagのついていないcheckbox方のヘルパーはform_forメソッドと組み合わせ使われます。

Railsにはform_tagとform_forがありますが、両者の主な違いは特定のモデルと関連付いているかどうかです。

form_forの使い方については、こちらの記事を参考にしてください。

【永久保存版】Railsのform_for使い方まとめ(select, url, checkbox, number etc….)

https://www.sejuku.net/blog/13163

どうも！インストラクターのババです！Railsで開発をしているとユーザーが入力するフォームを作ることが多くなると思います。そのフォームを作る際に一番よく使用するメソッドが「form_for」です。でもいざ使うとなると form_forの使い方がわからない！ form_forに...

また、Rails5.1からはform_tagとform_forはform_withメソッドに統合されました。form_withの引数で特定のモデルと結びつけるかどうかを設定できるため、form_tagとform_forの2つの挙動を使い分けられるようになりました。

checkboxの実用的な使い方

チェックボックスに初期値を設定する方法

それでは、今回使用したexample.html.erbのチェックボックスに初期値を設定してみましょう。

app/views/check/example.html.erbを開いて、既存のコードをすべて削除した後、以下のコードを入力してください。

[app/views/check/example.html.erbの入力する内容]

<h1>単一のチェックボックス例</h1>
<%= check_box_tag :test1,1,{:checked => "checked"}  %>
<%= label_tag :test1, "朝は苦手だ" %>

<h1>単一のチェックボックス例</h1>

<%= check_box_tag :test1,1,{:checked => "checked"} %>

<%= label_tag :test1, "朝は苦手だ" %>

続いて、結果を確認するためにコマンドプロンプトにrails sと入力して、サーバーを起動してください。

そして、以下のURLにアクセスしてください。

http://localhost:3000/check/example

このように、チェックボックスに初期値を設定できました。

check_box_tagではname、value、初期値、オプションの順番に引数を取るのでvalueに1、続いて{:checked => "checked"} で初期値にチェックを入れています。

続いて、check_boxメソッドでは

app/views/samurais/_form.html.erb内の

<%= form.check_box :checkbox, id: :samurai_checkbox,:as => :boolean%>

1	<%= form.check_box :checkbox, id: :samurai_checkbox,:as => :boolean%>

の部分を

<%= form.check_box :checkbox, id: :samurai_checkbox,:as => :boolean,checked:true%>

1	<%= form.check_box :checkbox, id: :samurai_checkbox,:as => :boolean,checked:true%>

に変更すると、初期値が設定されます。

結果を確認するために以下のURLにアクセスしてください。

http://localhost:3000/samurais/new

checked:trueの引数で初期値を実装しています。

このようにcheck_boxメソッドにも同様に初期値を設定できました。

利用規約のチェックボックスを作成する方法

ここで、よくある利用規約に同意するかしないかをこれまで勉強したチェックボックスを使って実装してみましょう。

app/views/samurais/_form.html.erb内の

    <%= form.label :朝が苦手である %>
    <%= form.check_box :checkbox_example, id: :samurai_checkbox_example,:as => :boolean,checked:true %>

1 2	<%= form.label :朝が苦手である %> <%= form.check_box :checkbox_example, id: :samurai_checkbox_example,:as => :boolean,checked:true %>

の部分を

    <%= form.label :利用規約とプライバシーポリシーに同意する %>
    <%= form.check_box :checkbox_example, :as => :boolean, checked:false %>

1 2	<%= form.label :利用規約とプライバシーポリシーに同意する %> <%= form.check_box :checkbox_example, :as => :boolean, checked:false %>

に変更して

結果を確認するために以下のURLにアクセスしてください。

http://localhost:3000/samurais/new

ラベルの名前を変えただけですが、よくある利用規約のチェックポックスを作成できました。

また、同意しない場合は登録できないようにvalidationを設定しましょう。
validationについてはこの記事では説明しませんので、こちらの記事を参考にしてください。

【Rails入門】validationsの使い方まとめ

https://www.sejuku.net/blog/25973

こんにちは！フリーランスの桃太郎です。Railsにはユーザがサイトから入力した値がルールに沿った正しいものか検証するためのクラスとしてValidationsがあります。この記事では、・Validationsとは・Validationsの基本的な実装方法という基本的な内容から、・Validat...

複数のチェックボックスを作成する方法

これまでは単一のチェックボックスばかりを扱ってきましたが、複数のチェックボックスも作成してみましょう。

app/views/samurais/_form.html.erb内の

   <%= form.label :利用規約とプライバシーポリシーに同意する %>
    <%= form.check_box :checkbox_example, :as => :boolean, checked:false %>

1 2	<%= form.label :利用規約とプライバシーポリシーに同意する %> <%= form.check_box :checkbox_example, :as => :boolean, checked:false %>

の部分を

     <div class="field">
    <%= form.label :朝が苦手である %>
    <%= form.check_box :checkbox, id: :samurai_checkbox,:as => :boolean %>
  </div>

  <div class="field">
    <% %w(人参 玉ねぎ ピーマン にんにく ターメリック じゃがいも).each.with_index do |ingredient,i| %>
    <label>
      <%= check_box_tag 'samurai[ingredients][]', ingredient,false,id:"samurai_ingredients_#{i}"%>
      <%= ingredient %>
    </label>
    <% end %>
  </div>

<%= form.label :朝が苦手である %>

<%= form.check_box :checkbox, id: :samurai_checkbox,:as => :boolean %>

</div>

<% %w(人参玉ねぎピーマンにんにくターメリックじゃがいも).each.with_index do |ingredient,i| %>

<label>

<%= check_box_tag 'samurai[ingredients][]', ingredient,false,id:"samurai_ingredients_#{i}"%>

<%= ingredient %>

</label>

<% end %>

</div>

に変更して

結果を確認するために以下のURLにアクセスしてください。

http://localhost:3000/samurais/new

このように複数の選択肢を作れました。

次に、実際に保存するためにapp/controllers/samurais_controller.rbの

  def samurai_params
      params.require(:samurai).permit(:name, :checkbox,:ingredients)
    end

def samurai_params

params.require(:samurai).permit(:name, :checkbox,:ingredients)

end

の部分を

    def samurai_params
      params.require(:samurai).permit(:name, :checkbox,ingredients:[])
    end

def samurai_params

params.require(:samurai).permit(:name, :checkbox,ingredients:[])

end

に変更してください。

ingredients:[]に変更することで配列の値をセットできます。

配列の値を保存する準備が整ったので、実際にデータを登録してみてください。

配列の値が保存されていることを確認できます。

次に関連付けされているモデルがある場合にcollection_check_boxesメソッドを使って複数の選択肢を作る方法を紹介します。

関連付けられたモデルの意味がよくわからないという方は以下の記事を参考にしてください。

【Rails入門】has_many、belongs_toの使い方まとめ

https://www.sejuku.net/blog/26617

こんにちは! フリーエンジニアの長瀬です。has_manyやbelongs_toってなんだか難しいと思ってませんか？関連付けをすれば、データを効率良く管理できるようになります。この記事では、has_many、belongs_toの使い方について・has_manyとはという基本的な内容から、・t...

説明で使用する環境をscaffoldを使って、構築していきますので、以下のコードをコマンドプロンプトに入力してください。

[scaffoldを使って必要なモデルを作成する]

  rails g scaffold building name:string
  rails g scaffold owner name:string
  rails g scaffold owner_building owner:references building:references
rake db:migrate

rails g scaffold building name:string

rails g scaffold owner name:string

rails g scaffold owner_building owner:references building:references

rake db:migrate

今回はOwerモデルとBuildingモデルを作って、建物の所有者を複数選択できるよう実装していきます。
そのためowner_buidlingという中間テーブルを用意しています。

作成できたら、次は関連付けを行なっていきます。

app/models/owner.rbに以下のコードを入力してください。

[app/models/owner.rbに入力する内容]

class Owner < ActiveRecord::Base
  has_many :owner_buildings
  has_many :buildings, :through => :owner_buildings
end

class Owner < ActiveRecord::Base

has_many :owner_buildings

has_many :buildings, :through => :owner_buildings

end

また、app/models/buidling.rbには以下のコードを入力してください。

[app/models/buidling.rbに入力する内容]

class Building < ActiveRecord::Base
  has_many :owner_buildings
  has_many :owners, :through => :owner_buildings
end

class Building < ActiveRecord::Base

has_many :owner_buildings

has_many :owners, :through => :owner_buildings

end

これで、テーブル同士に多対多の関係を設定できました。

続いて、app/view/buildings/new.html.erbに複数のチッェクボックスを実装するために、collection_check_boxesメソッドを使っていきます。

app/view/buildings/_form.html.erbの内容をすべて削除し以下のコードを入力してください。

[app/view/buildings/_form.html.erbに入力する内容]

<%= form_with(model: building, local: true) do |form| %>
<% if building.errors.any? %>
<div id="error_explanation">
  <h2><%= pluralize(building.errors.count, "error") %> prohibited this building from being saved:</h2>

  <ul>
    <% building.errors.full_messages.each do |message| %>
    <li><%= message %></li>
    <% end %>
  </ul>
</div>
<% end %>

<div class="field">
  <%= form.label :name %>

  <%= form.text_field :name %>
</div>
<div class="field">
  <%= form.label :owners %><br />
  <%= collection_check_boxes(:building, :owner_ids, Owner.all, :id, :name) do |b| %>
  <%= b.label { b.check_box + b.text } %>
  <% end %>
</div>

<div class="actions">
  <%= form.submit %>
</div>
<% end %>

<%= form_with(model: building, local: true) do |form| %>

<% if building.errors.any? %>

<h2><%= pluralize(building.errors.count, "error") %> prohibited this building from being saved:</h2>

<ul>

<% building.errors.full_messages.each do |message| %>

<% end %>

</ul>

</div>

<% end %>

<%= form.label :name %>

<%= form.text_field :name %>

</div>

<%= form.label :owners %><br />

<%= collection_check_boxes(:building, :owner_ids, Owner.all, :id, :name) do |b| %>

<%= b.label { b.check_box + b.text } %>

<% end %>

</div>

<%= form.submit %>

</div>

<% end %>

これで、複数のチェックボックスを表示できます。

次に実際に選択できる所有者を作成していきましょう。

rails s でサーバーを開いた後、以下のURLにアクセスしてください。
http://localhost:3000/owners

New Ownerから、何人か所有者を作成してください。

サンプルでは4人作成してみました。

これで、選択肢が用意できたので、以下のURLにアクセスしてください。
http://localhost:3000/buildings/new

このように、所有者を選択する複数の選択肢が用意されているのを確認できます。

また、実際に値をデータベースに保存していくためには、buindingコントローラーに配列として保存する設定をする必要があります。

buildings_controller.rbを開いて、以下のコードに差し替えてください。

    def building_params
params.require(:building).permit(:name, owner_ids:[])
    end

def building_params

params.require(:building).permit(:name, owner_ids:[])

end

これで、複数選択した値を保存できるようになりました。

まとめ

いかがでしたでしょうか？

この記事では、checkboxの使い方を解説しました。

checkboxを使えば、単一の項目、複数の項目をユーザーに選択させる実装が簡単にできて便利です。

今回説明した利用規約への同意や、またメールマガジンの購読の有無など実際にチェックボックスは多く使用されています。

この記事で勉強した知識を使って、ぜひ自分でチェックボックスを実装してみてください。

もしcheckboxの使い方について忘れてしまったらこの記事を確認してくださいね！

33歳、未経験だった僕がフリーエンジニアになれた理由

現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。

元ディスクユニオン店員が33歳からプログラミングを学びエンジニアになるまで

https://www.sejuku.net/blog/10687?cid=cta2_10687

こんにちは！ハナキノボル（@novl_h）です。今回、侍エンジニア塾の卒業生で、現在フリーでWEBエンジニアをやられている濱口直行さんにインタビューさせていただきました。プロフィール濱口直行（はまぐちなおゆき）さん1981年生まれ、現在35歳。和歌山県出身。 ...

未経験者でも安心の徹底サポート！まずは完全無料の体験レッスン！

「プログラミングに興味があるけど未経験だし、、、」とお悩みの方はご安心ください。

24時間質問し放題
あなただけのオーダーメイドカリキュラムで学習の効率化
仕事獲得方法からオリジナルアプリ開発方法

侍エンジニア塾では徹底したサポートによる「オーダーメイドカリキュラム」を作成しています。

まずは無料体験レッスンで、「挫折しない学習方法」や「あなただけの学習ロードマップ」を知り、学習の効率化をしましょう。独学の難点である「オリジナルアプリの作り方やエラーの対処法」についてもアドバイスさせていただきます。

詳しいサービス内容は、下記よりご参照ください。

学習者インタビュー

23歳、早稲田中退生が3ヶ月でフリーランスエンジニアになるまで

元ベンチャー役員が起業のためにプログラミングを学んだ本当の理由

売上2,000万のサービスを作った僕がプログラミング学習をした理由

IT音痴のヨガインストラクターが爆速でサイト作成できた秘訣

Rubyを学んだ島根女子流の仕事術「PCとWifiさえあれば仕事はできる」

文系こそなるべき！経験ゼロから3ヶ月でエンジニアに転身した経済学部出身の話

プログラミング学習者必見

専属講師に質問し放題、レッスンし放題！最短１ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
Python学習カリキュラム無料公開中
1記事最大11,000円！テックライター募集

【Rails入門】checkboxの使い方まとめ

checkboxの基本

checkboxとは

check_box_tagにて単一のチェックボックスを作成

checkboxにて単一のチェックボックスを作成する方法

check_box_tagとcheckboxの違い

checkboxの実用的な使い方

チェックボックスに初期値を設定する方法

利用規約のチェックボックスを作成する方法

複数のチェックボックスを作成する方法

まとめ

33歳、未経験だった僕がフリーエンジニアになれた理由

未経験者でも安心の徹底サポート！まずは完全無料の体験レッスン！

学習者インタビュー

人気記事セレクション

プログラミング学習者必見

書いた人

長瀬来

checkboxの基本

checkboxとは

check_box_tagにて単一のチェックボックスを作成

checkboxにて単一のチェックボックスを作成する方法

check_box_tagとcheckboxの違い

checkboxの実用的な使い方

チェックボックスに初期値を設定する方法

利用規約のチェックボックスを作成する方法

複数のチェックボックスを作成する方法

まとめ

33歳、未経験だった僕がフリーエンジニアになれた理由

未経験者でも安心の徹底サポート！まずは完全無料の体験レッスン！

学習者インタビュー

人気記事セレクション

プログラミング学習者必見

この記事のあとによく読まれています！

書いた人

長瀬来