【ITニュース解説】Async Function() method in Javascript

JavaScriptにおけるasync function()メソッドについて解説する。

JavaScriptのasync functionは、非同期処理を扱うための特別な関数の一種であり、awaitキーワードと組み合わせて使うことで、非同期処理を同期処理のように記述し、管理しやすくする。

awaitキーワードは、async関数の中でしか使用できない。

具体例を見てみよう。

Copy
1async function dev() {
2  await task("analysis");
3  await task("design");
4  await task("plan");
5  await task("deploy");
6}
7dev();

この例では、dev関数はasync関数として定義されている。task関数が非同期処理を行う関数だと仮定すると、awaitキーワードを使うことで、task("analysis")の処理が終わるまで、次のtask("design")の処理は実行されない。つまり、analysis、design、plan、deployの順に処理が実行されることが保証される。

awaitがない場合、これらのtask関数は並行して実行される可能性があり、処理の順番が保証されない。async/awaitを使うことで、非同期処理を順番に実行し、結果を待ってから次の処理に進む、という制御が可能になる。

次に、クロージャーに関する例を見てみよう。

Copy
1function account(amount) {
2  let balance = amount;
3  function withdraw(amt) {
4    balance = balance - amt; // 正しくは引き算
5    console.log(balance);
6  }
7  return withdraw;
8}
9
10const withdraw1 = account(1000);
11withdraw1(50);
12const withdraw2 = account(500);
13withdraw2(100);

この例では、account関数は、初期残高を受け取り、withdraw関数を返す。withdraw関数は、account関数内で定義されたbalance変数にアクセスできる。これをクロージャーと呼ぶ。

withdraw1は、初期残高1000円でaccount関数を呼び出して作成された関数であり、withdraw2は初期残高500円でaccount関数を呼び出して作成された関数である。

withdraw1(50)を呼び出すと、withdraw1に関連付けられた残高（最初は1000円）から50円が引き落とされ、残高950円が表示される。同様に、withdraw2(100)を呼び出すと、withdraw2に関連付けられた残高（最初は500円）から100円が引き落とされ、残高400円が表示される。

重要な点は、withdraw1とwithdraw2はそれぞれ独立した残高を持っており、互いに影響を与えないことである。これは、クロージャーが、関数が定義された時点での環境（この場合はaccount関数の実行時のbalance変数）を保持しているためである。

最後に、JavaScriptにおけるAPI呼び出しについて簡単に触れる。

JavaScriptにおけるAPI呼び出しは、Webサービスとやり取りし、データを取得または送信するための主要な方法である。現代的なJavaScriptでは、API呼び出しを行うための推奨される方法がいくつか存在する。

通常、fetch APIやXMLHttpRequestオブジェクトを使用してAPIを呼び出す。fetch APIはよりモダンで使いやすく、Promiseベースであるため、async/awaitと組み合わせて使用することで、非同期処理をより簡潔に記述できる。

API呼び出しでは、HTTPリクエストメソッド（GET、POST、PUT、DELETEなど）を指定し、APIのエンドポイント（URL）を指定する。また、リクエストヘッダーやリクエストボディ（送信するデータ）を設定することもできる。

APIからのレスポンスは、通常JSON形式で返される。JavaScriptでは、JSON.parse()メソッドを使用して、JSON文字列をJavaScriptオブジェクトに変換し、データを扱うことができる。

例えば、以下のようにfetch APIを使用してAPIを呼び出すことができる。

Copy
1async function fetchData() {
2  const response = await fetch('https://example.com/api/data');
3  const data = await response.json();
4  console.log(data);
5}
6
7fetchData();

この例では、fetch関数を使用してhttps://example.com/api/dataにGETリクエストを送信し、レスポンスをJSONとして解析して、コンソールに表示する。async/awaitを使用することで、非同期処理を同期処理のように記述し、コードを読みやすくしている。