非同期通信のコメント機能でjavascript内のhtmlの記述方法を知りたい。

前提・教えてほしいこと

Ruby on Railsでオリジナルアプリを作成しています。
コメント機能を非同期通信で実装するためjavascriptを記述しているのですが、送信ボタンを押してもjavascript内でhtmlを正しく記述できていないため、画面に表示されない状態です。
送信ボタンを押した際にjavascriptのhtml部分がビューに表示されるよう改善点を教えていただきたいです。

該当するソースコード

comment_channel.js
1import consumer from "./consumer"
2
3if(location.pathname.match(/\/posts\/\d/)){
4
5  consumer.subscriptions.create({
6    channel: "CommentChannel",
7    post_id: location.pathname.match(/\d+/)[0]
8  }, {
9
10    connected() {
11      // Called when the subscription is ready for use on the server
12    },
13
14    disconnected() {
15      // Called when the subscription has been terminated by the server
16    },
17
18    received(data) {
19      const html = `
20      <div class="comment">
21        <li class="comment_list">
22          <div class="follow-header">
23            <div class="user-image">
24              if (date.comment.user.image?){
25                <a class="comment_user" href="/users/user.id"><img src="data.comment.user.image.url"></a>
26              }else{
27                <a class="comment_user" href="/users/user.id"><img src="/images/no-image.png"></a>
28              }
29            </div>
30            <div class="follow-right">
31              <div class="user-nickname">
32                ${data.comment.user.nickname}
33              </div>
34              <div class="user-introduce">
35                ${data.comment.content}
36              </div>
37            </div>
38          </div>
39        </li>
40      </div>`
41      const comments = document.getElementById("comments")
42      comments.insertAdjacentHTML('beforeend', html)
43      const commentForm = document.getElementById("comment-form")
44      commentForm.reset();
45    }
46  })
47}

show.html.erb
1    <div class="post__show__title">
2      コメント
3    </div>
4    <div class="post__comments">
5      <div id="comments">
6        <div class="h4">＜コメント一覧＞</div>
7          <ul class="comments_lists">
8            <% @post.comments.each do |comment| %>
9              <div class="comment">
10                <li class="comment_list">
11                  <div class="follow-header">
12                    <div class="user-image">
13                      <% if comment.user.image? %>
14                        <%= image_tag comment.user.image.url %>
15                      <% else %>
16                        <%= image_tag("/images/no-image.png") %>
17                      <% end %>
18                    </div>
19                    <div class="follow-right">
20                      <div class="user-nickname">
21                        <%= comment.user.nickname %>
22                      </div>
23                      <div class="user-introduce">
24                        <%= comment.content %>
25                      </div>
26                    </div>
27                  </div>
28                </li>
29              </div>
30            <% end %>
31          </ul>
32        </div>
33      </div>
34      <div class="comment-form">
35        <% if user_signed_in? %>
36          <%= form_with model: [@post, @comment], id: "comment-form" do |f| %>
37            <div class="field">
38              <%= f.text_field :content, id:"comment_content", class:"input-comment", placeholder:"コメントを入力してください"%>
39            </div>
40            <div class="actions">
41              <%= f.submit "送信する", class: :form__btn  %>
42            </div>
43          <% end %>
44        <% else %>
45            <strong><p>※※※ コメントの投稿には新規登録/ログインが必要です ※※※</p></strong>
46        <% end %> 
47      </div>
48    </div>

分からない部分・間違えていると思われる部分

私が分からない。間違えていると思っている部分は<div class="user-image">内の記述です。

恐らくhtmlの記述を指定しているのでif文は使えないと考えられる。しかし、使わない場合どのように記述していいか分からない。
show.html.erb内の<%= image_tag comment.user.image.url %>で表示している画像はhtmlで表示するにはどのように記述すればいいか分からない。

私なりに調べたり、記述を改変してみたのですが、辿り着いたのが今の記述でここからどのように改変すればよいか分からず困っています。
ご教授いただけましたら幸いです。

退会済みユーザー

2022/05/22 01:53

javascriptの記述を下記に直したらとりあえず以下Gyazoのように表示されるようになりました。 https://gyazo.com/601539c234934f5dd732249471fd5fe4 しかし、やはりif文が使えないみたいで上手く反映されません。 ```comment_channel.js const html = ` <div class="comment"> <li class="comment_list"> <div class="follow-header"> <div class="user-image"> if comment.user.image?{ <a class="comment_user" href="/users/user.id">${data.user.image.url}</a> }else{ <a class="comment_user" href="/users/user.id"><img src="/images/no-image.png"></a> } </div> <div class="follow-right"> <div class="user-nickname"> ${data.user.nickname} </div> <div class="user-introduce"> ${data.content} </div> </div> </div> </li> </div>` ```