【フリマアプリ】商品詳細ページのコメント機能（第４.2回）〜ヴュー編(インプットフォーム）〜

　某スクールにおいて、チーム開発で、フリーマーケットアプリを作成中であり、使用した技術について公開しています。
※初学者のため、ミスや認識違いが多々あると思いますがご了承ください。

# 商品詳細ページにコメント機能を実装しました。
全部で7回に分けて記事を投稿しています。

    |内容             |                  url   |
|:-----------------|------------------:|:-----------------------------:|
| 第１回             |       モデル、マイグレーション編 |    https://qiita.com/sho_U/items/03108801146e65d58413   |
| 第２回         |           ルーティング編 |     https://qiita.com/sho_U/items/5c829b3060be2cce919a |
| 第３回|コントローラー編|https://qiita.com/sho_U/items/8528f336cf0d470cd719|
|第４.1回|ヴュー編(一覧表示）|https://qiita.com/sho_U/items/6190562270c722956547|
|第４.2回|ヴュー編(インプットフォーム）|https://qiita.com/sho_U/items/67c2ede4fc6c605283e2|
|第５回|jquery編|https://qiita.com/sho_U/items/d72b60114f76380d05f6|
|第6回|ajax編|https://qiita.com/sho_U/items/caed9b1471e63d43dd3a|

〜コード全文〜https://qiita.com/sho_U/items/310ac5b653bdfcb99a2c

#ヴューについて
コメント機能におけるビューとは、商品に紐づく**「コメントの一覧を表示させる画面」**と、**「コメントを入力させる画面」**なります。

前回記事において、一覧表示は完成いたしましたので、次は**インプットフォーム（コメントを入力させる画面）**の実装となります。 

フォームを作成するにあたって、**form_with**を用いました。

form_withのメリットは、新規投稿の際(newアクション)は、createアクションに、編集（editアクション）の時は、updateアクションに、自動で判断し、遷移するという点があります。ですので、同じビューを流用することができます。まあ、今回はeditアクションはなく、updateを特殊な使い方にしているので、そこはあまり関係はないのですが、、、。では説明します。

###実際のビュー

<img width="688" alt="8fb964e3f82c2a148848274609529129.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/adcebc13-5913-686d-3e03-ab5eb2c94fff.png">

###コード
```ruby:items/show.html.haml
= form_with model:@comment ,class:"new_comment", local: true do |f|
  = f.text_area :comment,id: "comment_body",wrap: "soft"
  = f.hidden_field :item_id, value: @item.id
    %button.commentBtn{name: "button", type: "submit"}
      コメントする
#　フォームに関すること以外は一部省略しています。
```

この時実際に生成されるhtmlは以下の通りとなります。

```html
<form class="new_comment" action="/comments" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="✓">
  <input type="hidden" name="authenticity_token" value="fi3Iv5gdb4M0PX5RU7JzIir2+XkYzvWBGRTLSyzFNpjZiqY+kXP8KBCKPtpjO1rr0Lz468kx+R++A/r+WQFPGA==">
  <textarea id="comment_body" wrap="soft" name="comment[comment]"></textarea>
  <input value="<@itemのid>" type="hidden" name="comment[item_id]" id="comment_item_id">

  <button class="commentBtn" name="button" type="submit">
    コメントする
  </button>
</form>
```

解説します。

```ruby
= form_with model:@comment ,class:"new_comment", local: true do |f|
```

今、**@commnetには**、コントローラーから、newメソッドでCommentモデルから生成された空のインスタンスが生成されています。**(@comment = Comment.new)**第３回参照

model:@comment　でモデルを指定することにより、そのインスタンス（@comment)が空であるか、値が格納された物であるかを判断し、空の場合は**新規投稿フォーム**と判断し、を**createアクション**へ、値が格納されている場合は**編集フォーム**と判断し**updateアクション**へ遷移します。
 実際に生成されたformタグを確認すると、

```html
<form class="new_comment" action="/comments" accept-charset="UTF-8" method="post">
```
となっており、  

```
action="/comments"      method="post"
```
から、遷移先にcreateアクションが指定されているのがわかります。

また、ポイントとしてコメント自体を送るtextareaの他に、

```ruby
= f.hidden_field :item_id, value: @item.id
```
というinputがあり、生成されるhtmlは

```html
 <input value="<@itemのid>" type="hidden" name="comment[item_id]" id="comment_item_id">
```
となります。
type="hidden"のinput フォームは、画面上には入力される値が表示されていませんが、裏側でコントローラーに送信されます。
今回の場合、value、つまり値は**「@itemのid」**が、作成されるcommentの「item_idカラム」に送られます。
これによって、フォームには、コメントの内容しか入力する欄がありませんが、裏側でそのコメントに紐づく商品のidが送られるわけです。

実際に id = １である商品にコメントに対し、以下のようにコメントを送信してみます。
<img width="718" alt="2f111f29d797b84a2a8e85be992c3cbd.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/eea7f0e7-8e75-cfee-9ea5-64feb4c812aa.png">
データーベースを確認してみますと
<img width="813" alt="7cd62ec49bee0f143325fe8dd396a818.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/b175fd1c-21ba-9b82-e9d7-60b8764a52f1.png">
しっかりと、**item_id**に **"1"**が格納されていることがわかります。

ここで、改めて第１回の〜ルーティング編〜に話を戻しますと、pathに組み込んだitemのidをparamsとして送る代わりに、別の方法で送ると説明しました。今回の**「隠しデーターとして、itemのidを送ること」**こそが、その方法というわけです。

以上でコメント機能は一通り完成しました。が、現状は、コメント作成や、削除したさいにリロードされページが更新されます。これをjqueryを用いて部分的に瞬時に変更するように実装したいと思います。

###そこで次回はjqueryを用いた実装を説明していきます。
https://qiita.com/sho_U/items/d72b60114f76380d05f6