某スクールにおいて、チーム開発で、フリーマーケットアプリを作成中であり、使用した技術について公開しています。
※初学者のため、ミスや認識違いが多々あると思いますがご了承ください。
商品詳細ページにコメント機能を実装しました。
全部で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
前提条件
- 商品の各データーに紐づく商品詳細ページが完成している。
- 商品を管理するItemモデル、ユーザーを管理するUserモデルが存在している。
実装要件
- サーバーサイド
- 閲覧者が商品に対する自由にコメントできる。
- 商品出品者は全てのコメントを**「仮削除」**することができる。
- 出品者は仮削除したコメントを**「復元」「完全削除」**することができる。
- マークアップ
- コメント投稿、仮削除、復元、完全削除は非同期通信により即時反映される。
- ログイン中のユーザー自身の投稿と、その他のユーザーの投稿に差異をつける。
- 出品者のコメントとには、名前の下に**「出品者」**の表示を設ける。
- 出品者の画面には、コメント**「削除ボタン」**がついている。
- 出品者が削除した場合、コメントの内容には、**「出品者によりコメントが削除されました」**と表示される。
- 出品者の画面には、削除したコメントには、**「復元ボタン」と「完全削除ボタン」**が現れる。
動作イメージ
####非出品者の投稿
出品者による 仮削除 → 復元 → 完全削除
##モデルについて
コメントは、一つの商品に対し、複数作成されるため**「Itemモデル」とは別に「Commentモデル」**として管理することとしました。
コメントは、商品とユーザーにそれぞれ結びついています。
そこで、アソシエーションを組む事にします。
-
Itemモデルと、Commentモデルのアソシエーションについて
Item（商品）は、複数のコメントを持っています。逆にComment（コメント）は１つのItemにのみ、紐づいています。 よって、Commentが、Itemに所属する多対１の関係となります。 -
Userモデルと、Commentモデルのアソシエーションについて
User（ユーザー）は、複数のCommentを持っています。逆にCommentは１つのUserにのみ、紐づいています。 よって、Commentが、Userに所属する多対１の関係となります。
上記を踏まえてアソシエーションは以下の通りとしました。
class Comment < ApplicationRecord
belongs_to :user
belongs_to :item
end
class Item < ApplicationRecord
has_many :comments, dependent: :destroy
belongs_to :seller, class_name: "User" , optional: true,foreign_key: "seller_id"
belongs_to :buyer, class_name: "User", optional: true,foreign_key: "buyer_id"
belongs_to :auction, class_name: "User", optional: true,foreign_key: "auction_id"
end
# dependent: :destroy
# ↑この記載により、商品が削除された場合、紐づくコメントも連動して削除されるようになります。
また、本記事の趣旨とははずれるのですが、Itemは、延べ3人のUserと結びついています。
Itemには、出品者、購入者、取引中ユーザーと結びついています。そこで、上記のようなアソシエーションを組んでいます。
これで例えば、商品の出品者を取得したい場合は、
@item.seller
上記のような記載で取得することが可能となります。
class User < ApplicationRecord
has_many :comments, dependent: :destroy
end
商品とユーザーの関係については下記の投稿を参照ください。
※鋭意作成中
##マイグレーションについて
class CreateComments < ActiveRecord::Migration[5.0]
def change
create_table :comments do |t|
t.references :item, null: false, foreign_key: true
t.references :user, null: false, foreign_key: true
t.integer :delete_check,default: 0
t.string :comment
t.timestamps
end
end
end
コメントの内容は**「commentカラム」**に保存します。あとは、itemと、userに対する外部キーをもうけました。
「delete_check」というカラムは、後ほど説明いたします。 default: 0 と言う記載で、初期値として0を与えています。
以上が、モデルとマイグレーションについての説明となります。
###次回（第２回）は、ルーティング編となります。
https://qiita.com/sho_U/items/5c829b3060be2cce919a