某スクールにおいて、チーム開発で、フリーマーケットアプリを作成中であり、使用した技術について公開しています。
※初学者のため、ミスや認識違いが多々あると思いますがご了承ください。
商品詳細ページにコメント機能を実装しました。
全部で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を特殊な使い方にしているので、そこはあまり関係はないのですが、、、。では説明します。
###実際のビュー
###コード
= 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は以下の通りとなります。
<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>
解説します。
= form_with model:@comment ,class:"new_comment", local: true do |f|
今、@commnetには、コントローラーから、newメソッドでCommentモデルから生成された空のインスタンスが生成されています。**(@comment = Comment.new)**第３回参照
model:@comment でモデルを指定することにより、そのインスタンス（@comment)が空であるか、値が格納された物であるかを判断し、空の場合は新規投稿フォームと判断し、をcreateアクションへ、値が格納されている場合は編集フォームと判断しupdateアクションへ遷移します。
実際に生成されたformタグを確認すると、
<form class="new_comment" action="/comments" accept-charset="UTF-8" method="post">
となっており、
action="/comments" method="post"
から、遷移先にcreateアクションが指定されているのがわかります。
また、ポイントとしてコメント自体を送るtextareaの他に、
= f.hidden_field :item_id, value: @item.id
というinputがあり、生成される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 = １である商品にコメントに対し、以下のようにコメントを送信してみます。
データーベースを確認してみますと
しっかりと、item_idに **"1"**が格納されていることがわかります。
ここで、改めて第１回の〜ルーティング編〜に話を戻しますと、pathに組み込んだitemのidをparamsとして送る代わりに、別の方法で送ると説明しました。今回の**「隠しデーターとして、itemのidを送ること」**こそが、その方法というわけです。
以上でコメント機能は一通り完成しました。が、現状は、コメント作成や、削除したさいにリロードされページが更新されます。これをjqueryを用いて部分的に瞬時に変更するように実装したいと思います。
###そこで次回はjqueryを用いた実装を説明していきます。
https://qiita.com/sho_U/items/d72b60114f76380d05f6