LoginSignup
1
1

More than 3 years have passed since last update.

【52日目】掲示板にタグを設定しよう①!(seedについて、チェックボックスの作成、タグの保存・表示)

Last updated at Posted at 2019-10-11

掲示板へのtag付け機能の追加

seedを使ってTagを追加しておく

seedとは

seedとは初期データのことで、システムの運用前に初期データとなるマスターデータ(あらかじめ用意するベースとなるデータ)を投入したり、開発段階で動作確認のために初期データを投入したりします。
他にもユーザー登録機能のある場合に、アドミン権限をユーザーにrollカラムをつける形で付与している場合などには、データベースをリセットする場合に備えて初期データとしてユーザー情報を投入する場合があるようです。

seedファイルはdb/seeds.rbにcreateメソッドやrubyスクリプトによって記述します。
データベースに投入するにはrails db:seedをすれば良いです。

seedファイルを使ったTagの初期データ作成

createメソッドでは、配列 []の中にハッシュ{key: 値}形式で複数のデータを同時に作成することができる。

seeds.rb
Tag.create([
  { name: 'Ruby' },
  { name: 'Ruby on Rails4' },
  { name: 'Ruby on Rails5' },
  { name: 'Python2' },
  { name: 'Python3' },
  { name: 'Django2' },
])

seedsファイルが編集できたらデータを投入する。

docker-compose exec web rails db:seed

フォームにチェックボックスを作成

_form.html.erb
<div class="form-group">
  <span>タグ</span>
  <%= f.collection_check_boxes(:tag_ids, Tag.all, :id, :name) do |tag| %>
    <div class="form-check">
      <%= tag.label class: 'form-check-label' do %>
        <%= tag.check_box class: 'form-check-input' %>
        <%= tag.text %>
      <% end %>
    </div>
  <% end %>
</div>

まず、多対多アソシエーションの設定によって、boardオブジェクトにはtag_idsプロパティが、tagオブジェクトにはboard_idsプロパティが追加されている。
ここでは、boardに登録されているtagの数分のチェックボックスを作成することになるため、フォームヘルパーのcollection.check.boxesメソッドを用いる。

collection_check_boxesメソッドの構造確認

collection_check_boxes(第一引数, :第二引数, 第三引数, :第四引数, :第五引数 ) 

第一引数 データを保存するテーブル(フォームヘルパー内の場合省略可能)
第二引数 データを保存するカラム
第三引数 第二引数のカラムに渡してあげるデータのリスト
     ここで渡したデータの数分のチェックボックスが作成される。
第四引数 チェックボックスのvalueに設定されるプロパティ
第五引数 チェックボックスのラベル名に設定されるプロパティ(text)
=>この第二引数で渡したデータリストの数分、ブロック内が繰り返し実行される。
  ブロック内にはチェックボックスを生成するHTMLが記述されていて、データの数分のチェックボックスが生成される。

<%= tag.label class: 'form-check-label' do %> # タグラベルでチェックボックスとラベル名を覆う
        <%= tag.check_box class: 'form-check-input' %> # チェックボックス自体
        <%= tag.text %> # 第五引数に指定したラベルが表示される

boards_controllerを修正して、チェックボックスを保存できるようにする

ストロングパラメータに対して、チェックボックスのパラメータ(第四引数)に指定したtag_idsを許可すれば保存できるようになる。
ただし、tag_idsは配列の形で複数渡ってくるので、[]をつけて配列であることを明示する必要がある。

boards_controller.rb
def board_params
  params.require(:board).permit(:name, :title, :body, tag_ids: [])
end

掲示板詳細画面で関連づけられたタグを表示する

_detail.html.erb
<% @board.tags.each do |tag| %>
  <span class="badge badge-primary"><%= tag.name %></span>
<% end %>

アソシエーションにおいては、「親モデル.」で、アソシエーション先の子モデルにアクセスできます。
つまり1行目はアソシエーションに設定したboard.tagsをループして、タグの数だけタグ名を表示するようにしている。
2行目では、ブートストラップのバッジのデザインを使用して、掲示板のタイトルの下に表示するようにしている。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1