teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

追記依頼への回答

2021/02/23 12:35

投稿

progblog
progblog

スコア22

title CHANGED
File without changes
body CHANGED
@@ -44,4 +44,56 @@
44
44
  上記のソースをみていただくとわかりますが、`IF文` の条件が多く、複雑に見えるソースになってしまいました。
45
45
  こちらのソースを簡潔にできる考え方がなどはありますでしょうか。
46
46
 
47
- ご回答いただきますと幸いでございます。
47
+ ご回答いただきますと幸いでございます。
48
+
49
+ # 追記
50
+
51
+ すみません。
52
+ 質問するにあたりソースを改変したので、わかりにくくなりました。
53
+ 追記させていただきます。
54
+
55
+ ## 実際のソース
56
+
57
+ ```
58
+ const linkAdd = document.querySelector('.user_link')
59
+ const twitterCode = '<p class="twitter"><a href="https://twitter.com/' + doc.data().twitter + '"><span><i class=" fab fa-twitter"></i></span></a></p>'
60
+ const instagramCode = '<p class="instagram"><a href="https://www.instagram.com/' + doc.data().instagram + '"><span><i class="fab fa-instagram"></i></span></a></p>'
61
+ const customCode = '<p class="custom"><a href="' + doc.data().custom + '"><span><i class="fas fa-at"></i></span></a></p>'
62
+
63
+ if(doc.data().twitter == '') {
64
+ linkAdd.innerHTML = instagramCode + customCode;
65
+ } else if (doc.data().instagram == '') {
66
+ linkAdd.innerHTML = twitterCode + customCode;
67
+ } else if (doc.data().custom == '') {
68
+ linkAdd.innerHTML = twitterCode + instagramCode;
69
+ } else {
70
+ linkAdd.innerHTML = twitterCode + instagramCode + customCode;
71
+ }
72
+ ```
73
+
74
+ > 条件式で使われている変数はどこでどのように定義されるのでしょう。
75
+
76
+ ソースの改変でわかりにくくし申し訳ございません。
77
+ `firebase` のコレクションを参照しています。
78
+
79
+ > データベースにはTwitter ID のみが保存されている。
80
+ という点もありますし、
81
+ データベースの値をどのように取得するかとか、テーブル定義とか。
82
+
83
+ `firebase` のコレクションをそれぞれ、`doc.data().twitter`, `doc.data().instagram`, `doc.data().custom`, で参照しております。
84
+ また参照できていることは確認できています。
85
+
86
+ データベースはシンプルに下記になります。
87
+ ```
88
+ userId
89
+ ├ twitter: ''
90
+ ├ instagram: ''
91
+ └ custom: ''
92
+ ```
93
+
94
+ > twitter が '' の時は、instagram や custom が '' でも instagramCode + customCode が出力されてしまいますが、それで大丈夫でしょうか? まず、条件を日本語できっちり書いてみては。
95
+
96
+ 良くないです。
97
+ 質問が下手で申し訳ございません。
98
+ おっしゃる通り、ユーザーが投稿したもの、つまり値があるものだけを`HTML`に挿入したいです。
99
+ ただその記述をすべて条件式で書くと相当まどろっこしいので、簡潔に簡潔に書ける方法を知りたく質問させていただきました。