[jsprimer] add

nojima · nojima · commit f465cf95f47e · 2020-05-10T02:55:52.000+09:00
diff --git a/jsprimer/index.html b/jsprimer/index.html
@@ -0,0 +1,16 @@
+<html lang="ja">
+    <head>
+        <meta charset="utf-8" />
+        <title>Ajax Example</title>
+    </head>
+    <body>
+        <h1>GitHub User Info</h1>
+
+        <input id="userId" text="text" value="js-primer-example" />
+        <button onclick="main();">Get user info</button>
+
+        <div id="result"></div>
+
+        <script src="index.js"></script>
+    </body>
+</html>
diff --git a/jsprimer/index.js b/jsprimer/index.js
@@ -0,0 +1,67 @@
+console.log("index.js: loaded");
+
+function escapeSpecialChars(str) {
+    return str
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+
+function escapeHTML(strings, ...values) {
+    return strings.reduce((result, str, i) => {
+        const value = values[i - 1];
+        if (typeof value === "string") {
+            return result + escapeSpecialChars(value) + str;
+        } else {
+            return result + String(value) + str;
+        }
+    })
+}
+
+function createView(userInfo) {
+    return escapeHTML`
+    <h4>${userInfo.name} (@${userInfo.login})</h4>
+    <img src="${userInfo.avatar_url}" alt="${userInfo.login}" height="100">
+    <dl>
+    <dt>Location</dt>
+    <dd>${userInfo.location}</dd>
+
+    <dt>Repositories</dt>
+    <dd>${userInfo.public_repos}</dd>
+    </dl>
+    `;
+}
+
+function displayView(view) {
+    const result = document.getElementById("result");
+    result.innerHTML = view;
+}
+
+function fetchUserInfo(userId) {
+    return fetch(`https://api.github.com/users/${encodeURIComponent(userId)}`)
+        .then(response => {
+            if (!response.ok) {
+                return Promise.reject(new Error(`${response.status}: ${response.statusText}`));
+            } else {
+                return response.json();
+            }
+        });
+}
+
+function getUserId() {
+    const value = document.getElementById("userId").value;
+    return encodeURIComponent(value);
+}
+
+async function main() {
+    try {
+        const userId = getUserId();
+        const userInfo = await fetchUserInfo(userId);
+        const view = createView(userInfo);
+        displayView(view);
+    } catch (error) {
+        console.error(`エラーが発生しました (${error})`);
+    }
+}
