【デイトラ学習記録】DAY 17 JavaScriptの非同期通信 – フロントエンド開発編

/**
 * 同期処理の例
 * 上から順番に処理される
 */

const syncFunction = () => {
  console.log("Sync function1");
  console.log("Sync function2");
  console.log("Sync function3");
};

syncFunction();
// Sync function1
// Sync function2
// Sync function3

/**
 * 非同期処理の例
 * setTimeout関数によって、特定の処理を遅らせる
 */
const asyncFunction = () => {
  setTimeout(() => {
    console.log("function1");
  }, 1000);
  console.log("function2");
  console.log("function3");
};

asyncFunction();
// Sync function2
// Sync function3
// Sync function1

fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => response.json())
  .then((json) => console.log(json));
  .catch((error) => console.error("Error", error));

/**
 * Promiseを使った非同期処理の例
 */
const promiseTstFunction = () => {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve("成功");
      } else {
        reject("失敗");
      }
    }, 1000);
  });

  return promise;
};

promiseTstFunction()
  .then((data) => console.log(data))
  .catch((error) => console.error("Error", error));

const testFunction = () => {
  fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => response.json())
    .then((json) => console.log(json))
    .catch((error) => console.error("Error", error));
};

↓ await を使うと以下のように書ける

const testFunction = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  if (!response.ok) {
    console.error("Error", error);
  }

  const json = await response.json();
  console.log(json);
};

<table>
  <thead>
    <tr>
      <th class="border p-2">ID</th>
      <th class="border p-2">名前</th>
      <th class="border p-2">電話番号</th>
      <th class="border p-2">メールアドレス</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <!-- ここにAPIで取得したデータが表示されます -->
  </tbody>

/**
 * @function fetchData - APIデータを取得する関数
 * @returns {Promise<Array>} - ユーザーデータの配列を返す
 * @throws {Error} - データ取得に失敗した場合、エラーをスローする
 */
const fetchData = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  if (!response.ok) {
    throw new Error("データ取得に失敗しました");
  }
  return await response.json();
};

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    ・・・
    ・・・

/**
 * @function createTdElement - td要素を生成する関数
 * @param {string} textContent - td要素に設定するテキストコンテンツ
 * @param {Array<string>} classes - td要素に追加するクラスの配列
 * @returns {HTMLElement} - 生成されたtd要素
 */
const createTdElement = (textContent, classes) => {
  const tdElement = document.createElement("td");
  tdElement.textContent = textContent;
  classes.forEach((cls) => tdElement.classList.add(cls));
  return tdElement;
};

/**
 * @function renderTable - 受け取ったJSONを元にDOMを生成する関数
 * @param {Array} usersJsonData - ユーザーデータの配列
 * @returns {void}
 */
const renderTable = (usersJsonData) => {
  usersJsonData.forEach((userData) => {
    // tdタグを生成
    const trElement = document.createElement("tr");
    // tdタグに付与するクラス属性
    const classes = ["border", "p-2"];
    // tdタグに表示するデータのキー
    const keys = ["id", "name", "phone", "email"];

    /**
     * キーを元に。繰り返し処理でtdタグを生成し、trタグに追加
     */
    keys.forEach((key) => {
      const tdElement = createTdElement(userData[key], classes);
      trElement.appendChild(tdElement);
    });

    // 生成したtrタグをtable要素に追加
    const tableElement = document.querySelector("#table-body");
    tableElement.appendChild(trElement);
  });
};

/**
 * @function init - 初期化関数
 */
const init = async () => {
  try {
    const usersJsonData = await fetchData();
    renderTable(usersJsonData);
  } catch (error) {
    console.error("Error", error);
  }
};

init();