プログラミングを学ぶ上で必ず出てくる概念が 同期処理 と 非同期処理。
今回はJavaScriptを用いながら解説していきたいと思います！
1. 同期処理とは？
同期処理は 1つの処理が終わってから次の処理が実行される方式 です。
イメージは「行列に並んで順番に処理していく」感じです。
JavaScript の例
console.log("A");
console.log("B");
console.log("C");
// 出力結果
// A
// B
// C
2. 非同期処理とは？
非同期処理は ある処理が終わるのを待たずに次の処理を進める方式 です。
イメージは「料理をオーブンに入れて待っている間に別の作業を進める」感じです。
console.log("A");
setTimeout(() => {
console.log("B");
}, 1000);
console.log("C");
// 出力結果
// A
// C
// B
※処理が並行して進むため効率的ですが、結果がいつ返るか分からないため工夫が必要です。
３. JavaScript における非同期処理の書き方
JavaScript では Web ブラウザや Node.js の環境で、非同期処理が多く使われます。
代表的な書き方は以下の3つです。
3-1. コールバック関数
古くからある書き方です。
ただし入れ子が増えると「コールバック地獄」になりがちです。
setTimeout(() => {
console.log("データ取得完了");
}, 1000);
// 出力結果（1秒後に表示）
// データ取得完了
3-2. Promise
非同期処理の結果を「成功（resolve）」または「失敗（reject）」で表現できるオブジェクトです。コールバック関数よりも構造が分かりやすいと感じています。
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("データ取得完了");
}, 1000);
})
.then((result) => {
console.log(result); // データ取得完了
})
.catch((error) => {
console.error(error);
});
3-3. async / await
Promise をさらに扱いやすくした構文です。
同期処理のように書けるため、現在の主流となっています。
const fetchData = async () => {
try {
const result = await new Promise((resolve) =>
setTimeout(() => resolve("データ取得完了"), 1000)
);
console.log(result); // データ取得完了
} catch (error) {
console.error(error);
}
};
fetchData();
4. まとめ
• コールバック関数 → シンプルだがネストが深くなりやすい。
• Promise → 成功・失敗を明確に表現できる。
• async/await → 可読性が高く、現在の標準的な書き方。
おわりに
同期処理と非同期処理の違いを理解すると、コードの実行順序に迷わなくなり、API 通信やデータベース操作など実践的な開発がスムーズに進みます。
最初は難しく感じますが、Promise や async/await を使いこなせば自然に書けるようになります。 ぜひ自分のコードで試しながら、理解を深めていってください！