質問編集履歴

3

追記

2020/07/05 02:54

投稿

maskmelon
maskmelon

スコア63

test CHANGED
File without changes
test CHANGED
@@ -34,7 +34,23 @@
34
34
 
35
35
  ```JavaScript
36
36
 
37
+ function fetchUserInfo(userId) {
38
+
39
+ fetch(`https://api.github.com/users/${encodeURIComponent(userId)}`)
40
+
41
+ .then(response => {
42
+
43
+ if (!response.ok) {
44
+
45
+ console.error("エラーレスポンス", response);
46
+
47
+ } else {
48
+
49
+ return response.json().then(userInfo => {
50
+
51
+ // HTMLの組み立て
52
+
37
- const view = escapeHTML`
53
+ const view = escapeHTML`
38
54
 
39
55
  <h4>${userInfo.name} (@${userInfo.login})</h4>
40
56
 
@@ -54,8 +70,70 @@
54
70
 
55
71
  `;
56
72
 
57
-
73
+ // HTMLの挿入
74
+
75
+ const result = document.getElementById("result");
76
+
77
+ result.innerHTML = view;
78
+
79
+ });
80
+
81
+ }
82
+
83
+ }).catch(error => {
84
+
85
+ console.error(error);
86
+
87
+ });
88
+
89
+ }
90
+
91
+
92
+
93
+ function escapeSpecialChars(str) {
94
+
95
+ return str
96
+
97
+ .replace(/&/g, "&amp;")
98
+
99
+ .replace(/</g, "&lt;")
100
+
101
+ .replace(/>/g, "&gt;")
102
+
103
+ .replace(/"/g, "&quot;")
104
+
105
+ .replace(/'/g, "&#039;");
106
+
107
+ }
108
+
109
+
110
+
111
+ function escapeHTML(strings, ...values) {
112
+
113
+ return strings.reduce((result, str, i) => {
114
+
115
+ const value = values[i - 1];
116
+
117
+ if (typeof value === "string") {
118
+
119
+ return result + escapeSpecialChars(value) + str;
120
+
121
+ } else {
122
+
123
+ return result + String(value) + str;
124
+
125
+ }
126
+
127
+ });
128
+
129
+ }
58
130
 
59
131
 
60
132
 
61
133
  ```
134
+
135
+
136
+
137
+ (参考サイト)
138
+
139
+ https://jsprimer.net/use-case/ajaxapp/display/

2

追記

2020/07/05 02:53

投稿

maskmelon
maskmelon

スコア63

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
 
30
30
 
31
- ちなみに下記のような形で使われています。
31
+ ちなみに下記のような形で使われています。ここでは第2引数を取っていないように見えることも混乱を招いています。
32
32
 
33
33
 
34
34
 

1

コードの変更

2020/07/05 01:23

投稿

maskmelon
maskmelon

スコア63

test CHANGED
File without changes
test CHANGED
@@ -54,11 +54,7 @@
54
54
 
55
55
  `;
56
56
 
57
- // HTMLの挿入
57
+
58
-
59
- const result = document.getElementById("result");
60
-
61
- result.innerHTML = view;
62
58
 
63
59
 
64
60