【48日目】【技術日記】コメント機能の作成　アソシエーションとかパーシャルとか

ここ数日は新しくお願いしたメンターさんとの面談や、
そのメンタリングの中で出された課題などを行なっていたので技術に触れていなかったため更新中断しておりました。
今日からまた技術の学習を進めていきます。

なお今日はトピックというよりは、学習ログの掲載という感じになります。
主にアソシエーションの設定であったり、掲示板のコメントフォームのパーシャルの作成部分になります。
コメントフォームはviewを持たないので、親であるboardと紐づいた形で、@commentを作るところなんかが自分では思いつけない部分だと思いました。
まだ完璧に理解できていないと思います。

# 65　Commentモデルの作成とアソシエーション

## Commentモデルの作成
Commentモデルのマイグレーションファイルを作成

```
docker-compose exec web bundle exec rails g model comment board:references name:strings comment:text 
# rails g model モデル名 親テーブル名:references カラム名:型
# referencesによって「親テーブル名_id」という外部キーカラムが作成され、アソシエーションされる
```

出来上がったマイグレーションファイルは下記

```#Ruby:comments.rb
class CreateComments < ActiveRecord::Migration[5.0]
    def change
        create_table :comments do |t|
            t.references :board, foreign_key: true　# 引数によって親テーブルにないidが保存できなくなる
            t.string :name, null: false #引数によってnullの場合エラーとなる
            t.text :comment, null: false

            t.timestamps
        end
    end
end
```

マイグレートを実行し、DBにマイグレーション内容を反映

```
docker-compose exec web bundle exec rake db:migrate
```

## アソシエーションの設定
#### 親テーブル
ApplicationRecordのクラス継承の下に

```ruby:board.rb
has_many :comments
#１対他のためhas_many:子テーブル名（複数形）
```

#### 子テーブル

```ruby:comments.rb
belongs_to :board
```

# 66　コメント書き込み機能のルーティング追加 ＆コントローラ作成
## コメントコントローラの作成
コメント機能には作成と削除のみを付与する。
また、コメントページは用意せず、掲示板のshowの下部に表示する。

```
docker-compose exec web rails g controller comments create destroy --skip-template-engine
# viewの作成をskipする
```

## ルーティングの修正
rails g によって自動的にルーティングされるが、リソースベースルーティングに合わせて修正する。

```ruby:routes.rb
Rails.application.routes.draw do
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
    resources :boards
    resources :comments, only: %i[create destroy]
end
```

## コメントオブジェクトの作成
form_forヘルパーでコメントのフォームを作成するために、board_controllerのshowメソッドで@commentオブジェクトを作成する。
ただし、何かしらの方法で掲示板とコメントを紐付ける必要がある。

```ruby:boards_controller.rb
def show
@comment = @board.comments.new
binding.pry
end
```

boardオブジェクトのcommentにnew メソッドを呼び出すことで掲示板に紐ついた@commentが作成できる。
binding.pryで@board.commentsの中を見ておく。
ちなみにこのオブジェクトのクラスはComment::ActiveRecord_Associations_CollectionProxy


# 67　コメントフォームの作成
## show の修正
パーシャルを用いて作成

```ruby:show.html.erb
<%= render 'boards/detail', detail: @detail %>
<%= render partial: 'comment_form', locals: { comment: @comment} %>
# commentというローカル変数で＠commentのオブジェクトを渡すようにしている
```

## パーシャルの作成

```Ruby:_comments_form.html.erb
<div class="p-comment__formBox">
<p class="p-comment__formTitle">コメント記入</p>
    <%= form_for comment do |f| %>
        <%= f.hidden_field :board_id %>
          # フォームの内容と一緒に外部キーを渡すために必要になる
          # フォーム自体は存在しない
        <div class="form-group">
            <%= f.label :name, '名前' %>
            <%= f.text_field :name, class: 'form-control' %>
        </div>
        <div class="form-group">
            <%= f.label :comment, 'コメント' %>
            <%= f.text_area :comment, class: 'form-control', rows: 4 %>
        </div>
        <%= f.submit '送信', class: 'btn btn-primary' %>
    <% end %>
</div>
```

## CSSの作成

```comments.scss
.p-comment__formBox {
    margin: 30px auto;
    border: 5px solid #e8e8e8;
    padding: 25px;
    border-radius: 14px;
}

.p-comment__formTitle {
    border-bottom: 2px solid #dfdfdf;
    padding-bottom: 5px;
}
```

これだけでは読み込まれないので、application.scssでインポートするよう追記

```applocateion.scss
@import "comments"
```


# 68 コメント保存処理の実装
## rails-flogの導入
binding.pryのログを見やすくしてくれるらしい。
明日から使っていくことになる。

```
gem 'rails-flog', require 'flog'
```