質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

受付中

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

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0回答

0評価

0クリップ

262閲覧

投稿2022/05/21 14:56

編集2022/05/22 10:53

前提・教えてほしいこと

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

該当するソースコード

comment_channel.js

import consumer from "./consumer" if(location.pathname.match(/\/posts\/\d/)){ consumer.subscriptions.create({ channel: "CommentChannel", post_id: location.pathname.match(/\d+/)[0] }, { connected() { // Called when the subscription is ready for use on the server }, disconnected() { // Called when the subscription has been terminated by the server }, received(data) { const html = ` <div class="comment"> <li class="comment_list"> <div class="follow-header"> <div class="user-image"> if (date.comment.user.image?){ <a class="comment_user" href="/users/user.id"><img src="data.comment.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.comment.user.nickname} </div> <div class="user-introduce"> ${data.comment.content} </div> </div> </div> </li> </div>` const comments = document.getElementById("comments") comments.insertAdjacentHTML('beforeend', html) const commentForm = document.getElementById("comment-form") commentForm.reset(); } }) }

show.html.erb

<div class="post__show__title"> コメント </div> <div class="post__comments"> <div id="comments"> <div class="h4"><コメント一覧></div> <ul class="comments_lists"> <% @post.comments.each do |comment| %> <div class="comment"> <li class="comment_list"> <div class="follow-header"> <div class="user-image"> <% if comment.user.image? %> <%= image_tag comment.user.image.url %> <% else %> <%= image_tag("/images/no-image.png") %> <% end %> </div> <div class="follow-right"> <div class="user-nickname"> <%= comment.user.nickname %> </div> <div class="user-introduce"> <%= comment.content %> </div> </div> </div> </li> </div> <% end %> </ul> </div> </div> <div class="comment-form"> <% if user_signed_in? %> <%= form_with model: [@post, @comment], id: "comment-form" do |f| %> <div class="field"> <%= f.text_field :content, id:"comment_content", class:"input-comment", placeholder:"コメントを入力してください"%> </div> <div class="actions"> <%= f.submit "送信する", class: :form__btn %> </div> <% end %> <% else %> <strong><p>※※※ コメントの投稿には新規登録/ログインが必要です ※※※</p></strong> <% end %> </div> </div>

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

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

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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

退会済みユーザー

退会済みユーザー

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>` ```

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。