TypeScript APIとPromiseの活用

by

TypeScriptとPromiseの基本

TypeScriptはJavaScriptのスーパーセットで、静的型付けとクラスベースのオブジェクト指向を提供します。Promiseは非同期操作の最終的な完了（または失敗）およびその結果の値を表現するオブジェクトです。

TypeScriptとは

TypeScriptはJavaScriptに静的型付けとクラスベースのオブジェクト指向を追加した言語です。これにより、コードが大規模になっても管理しやすく、バグを早期にキャッチできます。

Promiseとは

Promiseは非同期操作が成功したか失敗したかを表すオブジェクトです。Promiseは以下の3つの状態を持ちます：

  1. pending（未解決）: 非同期操作がまだ完了していない、または拒否されていない状態。
  2. fulfilled（解決済み）: 非同期操作が成功し、Promiseが結果を持っている状態。
  3. rejected（拒否済み）: 非同期操作が失敗し、理由（エラー）が存在する状態。

Promiseは一度解決または拒否されると、その状態と結果は変更されません。これはPromiseが一度だけ解決または拒否されることを保証します。

TypeScriptでのPromiseの使用

TypeScriptでは、Promiseの型を指定することができます。これにより、Promiseが解決されたときの値の型が何であるかをコンパイラに伝えることができます。例えば、Promise<string>は解決されたときに文字列を返すPromiseを表します。

let promise: Promise<string> = new Promise((resolve, reject) => {
  // 非同期操作
  if (/* 非同期操作が成功 */) {
    resolve("成功!");
  } else {
    reject("失敗...");
  }
});

以上がTypeScriptとPromiseの基本的な概念です。次のセクションでは、非同期処理とPromiseについて詳しく見ていきましょう。

非同期処理とPromise

非同期処理は、特定のコードの実行が完了するのを待たずに、次のコードを実行することを可能にします。JavaScript（およびTypeScript）はシングルスレッド言語であるため、非同期処理は重要な概念です。

非同期処理の例

非同期処理の一般的な例は、APIからデータを取得することです。APIからデータを取得するには時間がかかるため、その間に他のコードを実行できるようにする必要があります。

console.log("データ取得開始");

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

console.log("データ取得終了");

このコードを実行すると、”データ取得開始”と”データ取得終了”がすぐに表示され、その後にAPIから取得したデータが表示されます。これは、fetch関数が非同期であり、データの取得が完了するのを待たずに次のコードが実行されるためです。

Promiseと非同期処理

Promiseは非同期処理をより簡単に扱うためのJavaScriptの機能です。Promiseは、非同期操作が成功した場合（解決）、または失敗した場合（拒否）に呼び出される2つのコールバック関数を受け取ります。

let promise = new Promise((resolve, reject) => {
  // 非同期操作
  if (/* 非同期操作が成功 */) {
    resolve("成功!");
  } else {
    reject("失敗...");
  }
});

promise.then((value) => {
  console.log(value); // "成功!"
}).catch((error) => {
  console.error(error); // "失敗..."
});

Promiseは非同期処理の結果を表すために使用され、その結果は.thenメソッドで取得できます。また、非同期処理が失敗した場合のエラーは.catchメソッドで取得できます。

以上が非同期処理とPromiseの基本的な概念です。次のセクションでは、APIリクエストとPromiseについて詳しく見ていきましょう。

APIリクエストとPromise

APIリクエストは、ウェブサービスからデータを取得するための一般的な方法です。これらのリクエストは非同期であり、Promiseを使用して管理されます。

APIリクエストの基本

API（Application Programming Interface）は、異なるソフトウェア間で情報を交換するためのインターフェースです。ウェブAPIは、ウェブサービスからデータを取得するために使用されます。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

上記のコードは、fetch関数を使用してAPIからデータを取得します。fetch関数はPromiseを返し、そのPromiseはAPIリクエストが成功した場合に解決され、失敗した場合に拒否されます。

PromiseとAPIリクエスト

APIリクエストは非同期であり、その結果はすぐには利用できません。そのため、Promiseを使用して非同期操作を管理します。

let promise = fetch('https://api.example.com/data');

promise.then(response => {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json();
}).then(data => {
  console.log(data);
}).catch(error => {
  console.error('Error:', error);
});

このコードでは、fetch関数がPromiseを返し、そのPromiseはAPIリクエストが成功した場合に解決されます。.thenメソッドは、Promiseが解決されたときに実行されるコールバック関数を登録します。また、.catchメソッドは、Promiseが拒否されたときに実行されるコールバック関数を登録します。

以上がAPIリクエストとPromiseの基本的な概念です。次のセクションでは、async/awaitを使った非同期処理について詳しく見ていきましょう。

async/awaitを使った非同期処理

JavaScript（およびTypeScript）のasyncとawaitは、非同期処理をより直感的に書くための構文です。これらを使用すると、非同期コードを同期コードのように書くことができます。

async関数

asyncキーワードは関数の前に置きます。これにより、その関数は非同期関数となり、必ずPromiseを返します。

async function fetchData() {
  // 非同期操作
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  return data;
}

await演算子

await演算子は、Promiseが解決されるのを待ちます。awaitはasync関数内でのみ使用できます。

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

このコードでは、fetch関数がPromiseを返し、そのPromiseが解決されるまで待ってから次の行を実行します。これにより、非同期コードを同期コードのように書くことができます。

以上がasync/awaitを使った非同期処理の基本的な概念です。次のセクションでは、TypeScriptでのPromiseの型指定について詳しく見ていきましょう。

TypeScriptでのPromiseの型指定

TypeScriptでは、Promiseが解決する値の型を指定することができます。これにより、非同期操作の結果の型をコンパイラに伝えることができます。

Promiseの型指定の基本

Promiseの型はPromise<T>の形式で指定します。ここでTはPromiseが解決する値の型を表します。

let promise: Promise<string> = new Promise((resolve, reject) => {
  // 非同期操作
  if (/* 非同期操作が成功 */) {
    resolve("成功!");
  } else {
    reject("失敗...");
  }
});

このコードでは、promiseはPromise<string>型で、解決すると文字列を返します。

async関数とPromiseの型指定

async関数もPromiseを返すため、その戻り値の型を指定することができます。

async function fetchData(): Promise<string> {
  let response = await fetch('https://api.example.com/data');
  let data = await response.text();
  return data;
}

このコードでは、fetchData関数はPromise<string>型の値を返します。つまり、この関数が解決すると文字列を返します。

以上がTypeScriptでのPromiseの型指定の基本的な概念です。これらの知識を活用して、非同期処理をより安全に、そして効率的に行うことができます。

コメントする