【Rails】Railsでタグ付け機能を実装した時のメモ。

#はじめに
掲示板やブログ等のアプリの投稿フォームで、タグのチェックボックスを選択し、表示する機能を作成します。
今回はgemのacts-as-taggable-onは使用せずに実装してみたいと思います。

#バージョン

• ruby 2.6.3
• rails 6.0.1
• mysql 8.0.18

#前提

• Rails環境構築済みであること

#モデルの作成
まず、今回作成するするモデルは以下の３つになります。

Articles	Article_tag_relations	Tags
id	id	id
title	article_id	name
body	tag_id

• Articles
  • 掲示板の記事に関するテーブル
• Tags
  • タグに関するテーブル
• Article_tag_relations
  • 掲示板とタグを紐づけるための中間テーブル

では、さっそくモデルを作成していきます。

#Articleモデルのマイグレーションファイル生成
$rails g model Article title:string body:string

#Tagモデルにマイグレーションファイル生成
$rails g model Tag name:string

#Article_tag_relationモデルのマイグレーションファイル生成
$rails g model Article_tag_relation article:references tag:references

今回はTagsテーブルのnameカラムにはnullを許容しないので、マイグレーションファイルを修正します。

xxxxxxxxxxxx_create_tags.rb

class CreateTags < ActiveRecord::Migration[6.0]
  def change
    create_table :tags do |t|
      t.string :name, null: false

      t.timestamps
    end
  end
end

それでは、DBに反映させます。

$rails db:migrate

#モデルのアソシエーションの設定

article_tag_relation.rb

class ArticleTagRelation < ApplicationRecord
  belongs_to :article
  belongs_to :tag
end

article.rb

class Article < ApplicationRecord
  #Articlesテーブルから中間テーブルに対する関連付け
  has_many :article_tag_relations, dependent: :destroy
　#Articlesテーブルから中間テーブルを介してTagsテーブルへの関連付け
  has_many :tags, through: :article_tag_relations, dependent: :destroy
end

tag.rb

class Tag < ApplicationRecord
　#Tagsテーブルから中間テーブルに対する関連付け
  has_many :article_tag_relations, dependent: :destroy
　#Tagsテーブルから中間テーブルを介してArticleテーブルへの関連付け
  has_many :articles, through: :article_tag_relations, dependent: :destroy
end

#タグのチェックボックスの作成

new.html.erb

<%= form_for @article do |f| %>
    <div class='form-group'>
        <%= 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>

    <%= f.submit '保存', class: 'btn btn-primary' %>
<% end %>

入力フォームにタグの選択チェックボックスを表示するのに、collection_check_boxes を使用します。
第一引数のtag_idsはタグIDのリストを渡し、複数のタグを掲示板に紐づけることができます。
第二引数には、タグオブジェクトのリスト。
第三引数にチェックボックスのvalue、第四引数にタグオブジェクトのnameプロパティをラベル名に指定。

• この状態では、まだTagsの中身は空なので、試しにテストデータを投入してみます。

seeds.rb

Tag.create([
  { name: 'タグ1' },
  { name: 'タグ2' },
  { name: 'タグ3' },
  { name: 'タグ4' },
  { name: 'タグ5' }
])

$rails db:seed

先ほど投入したタグデータのチェックボックスが表示されていますね。

#コントローラーの作成

articles_controller.rb

 class ArticlesController < ApplicationController

  def new
    @article = Article.new
  end

  def create
    article = Article.new(article_params)
    if article.save
      redirect_to article
    else
       redirect_to :back
    end
  end

  def show
    @article = Article.find(params[:id])
  end


  def destroy
    @article.destroy
    redirect_to articles_path
  end

  private

  def article_params
    params.require(:article).permit(:title, :body, tag_ids: [])
  end
end

今回はあくまでタグを表示するだけなので、かなり簡易的に実装します。

  def article_params
    params.require(:article).permit(:title, :body, tag_ids: [])
  end

ここで先ほどタグのチェックボックスで設定したtag_idsを許可します。
複数のtag_idが渡ってくるので配列の形式で記述しています。

#タグを表示する。
最後に、チェックしたタグをshow.html.erbで表示してみたいと思います。

show.html.erb

<% @article.tags.each do |tag| %>
    <span class= 'badge badge-primary'><%= tag.name %></span>
<% end %>

このように複数のタグをチェックした場合でも、表示できれば完成です。

#最後に
今回はタグをチェックボックスで選択し、記事に表示するまでの機能を実装してみました。
ユーザーが自由にタグを追加できたり、タグで絞り込みなどを行えるようにするなど個人アプリを作る場合には、更に幅を広げてみると面白いかもしれません。

以上。

#参考

• フルスタックエンジニアが教える 即戦力Railsエンジニア養成講座