はじめに
JavaScript はシングルスレッドで動作するため、処理を大量に書くと処理が長引き画面が固まってしまう可能性があります。これを避け、ユーザー操作を止めずに並行して処理を進めるために使われるのが非同期処理です。
今回は、非同期処理についてLogとして記載していきたいと思います。
非同期処理とは
非同期処理（Asynchronous Processing）とは、ある処理が完了するのを待たずに、次の処理を先に進める仕組みです。JavaScriptでは、時間のかかる処理（ネットワーク通信、ファイル読み込み、タイマーなど）をメインスレッドとは別の流れで実行し、完了したら結果を反映する形をとることとなります。
利点として、長時間かかる処理をバックグラウンドで行い、画面や操作が固まらないようにすることが可能です。
同期処理と非同期処理の違い
同期処理：上から順番に実行され、前の処理が終わるまで次へ進まない。
非同期処理：処理の完了を待たずに次の処理に進める。
同期処理例
上から順番に実行されます。
console.log("処理1");
console.log("処理2");
console.log("処理3");処理1
処理2
処理3
非同期処理例
時間のかかる処理を待たずに、次の処理が先に進みます。
console.log("処理1");
setTimeout(() => {
console.log("処理2（2秒後に実行）");
}, 2000);
console.log("処理3");処理1
処理3
処理2（2秒後に実行）
Promise
Promiseオブジェクトは、JavaScriptで非同期処理を扱える機能となります。
Promiseには3つの状態があります。
１、pending（保留）
非同期処理がまだ終わっていない状態。
２、fulfilled（成功）
非同期処理が正常に終了し、値が返された状態。
３、rejected（失敗）
非同期処理中にエラーが発生した状態。
状態は一度確定（fulfilledまたはrejected）すると変わらず、その後は .then() や .catch() を使って結果を受け取ります。
構文
const promise = new Promise((resolve, reject) => {
// 非同期処理を実行
if (/* 成功条件 */) {
resolve(結果の値);
} else {
reject(エラー情報);
}
});
例
let prosess = new Promise((resolve, reject) => {
setTimeout(() => {
let success = true; // 仮で処理成功
if (success) {
resolve("データ取得成功");
} else {
reject("データ取得失敗");
}
}, 2000);
});
prosess
.then(result => {
console.log(result); // 成功時の処理
})
.catch(error => {
console.error(error); // 失敗時の処理
})
.finally(() => {
console.log("処理が完了しました（成功・失敗に関わらず）");
});
async・await
async / await は、Promiseをよりシンプルで、非同期処理をあたかも同期処理のように書くことができます。
例
async function fetchData() {
return "データ取得成功";
}
fetchData().then(result => console.log(result));
// "データ取得成功"
まとめ
非同期処理は、処理が複雑になると「コールバック地獄」に陥りやすい課題があります。Promiseを使うことで、成功・失敗の状態を明確に管理しすることができます。
さらに、async/await構文を使えば、Promiseの処理をまるで同期処理のように書けて、コードがよりシンプルになります。
今回の内容を参考にしながら、試してみてください。
最後に
JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript
以上、ログになります。
これからも継続していきましょう！！
コメント