複数条件の［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]

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