【Rails】acts-as-taggable-onを用いたタグ機能と、tag-itを用いたタグ入力補完機能の実装

# 目標

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/480eabec-7c97-a6c1-e6b6-7b226e67d90d.gif)


# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

下記実装済み。

・[Slim導入](https://qiita.com/matsubishi5/items/b639ffddecc626856039)
・[Bootstrap3導入](https://qiita.com/matsubishi5/items/b117c95f4dd71340cc80)
・[ログイン機能実装](https://qiita.com/matsubishi5/items/5bd8fdd45af955cf137d)
・[投稿機能実装](https://qiita.com/matsubishi5/items/1a5aeab651b5822d1f2c)

# タグ機能の実装

### 1.Gemを導入

```ruby:Gemfile
gem 'acts-as-taggable-on'
```

```ruby:Gemfile
$ bundle
```

### 2.テーブルを追加

```terminal:ターミナル
$ rails acts_as_taggable_on_engine:install:migrations
```

```terminal:ターミナル
$ rails db:migrate
```

```ruby:schema.rb
create_table "taggings", force: :cascade do |t|
  t.integer "tag_id"
  t.string "taggable_type"
  t.integer "taggable_id"
  t.string "tagger_type"
  t.integer "tagger_id"
  t.string "context", limit: 128
  t.datetime "created_at"
  t.index ["context"], name: "index_taggings_on_context"
  t.index ["tag_id", "taggable_id", "taggable_type", "context", "tagger_id", "tagger_type"], name: "taggings_idx", unique: true
  t.index ["tag_id"], name: "index_taggings_on_tag_id"
  t.index ["taggable_id", "taggable_type", "context"], name: "taggings_taggable_context_idx"
  t.index ["taggable_id", "taggable_type", "tagger_id", "context"], name: "taggings_idy"
  t.index ["taggable_id"], name: "index_taggings_on_taggable_id"
  t.index ["taggable_type"], name: "index_taggings_on_taggable_type"
  t.index ["tagger_id", "tagger_type"], name: "index_taggings_on_tagger_id_and_tagger_type"
  t.index ["tagger_id"], name: "index_taggings_on_tagger_id"
end

create_table "tags", force: :cascade do |t|
  t.string "name"
  t.datetime "created_at"
  t.datetime "updated_at"
  t.integer "taggings_count", default: 0
  t.index ["name"], name: "index_tags_on_name", unique: true
end
```

### 3.モデルを編集

```ruby:book.rb
# 追記
acts_as_taggable
```

### 4.コントローラーを編集

ストロングパラメーターに`tag_list`を追加する。

```ruby:books_controller.rb
def book_params
  params.require(:book).permit(:title, :body, :tag_list)
end
```

### 4.ビューを編集

```slim:books/new.html.slim
/ 追記
= f.label :tag_list, 'タグ'
br
= f.text_field :tag_list, value: @book.tag_list.join(','), id: 'tags'
br
```

`tag_list.join(',')`
➡︎ カンマ(,)区切りにする事で複数のタグを追加する事が出来る。

```slim:books/index.html.slim
/ 追記
td
  - book.tag_list.each do |tag|
    span.label.label-default style='margin-right: 10px;'
      = tag
```

# 入力補完機能の実装

### 1.必要ファイルをダウンロードし、移動

**①下記リンクにアクセス**
[tag-it GitHub](https://github.com/aehlke/tag-it)

**②`Clone or download`をクリック**
![スクリーンショット 2020-06-15 20.41.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/9b1fbec6-0122-79f8-af89-7b7b05a88be3.png)

**③`Download ZIP`をクリック**
![スクリーンショット 2020-06-15 20.42.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/ffd5c31a-68af-ee00-b43d-abbe444ed867.png)

**④ファイルを移動**

1.ダウンロードしたファイルを解凍する。

2.`css`フォルダ内の`jquery.tagit.css`と`tagit.ui-zendesk.css`を`assets/stylesheets`配下へ配置する。

3.`js`フォルダ内の`tag-it.js`を`assets/javascripts`配下へ配置する。
![スクリーンショット 2020-06-15 20.48.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/3fc2151f-a2c7-fd5e-c7dc-89d628540f38.png)

### 2.Gemを導入

```ruby:Gemfile
gem 'jquery-ui-rails'
```

```terminal:ターミナル
$ bundle
```

### 3.`application.js`を編集

```js:application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require jquery-ui // 追記
//= require bootstrap-sprockets
//= require tag-it
//= require_tree .
```

### 4.`application.scss`を編集

```scss:application.scss
/*
 *= require_tree .
 *= require jquery.tagit // 追記
 *= require tagit.ui-zendesk // 追記
 *= require_self
*/
```