- async とか await とか出てくるけど、正直よくわかってない…
- 非同期処理って何？って聞かれても説明できない…
- とりあえずコピペで動かしてるけど、ちゃんと理解したい！
JavaScriptに限らず、開発をしているといつの間にか出てくる「非同期処理」という漢字5文字。
API通信やタイマー処理、Slack通知など、実務でも頻繁に登場するのに、いまさら聞きづらい…そんな経験ありませんか？
この記事では、非同期処理の基本から async / await の役割、そして実務での活用例までを、やさしく解説します。
なんとなく使ってるから ちゃんと理解して使える に変える第一歩として、ぜひ最後まで読んでみてください。
続編も企画しているので理解を深めたい方は、いいねやフォローもお願いします！
🎯 この記事を読んでほしい人
- JavaScriptを使っているけど、非同期処理がなんとなく苦手
-
async/awaitを使ってみたけど、いまいちピンと来ていない - 実務でAPI連携や通知処理（Slack通知など）を扱うことがある
📚 この記事で学べること
- 非同期処理の基本的な考え方（同期との違い）
-
async/awaitの役割と使い方 - 実務でよくある「Slack通知」などのAPI連携にどう活かせるか
- 次回記事でPromiseの仕組みまで理解するための準備
🤔 非同期処理って何？
JavaScriptは基本的に「同期処理」で動きます。
ですが、API通信、ファイル読み込みなどの時間がかかる処理を待っていたら、他の処理が止まってしまいます。
そこで登場するのが非同期処理。
🔁 同期処理の例
console.log("A");
console.log("B");
console.log("C");
普通に処理するだけなので簡単です。
出力は上から順番通り。
A
B
C
⏳ 非同期処理の例
console.log("A");
setTimeout(() => {
console.log("B");
}, 1000);
console.log("C");
出力は以下の通り。
A
C
B
BとCが入れ替わっていますね。
setTimeout の中の処理は「1秒後に実行してね」と後回しています。
なので、この例では C が先に出力されます。
⚙️ async / await の役割
それぞれの役割は次の通りです。
- async：関数を非同期関数にする宣言
- await：非同期処理が終わるまで待つ命令
なんのこっちゃわからないと思うので、正しい使い方の例で見ていきます。
✅ 正しい使い方の例
async function getData() {
const response = await fetch("https://api.example.com/data");
const json = await response.json();
console.log(json);
}
getData()にasyncを付けることで「これから非同期処理をする関数」ですよと宣言しています。
関数内でawaitを付けた箇所には、処理が返ってくるまで待っててね、としています。
このように、非同期処理（fetch）の完了を待ってから次の処理に進めます。
❌ よくある間違い
// NG: async 関数の外で await を使うとエラー
const data = await fetch("https://api.example.com/data");
await は async 関数の中でしか使えないので要注意です。
💡 実用例：Slack通知を送る処理
例えば、kintoneで障害レコードが登録されたときにSlackへ通知を送る処理を自動化しているとします。（ここでは標準の通知機能ではなくJavaScriptを使うことを前提に話を進めます）
Slack通知を送るには、Slack APIに対してPOSTリクエストを送る必要があります。
リクエストに対する応答があって初めて連携できるからです。
ちなみに、リクエストの応答を待たず次の処理に進んでしまうと、POSTが届かずエラーとなりSlackからの通知が来ないことになります。
🔧 Slack通知を送る非同期関数
async function sendSlackNotification(message) {
const webhookUrl = "https://hooks.slack.com/services/XXX/YYY/ZZZ";
const payload = {
text: message
};
const response = await fetch(webhookUrl, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(payload)
});
if (response.ok) {
console.log("Slack通知成功");
} else {
console.error("Slack通知失敗");
}
}
このように、Slack通知のような「外部サービスとの通信」は非同期処理が必須です。
await を使うことで、通知が成功したかどうかを確認してから次の処理に進めることができます。
今回の例では単純にJavaScriptでSlack通知と記載しましたが、実際はSlackの仕組み上、直接APIで指示ができません。
その場合は、MakeやPowerAutomate（有償のpremium）（Node.jsやpythonでも可）を使用し、直接ではなく操作することで実現できるようになります。
まとめ
API通信やSlack通知などの時間がかかる処理を含む場合、意図しない順序で出力されたりエラーが発生したりと処理順序に悩む機会があります。
ご紹介したとおり非同期処理とは、時間がかかる処理を待たずに他の処理を先に進める仕組みです。
この非同期処理を扱うために使うのが、async と await というキーワードです。
- async ：「この関数は非同期処理を含みますよ」という宣言
- await ：「この処理が終わるまで待ってね」という命令
async を関数の前につけることで、その中で await を使うことで、非同期処理の完了を待ってから次の処理に進めることが可能です。
Slack通知のような外部サービスとの通信でも、通知が成功したかどうかを確認してから次の処理へ進むようになるため、通知漏れや順番のバグを防ぐことができます。
非同期処理をうまく使いこなして、より安定した信頼性の高いコードが書いていきましょう！
🔜 次回予告その1：「Promiseって何？」
今回紹介した async / await は、実は Promise という仕組みの上に成り立っています。
次回は以下の内容を解説予定です。
-
Promiseの基本構造と状態（pending/fulfilled/rejected） -
.then()/.catch()の使い方 -
async/awaitがPromiseをどうラップしているのか - Promiseチェーンとエラーハンドリングのベストプラクティス
🛠 次回予告その2：「kintone × Slack通知をJavaScriptでやってみた」
実務でよくある「kintoneでレコードが登録されたらSlackに通知したい」というニーズ。
次回は、Make（旧Integromat）を使って、kintoneのレコード登録をSlackに通知する方法をステップごとに解説します。
- kintoneのイベントハンドラーの使い方
- Slack Webhookの設定とPOST処理
- 通知の安定性を高めるための工夫（非同期処理、エラーハンドリング)
など
さらに、Makeを使わずにNode.jsでSlack通知を実装する方法も、別記事で紹介予定です。