複数条件の［IF文］を綺麗に書きたい【Javascript】

Question

実現したいこと

複雑になりすぎたIF文 を簡潔にしたい。

やりたいこと

データベースに保存したデータを取得し、HTML に挿入する。

具体的には、Twitter など他サービスへのリンクをマイページに挿入したい。
データベースにはTwitter ID のみが保存されている。

const twitterCode = '<p class="twitter"><a href="https://twitter.com/' + twitterID + '"><span><i class=" fab fa-twitter"></i></span></a></p>'

上記のようなソースをHTML に挿入する。

対象となるのは3つのサービス。

ただユーザー側で登録するので、３つのうち２つ、１つだけの登録も当然ある。

作成したソース

const linkAdd = document.querySelector('.user_link')
const twitterCode = '<p class="twitter"><a href="https://twitter.com/' + twitter + '"><span><i class=" fab fa-twitter"></i></span></a></p>'
const instagramCode = '<p class="instagram"><a href="https://www.instagram.com/' + instagram + '"><span><i class="fab fa-instagram"></i></span></a></p>'
const customCode = '<p class="custom"><a href="' + custom + '"><span><i class="fas fa-at"></i></span></a></p>'

if(twitter == '') {
 linkAdd.innerHTML = instagramCode + customCode;
} else if (instagram == '') {
 linkAdd.innerHTML = twitterCode + customCode;
} else if (custom == '') {
 linkAdd.innerHTML = twitterCode + instagramCode;
// ２つ空の時のソースを省略
} else {
 linkAdd.innerHTML = twitterCode + instagramCode + customCode;
}

質問内容

上記のソースをみていただくとわかりますが、IF文 の条件が多く、複雑に見えるソースになってしまいました。
こちらのソースを簡潔にできる考え方がなどはありますでしょうか。

ご回答いただきますと幸いでございます。

追記

すみません。
質問するにあたりソースを改変したので、わかりにくくなりました。
追記させていただきます。

実際のソース

const linkAdd = document.querySelector('.user_link')
const twitterCode = '<p class="twitter"><a href="https://twitter.com/' + doc.data().twitter + '"><span><i class=" fab fa-twitter"></i></span></a></p>'
const instagramCode = '<p class="instagram"><a href="https://www.instagram.com/' + doc.data().instagram + '"><span><i class="fab fa-instagram"></i></span></a></p>'
const customCode = '<p class="custom"><a href="' + doc.data().custom + '"><span><i class="fas fa-at"></i></span></a></p>'

if(doc.data().twitter == '') {
linkAdd.innerHTML = instagramCode + customCode;
} else if (doc.data().instagram == '') {
linkAdd.innerHTML = twitterCode + customCode;
} else if (doc.data().custom == '') {
linkAdd.innerHTML = twitterCode + instagramCode;
} else {
linkAdd.innerHTML = twitterCode + instagramCode + customCode;
}

条件式で使われている変数はどこでどのように定義されるのでしょう。

ソースの改変でわかりにくくし申し訳ございません。
firebase のコレクションを参照しています。

データベースにはTwitter ID のみが保存されている。

という点もありますし、
データベースの値をどのように取得するかとか、テーブル定義とか。

firebase のコレクションをそれぞれ、doc.data().twitter, doc.data().instagram,　doc.data().custom, で参照しております。
また参照できていることは確認できています。

データベースはシンプルに下記になります。

userId
├ twitter: ''
├ instagram: ''
└ custom: ''

twitter が '' の時は、instagram　や custom が '' でも instagramCode + customCode が出力されてしまいますが、それで大丈夫でしょうか？ まず、条件を日本語できっちり書いてみては。

良くないです。
質問が下手で申し訳ございません。
おっしゃる通り、ユーザーが投稿したもの、つまり値があるものだけをHTMLに挿入したいです。
ただその記述をすべて条件式で書くと相当まどろっこしいので、簡潔に簡潔に書ける方法を知りたく質問させていただきました。

Comments

[m.ts10806]

条件式で使われている変数はどこでどのように定義されるのでしょう。

[m.ts10806]

>データベースにはTwitter ID のみが保存されている。
という点もありますし、
データベースの値をどのように取得するかとか、テーブル定義とか。

[hoshi-takanori]

twitter が '' の時は、instagram　や custom が '' でも instagramCode + customCode が出力されてしまいますが、それで大丈夫でしょうか？ まず、条件を日本語できっちり書いてみては。

[progblog]

ありがとうございます。
質問の方に追記しました。
もしお手すきであればご確認いただけますと幸いでございます。

Answer 1

単純にこんなかんじじゃだめかな?

//前略
let str = '';
if (twitter != '') str = str + twitterCode;
if (instagram != '') str = str + instagramCode;
if (custom != '') str = str + customCode;
linkAdd.innerHTML = str;

Comments

[sazi]

元はelse ifなので順番に一致した条件のみが実行されますけど、それだと全て評価されるので違う結果になってしまいませんか？

[hoshi-takanori]

横から失礼します。「違う結果」と言ってますが、そもそも本来期待している結果はどうなってるのでしょうか？ 「その記述をすべて条件式で書くと相当まどろっこしい」なんて言ってないで、一度ちゃんと何らかの形で (つまり、コードではなく、日本語とか表とかの形で) 書いてみることをお勧めします。

たぶん、期待する結果は
・twitter != '' かつ instagram != '' かつ custom != '' の場合、twitterCode + instagramCode + customCode
・twitter != '' かつ instagram != '' かつ custom == '' の場合、twitterCode + instagramCode
・twitter != '' かつ instagram == '' かつ custom != '' の場合、twitterCode + customCode
・twitter != '' かつ instagram == '' かつ custom == '' の場合、twitterCode
・twitter == '' かつ instagram != '' かつ custom != '' の場合、instagramCode + customCode
・twitter == '' かつ instagram != '' かつ custom == '' の場合、instagramCode
・twitter == '' かつ instagram == '' かつ custom != '' の場合、customCode
・twitter == '' かつ instagram == '' かつ custom == '' の場合、'' (何も表示しない)
だと思いますが、この回答のコードを実行すると同じ結果になるはずです。

[progblog]

皆さま

ありがとうございます。
こちらのコードで期待している結果になりました。

コードがどう動いているか確認し、不明点があればまた質問させていただきます。
ありがとうございました。

[sazi]

質問の内容が変更されましたね。
@hoshi-takanoriさん
誰に対してお薦めされているのか分かりませんが、違う結果というのはあくまで変更前の質問内容についてです。
質問は「綺麗に書きたい」という事でしたので、元とは違う結果になるのはどうなのと思った次第。

[hoshi-takanori]

@sazi さま、質問者さんと勘違いしていました。失礼しました。

[progblog]

皆さま

すみません！
お手数お掛けしました。

[progblog]

すみません。
コードにつきまして１点 質問させてください。

// Twitterの値が空じゃない時、str に Twitterリンクのコードを代入
if (doc.data().twitter != '') str = str + twitterCode;

// instagramの値が空じゃない時、str に instagramリンクのコードを代入
if (doc.data().instagram != '') str = str + instagramCode;

// customの値が空じゃない時、str に customリンクのコードを代入
if (doc.data().custom != '') str = str + customCode;

上からどんどん判定し、str にどんどんコードが追記されていくことが確認できました。

基本的に代入されるものだと思っていたのですが、これは例外なのでしょうか？

[hoshi-takanori]

str = twitterCode; だと上書きになりますが、str = str + twitterCode; なので元の str の後ろに twitterCode をくっつけたものになります。

[progblog]

ご連絡ありがとうございます。
なるほど、そこが肝なのですね。
勉強不足でお手数をおかけしました。

何度もありがとうございました。