JavaScriptの非同期プログラミングは、現代のWeb開発で不可欠なスキルです。非同期関数を理解し、適切に使用することで、Webアプリケーションのパフォーマンスを向上させ、ユーザーエクスペリエンスを向上させることができます。この記事では、非同期プログラミングの基本から応用までをカバーし、PromiseとAsync/Awaitを使用した実用的なコード例を提供します。
非同期関数とは何か？
非同期関数は、時間のかかるタスクを実行し、その間に他のコードを実行できるJavaScriptの概念です。これにより、ブラウザやサーバーがリソースを効率的に使用でき、ブロッキング（処理の停止）を回避できます。
Promiseを利用した非同期処理
Promiseは、非同期コードをより制御可能にするためのツールです。以下は、Promiseを使用した簡単な例です
function fetchData(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(`HTTPエラー! ステータスコード: ${response.status}`);
}
return response.json();
})
.then(data => {
resolve(data);
})
.catch(error => {
reject(error);
});
});
}
// 使用例
fetchData('https://api.example.com/data')
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});1. fetchData 関数は、引数としてURLを受け取り、Promiseを返す関数です。このPromiseは非同期操作を表します。
2. Promiseコンストラクタ内で、fetch 関数を使用して指定したURLからデータを取得し、HTTP応答を response として取得します。
3. response.ok プロパティを確認して、HTTPステータスコードが成功（200番台）であるかどうかをチェックします。成功していない場合はエラーをスローします。
4. response.json() を呼び出して、HTTP応答のJSONデータを取得します。
5. 成功時には resolve(data) を呼び出し、Promiseはデータを返します。失敗時には reject(error) を呼び出し、エラーを返します。
6. 使用例では、fetchData 関数を呼び出し、非同期データの取得を待ちます。データの取得に成功した場合は、データをコンソールに表示し、エラーが発生した場合はエラーメッセージをコンソールに表示します。
このコードでは、非同期処理をPromiseを使用して表現しています。fetchでのHTTPリクエストの成功と失敗に対処し、データの取得とエラーハンドリングを行っています。
Async/Awaitを使用した非同期処理
async function fetchData(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTPエラー! ステータスコード: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
throw error;
}
}
// 使用例
async function main() {
try {
const data = await fetchData('https://api.example.com/data');
console.log(data);
} catch (error) {
console.error(error);
}
}
main();1. fetchData 関数は async キーワードで宣言され、非同期関数として定義されています。これにより、関数内で await を使用できるようになります。※awaitはasync関数内でのみ使用できます。
2. try…catch ブロックを使用して非同期処理のエラーハンドリングを行います。非同期操作内でエラーが発生した場合、それをキャッチし、catch ブロックで処理します。
3. fetch 関数の非同期操作には await を使用し、HTTP応答を response として待機します。これにより、非同期コードが同期的に書けるようになります。
4. response.ok プロパティを確認して、HTTPステータスコードが成功（200番台）であるかどうかをチェックします。成功していない場合はエラーをスローします。
5. response.json() を呼び出して、HTTP応答のJSONデータを非同期に取得します。
6. 成功時にはデータを返し、失敗時にはエラーをスローします。
7. 使用例では、fetchData 関数を await キーワードで呼び出し、非同期データの取得を待ちます。成功した場合はデータをコンソールに表示し、エラーが発生した場合はエラーメッセージをコンソールに表示します。
Async/Awaitを使用することで、非同期コードをより読みやすく、同期的なコードと同じように書くことができます。エラーハンドリングも try…catch ブロックを使用して直感的に行えます。
今回は以上となります。
JavaScriptに関してさらに知識を深めたい方にはこちらの動画がおすすめです。
コメント