【自分用メモ】非同期処理とは何か簡潔に

Async awaitは、JavaScriptで非同期処理を扱うための特別な構文です。非同期処理は、コードが順番に実行されるのではなく、他の処理が終わるのを待たずに次の処理をすぐに実行する方法です。

例えば、ウェブサイトで画像を読み込むとき、画像の読み込みが終わるのを待ってページが表示されると、ページの読み込みが遅くなってしまいます。Async awaitは、このような場面で非同期処理をスムーズに扱うための方法です。

具体的に言うと、`async`と`await`という2つのキーワードを使います。`async`は関数の前に置いて、その関数が非同期であることを示します。そして、`await`は非同期で処理される関数を呼び出すときに使います。この`await`は、その行の処理が完了するまで次の行に進まないようにします。

簡単な例を見てみましょう：

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

fetchData();

この例では、`fetchData`関数は非同期関数であり、`fetch`を使ってデータを取得しています。しかし、`await`を使うことで、データが取得されるのを待ってから次の行に進みます。これにより、コードが非同期処理の完了を待ってから次のステップに進むので、読みやすく、エラー処理もしやすくなります。

※fetchとは

"Fetch"は、ウェブブラウザーがネットワークを介してリソースを取得するためのAPIです。これは、ウェブページがサーバーからデータを取得する際に使用されます。例えば、JSON、画像、動画、HTMLファイルなどのデータを取得するために使われます。

この例では、`fetch()`メソッドは、指定されたURL（ここでは'https://api.example.com/data'）からデータを取得するために使用されています。このデータは、後で`await response.json()`を使用してJSON形式に変換されます。

`fetch()`はPromiseを返すため、`await`を使って非同期的に処理を待ちます。つまり、`fetch()`がサーバーからデータを取得するのを待ってから、次の行である`response.json()`が実行されます。その後、JSONデータが取得され、変数`data`に格納されます。

この例では、Fetchはウェブサーバーからデータを取得し、そのデータをJavaScriptで利用できる形式に変換しています。