JavaScriptの非同期処理とは？基本から使い方までわかりやすく解説
JavaScriptの学習を進めると、「非同期処理（Asynchronous）」という言葉に出会います。
非同期処理は、待ち時間のある処理を効率的に行うための仕組みで、Web開発において欠かせない重要な概念です。
この記事では、非同期処理とは何か、なぜ必要なのか、そしてその使い方についてわかりやすく解説します。
非同期処理とは？
非同期処理とは、ある処理をしている間に他の処理を同時に進めることができる仕組みです。
JavaScriptは基本的に「シングルスレッド」で動くため、処理が1つずつ順番に実行されます。
しかし、時間のかかる処理（例：API通信やファイル読み込み）を待っていると、他の処理が止まってしまいます。
それを避けるために使うのが非同期処理です。
同期処理の例
console.log("処理1");
console.log("処理2");
console.log("処理3");
この場合は上から順に実行され、「処理1 → 処理2 → 処理3」と表示されます。
非同期処理の例（setTimeout）
console.log("処理1");
setTimeout(function() {
console.log("処理2（3秒後）");
}, 3000);
console.log("処理3");
この場合、「処理1 → 処理3 → 処理2（3秒後）」という順番になります。
setTimeout によって、処理2が遅れて実行されていることがわかります。
非同期処理が使われる主な場面
- データベースやAPIへのアクセス
- ファイルの読み込みや保存
- ユーザー操作（クリック、入力）への応答
- タイマー処理（setTimeout、setInterval）
非同期処理の書き方
JavaScriptでは、非同期処理を扱うためにいくつかの書き方があります。
1. コールバック関数
function doSomething(callback) {
setTimeout(function() {
console.log("処理完了");
callback();
}, 1000);
}
doSomething(function() {
console.log("次の処理");
});
2. Promise
function fetchData() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("データ取得完了");
}, 1000);
});
}
fetchData().then(function(result) {
console.log(result);
});
3. async / await
async function loadData() {
const result = await fetchData();
console.log(result);
}
loadData();
async / await を使うと、同期処理のように読みやすく非同期処理を記述できます。
非同期処理のメリット
- ユーザー操作を止めずに処理ができる
- 待ち時間のある処理を効率よく扱える
- Webアプリのレスポンスが向上する
非同期処理の注意点
- 処理の順序がずれることがある
- ネストが深くなりやすい（コールバック地獄）
- エラーハンドリングがやや複雑
まとめ
- 非同期処理は「待たずに次へ進む」仕組み
- Web開発では不可欠な技術
setTimeout、Promise、async/await などで実現できる- 処理の順序やエラー処理には注意が必要
非同期処理は慣れるまで少し難しく感じるかもしれませんが、JavaScriptを使いこなすうえで欠かせない考え方です。
実際にコードを書いて、動作を体感しながら理解を深めていきましょう。
