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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

304閲覧

JavaScript条件分岐を一文にまとめたい

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/04/12 14:58

編集2018/04/12 15:06

前提・実現したいこと

ここに質問の内容を詳しく書いてください```
チャットページのシステムを作っています。画像の自動更新機能を実装が目的です。
JavaScriptファイルで
15行目の${ message.image == null ? "" : '<img src="' + message.image + '">' }を
2行目のif (message.image !== null) {img = <img src="${message.image.url}">}
にまとめて条件分岐を書きたいのですが
どうまとめていいのかわかりません。
お力添えを貸していただきたいと思います。
なにぶん初めて投稿しますのでこういう質問でいいのか少々不安ですがよろしくお願いします。

該当のソースコード

$(function(){ function buildHTML(message){ var img = "" if (message.image !== null) {img = `<img src="${message.image.url}">`} var html = `<div class="message" data-message-id="${message.id}"> <div class="upper-message"> <div class="upper-message__user-name"> ${ message.name } </div> <div class="upper-message__date"> ${ message.created_at } </div> </div> <div class="lower-meesage"> <p class="lower-message__content"> ${ message.content } ${ message.image == null ? "" : '<img src="' + message.image + '">' } </p> </div> </div>` return html; } コード

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/04/12 15:01

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。
guest

回答1

0

ベストアンサー

こういうこと?

JavaScript

1function buildHTML(message) { 2 var img = "" 3 if (message.image !== null) { 4 img = `<img src="${message.image.url}">` 5 } 6 var html = `<div class="message" data-message-id="${message.id}"> 7 <div class="upper-message"> 8 <div class="upper-message__user-name"> 9 ${ message.name } 10 </div> 11 <div class="upper-message__date"> 12 ${ message.created_at } 13 </div> 14 </div> 15 <div class="lower-meesage"> 16 <p class="lower-message__content"> 17 ${ message.content } 18 ${ img } 19 </p> 20 </div> 21 </div>` 22 return html; 23} 24console.log( buildHTML( { 25 image: { 26 url: 'url' 27 }, 28 content: 'content', 29 id: 'id', 30 created_at: 'created_at', 31 name: 'name' 32} ) ); 33```**動くサンプル:**[https://jsfiddle.net/gowvmbye/](https://jsfiddle.net/gowvmbye/)

投稿2018/04/12 15:17

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/04/12 15:29

ありがとうございます!一文にはまとめられて、なるほどと思いました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問