【デイトラ学習記録】DAY26 TypeScriptで非同期通信の実装

今回はTypeScriptを用いた非同期通信の実装を学習していきます。

TypeScriptで非同期通信の実装 Webアプリ開発コースフロントエンド開発編

フロントエンド領域の開発を学んでキャリアの幅を広げよう

前回は、JavaScriptで非同期通信の実装を行いました。
これを、TypeScriptへ書き換えていきます。

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

今回はJavaScriptの非同期通信について学習していきます。 JavaScriptの非同期通信 Webアプリ開発コースフロントエンド開発編フロントエンド領域の開発を学んでキャリアの幅を広げよう非同期処理と同期処理とは？同期処理の例

関数型プログラミングに基づいて、呼び出し側を作る

実装したいことを自然言語化

ボタンをクリックした時に
APIでデータを取得
取得したデータをDOMに追加する

上記をコードに起こします。

TypeScript

// API通信ボタン
const userButton = getElementById("button-user");

// ボタンのクリックイベント
userButton.addEventListener("click", async () => {
  // APIからユーザー情報の取得をここに書く
  
  // 取得したデータをDOMに追加する処理をここに書く
});

// APIからユーザー情報の取得をここに書く
// 取得したデータをDOMに追加する処理をここに書く

この部分を関数に切り出して、別のファイルで定義します。

APIからユーザー情報の取得する関数を作る

ファイルを分割して、関数に処理を切り出していきます。

TypeScript

/**
 * ユーザー情報をAPIから取得する
 *
 * @returns Promise<Users[]>
 */
export const fetchUserList = async (): Promise<Users[]> => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/");
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  const users: Users[] = await response.json();
  return users;
};

usersの型情報を定義する

AIPで取得するJSONは以下になります。

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",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net",
    "address": {
      "street": "Douglas Extension",
      "suite": "Suite 847",
      "city": "McKenziehaven",
      "zipcode": "59590-4157",
      "geo": {
        "lat": "-68.6102",
        "lng": "-47.0653"
      }
    },
    "phone": "1-463-123-4447",
    "website": "ramiro.info",
    "company": {
      "name": "Romaguera-Jacobson",
      "catchPhrase": "Face to face bifurcated interface",
      "bs": "e-enable strategic applications"
    }
  },
  {
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
    "email": "Julianne.OConner@kory.org",
    "address": {
      "street": "Hoeger Mall",
      "suite": "Apt. 692",
      "city": "South Elvis",
      "zipcode": "53919-4257",
      "geo": {
        "lat": "29.4572",
        "lng": "-164.2990"
      }
    },
    "phone": "493-170-9623 x156",
    "website": "kale.biz",
    "company": {
      "name": "Robel-Corkery",
      "catchPhrase": "Multi-tiered zero tolerance productivity",
      "bs": "transition cutting-edge web services"
    }
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
    "email": "Lucio_Hettinger@annie.ca",
    "address": {
      "street": "Skiles Walks",
      "suite": "Suite 351",
      "city": "Roscoeview",
      "zipcode": "33263",
      "geo": {
        "lat": "-31.8129",
        "lng": "62.5342"
      }
    },
    "phone": "(254)954-1289",
    "website": "demarco.info",
    "company": {
      "name": "Keebler LLC",
      "catchPhrase": "User-centric fault-tolerant solution",
      "bs": "revolutionize end-to-end systems"
    }
  },
  {
    "id": 6,
    "name": "Mrs. Dennis Schulist",
    "username": "Leopoldo_Corkery",
    "email": "Karley_Dach@jasper.info",
    "address": {
      "street": "Norberto Crossing",
      "suite": "Apt. 950",
      "city": "South Christy",
      "zipcode": "23505-1337",
      "geo": {
        "lat": "-71.4197",
        "lng": "71.7478"
      }
    },
    "phone": "1-477-935-8478 x6430",
    "website": "ola.org",
    "company": {
      "name": "Considine-Lockman",
      "catchPhrase": "Synchronised bottom-line interface",
      "bs": "e-enable innovative applications"
    }
  },
  {
    "id": 7,
    "name": "Kurtis Weissnat",
    "username": "Elwyn.Skiles",
    "email": "Telly.Hoeger@billy.biz",
    "address": {
      "street": "Rex Trail",
      "suite": "Suite 280",
      "city": "Howemouth",
      "zipcode": "58804-1099",
      "geo": {
        "lat": "24.8918",
        "lng": "21.8984"
      }
    },
    "phone": "210.067.6132",
    "website": "elvis.io",
    "company": {
      "name": "Johns Group",
      "catchPhrase": "Configurable multimedia task-force",
      "bs": "generate enterprise e-tailers"
    }
  },
  {
    "id": 8,
    "name": "Nicholas Runolfsdottir V",
    "username": "Maxime_Nienow",
    "email": "Sherwood@rosamond.me",
    "address": {
      "street": "Ellsworth Summit",
      "suite": "Suite 729",
      "city": "Aliyaview",
      "zipcode": "45169",
      "geo": {
        "lat": "-14.3990",
        "lng": "-120.7677"
      }
    },
    "phone": "586.493.6943 x140",
    "website": "jacynthe.com",
    "company": {
      "name": "Abernathy Group",
      "catchPhrase": "Implemented secondary concept",
      "bs": "e-enable extensible e-tailers"
    }
  },
  {
    "id": 9,
    "name": "Glenna Reichert",
    "username": "Delphine",
    "email": "Chaim_McDermott@dana.io",
    "address": {
      "street": "Dayna Park",
      "suite": "Suite 449",
      "city": "Bartholomebury",
      "zipcode": "76495-3109",
      "geo": {
        "lat": "24.6463",
        "lng": "-168.8889"
      }
    },
    "phone": "(775)976-6794 x41206",
    "website": "conrad.com",
    "company": {
      "name": "Yost and Sons",
      "catchPhrase": "Switchable contextually-based project",
      "bs": "aggregate real-time technologies"
    }
  },
  {
    "id": 10,
    "name": "Clementina DuBuque",
    "username": "Moriah.Stanton",
    "email": "Rey.Padberg@karina.biz",
    "address": {
      "street": "Kattie Turnpike",
      "suite": "Suite 198",
      "city": "Lebsackbury",
      "zipcode": "31428-2261",
      "geo": {
        "lat": "-38.2386",
        "lng": "57.2232"
      }
    },
    "phone": "024-648-3804",
    "website": "ambrose.net",
    "company": {
      "name": "Hoeger LLC",
      "catchPhrase": "Centralized empowering task-force",
      "bs": "target end-to-end models"
    }
  }
]

このJSONに沿って型情報を作成します。
ネストされた型情報は、typeをさらに切り出して定義します。

TypeScript

type Users = {
  id: number;
  name: string;
  username: string;
  email: string;
  address: Address;
  phone: string;
  website: string;
  company: Company;
};

type Address = {
  street: string;
  suite: string;
  city: string;
  zipcode: string;
  geo: Geo;
};

type Geo = {
  lat: string;
  lng: string;
};

type Company = {
  name: string;
  catchPhrase: string;
  bs: string;
};

型情報のエラーについて

TypeScriptの段階では、fetch("https://hoge.com"); で取得する情報の方が一致しているか知る由もありません。

なので、APIで取得した情報の型が一致していなくてもエラーが出ないので注意が必要。

そのため、以下のようにバリデーションチェックする方法もある

TypeScript

users.forEach((user) => {
  if (typeof user.id !== "number") throw new Error(`id is not a number`);
  if (typeof user.name !== "string") throw new Error(`id is not a number`);
});

取得したデータをDOMに追加する処理

実装したいことを自然言語化

APIで取得したJSONデータから繰り返し処理をする
取得したデータからユーザー名と、メールアドレスのデータを取得して、liタグを作る
作成したliタグを、#user-list の中に追加する。

TypeScript

/**
 * ユーザー情報をDOMに追加する
 *
 * @param users APIで取得したユーザー情報
 * @returns void
 */
export const appendUserList = (users: Users[]): void => {
  const userList = getElementById("user-list");

  users.forEach((user) => {
    const userElement = createElement("li", ` ${user.name} : ${user.email}`);
    userList.appendChild(userElement);
  });
};

完成物

URL

TypeScriptで非同期通信

リポジトリ

GitHub – yuta0824/dev-typescript-fetch: デイトラWeb開発コースフロントエンド開発編 TypeScriptで非同期通信の実装の練習課題です

デイトラWeb開発コースフロントエンド開発編 TypeScriptで非同期通信の実装の練習課題です – yuta0824/dev-typescript-fetch

感想

TypeScriptを使った非同期処理の実装を学習しました。
主に、APIで取得した情報の型定義を学びました。
関数型プログラミングも復習しながら書きなおしたことで、徐々に慣れてきた気がします。