回答編集履歴

1 誤字修正

baron3

baron3 score 16

2018/11/14 16:43  投稿

今回のケースではコメントに対して返信があった場合、そのコメントを親とすることでyoutubeと同じようなコメント欄が実現できました。
コメントテーブルとリプライテーブルでDB構成が似通る為、パフォーマンス等の問題があるようでしたらコメントで教えて頂ければ幸いです。
木構造のDB構成については[こちら](https://www.slideshare.net/kamekoopa/ss-27728799)が参考になりました。yambejpさんヒントを与えてくださりありがとうございます。
### DB構成
** Posts table**
|column|type|key|comment|
|:--|:--:|--:|
|post_id|int|PRIMARY KEY|記事ID
|post_body|text||記事本文
|post_user|string|uuid|ユーザー
|created_at|timestamp||投稿日時
** Comments table**
|column|type|key|comment|
|:--|:--:|--:|
|comment_id|int|RIMARY KEY|コメントID
|comment_body|text||コメント本文
|comment_user|string|uuid|ユーザー
|parent_podt|int|FOREIGN KEY : posts(post_id)|親記事 
|parent_comment|int|nullable|親コメント  
|created_at|timestamp||投稿日時
** Replies table**
|column|type|key|comment|
|:--|:--:|--:|
|reply_id|int|RIMARY KEY|返信ID
|reply_body|text||返信本文
|reply_user|string|uuid|ユーザー
|reply_comment_parent|int|FOREIGN KEY : comments(comment_id)|親コメント 
|created_at|timestamp||投稿日時
```HTML
@foreach ($comments as $comment)
<div class="media d-block d-md-flex mt-3">
   <div id="commentIDcar1" class="media-body text-center text-md-left ml-md-3 ml-0" data-comment="1">
       <div id="comment-body">
           <h5 id="parent1" class="font-weight-bold mt-0">
               <a href="#" class="userName">{{$comment->comment_user}}#{{$comment->comment_id}}</a>
               <a href="#" class="float-right replay">
               <i class="fa fa-reply"></i>
               </a>
           </h5>
               {!! nl2br(e($comment->comment_body)) !!}
       </div>
       @if(!is_null($comment->replies))
           @foreach ($comment->replies as $replay)
           <div class="media d-block d-md-flex mt-3">
               <div id="commentIDcar1" class="media-body text-center text-md-left ml-md-3 ml-0" data-comment="1">
                       <div id="comment-body">
                           <h5 id="parent1" class="font-weight-bold mt-0">
                               <a href="#" class="userName">{{$replay->reply_user}}#{{$replay->reply_id}}</a>
                               <a href="#" class="float-right replay">
                               <i class="fa fa-reply"></i>
                               </a>
                           </h5>
                               {!! nl2br(e($replay->reply_body)) !!}
                       </div>
                       
               </div>
           </div>
           @endforeach
       @endif
   </div>
</div>
@endforeach
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る