JavaScriptの非同期処理を中学生にもわかりやすく説明するために、「やることリスト」を例にしてみます。
基本的な考え方
1. 同期処理
普通の「同期処理」は、リストのやることを順番に一つずつ終わらせる感じです。たとえば、
- 宿題をする
- おやつを食べる
- 友達に電話する
この順番で進みます。宿題が終わるまで次のことができません。
2. 非同期処理
「非同期処理」は、時間がかかることをやっている間に、他のこともできる仕組みです。たとえば、
- 洗濯機をスタートさせる（←ここで時間がかかる）
- 宿題をする
- おやつを食べる
- 洗濯が終わったら干す
洗濯機が回っている間に、宿題やおやつなど他のことができるので、時間を無駄にしません。これが「非同期」です！
JavaScriptでの非同期処理
JavaScriptでは、次のような方法で非同期処理が行われます。
1. コールバック関数
非同期処理の最も基本的な形は「コールバック関数」です。何かが終わったときに呼ばれる関数のことです。
function doHomework(callback) {
console.log("宿題をしています...");
setTimeout(callback, 2000); // 2秒後に次の処理を実行
}
doHomework(() => {
console.log("宿題が終わった！");
});
ここでは、doHomework関数が非同期に動き、2秒後に「宿題が終わった！」と表示されます。
2. Promise（プロミス）
コールバック関数だと複雑になりがちなので、「Promise」が登場しました。これは、何かが「成功」するか「失敗」するかを表現します。
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("成功！");
} else {
reject("失敗！");
}
});
promise
.then((message) => {
console.log("非同期処理の結果: " + message);
})
.catch((error) => {
console.log("エラー: " + error);
});
ここでは、Promiseが成功か失敗かを判定し、結果に応じて処理が変わります。
3. async / await
非同期処理をもっと簡単に書く方法がasync / awaitです。これにより、同期的に書いたような見た目で非同期処理が実行できます。
async function doAsyncTask() {
console.log("非同期タスクを開始");
await new Promise((resolve) => setTimeout(resolve, 2000)); // 2秒待機
console.log("非同期タスクが完了！");
}
doAsyncTask();
awaitを使うと、Promiseが完了するまで待ってから次の処理に進むので、見た目も理解もしやすくなります。
まとめ
- 同期処理: 順番に一つずつ実行される
- 非同期処理: 時間がかかる処理が完了するまで待たずに他の処理が進む
- 非同期処理の方法: コールバック関数、Promise、async/await
こんな感じで非同期処理を使えば、JavaScriptで効率よく作業を進められるようになります！
コメント