目次
非同期処理とは
非同期処理とはすぐに終わらない処理を、待たずに次に進めるしくみのこと。
実行中、別のタスクを行うことができるしくみです。
非同期処理は制御が難しい
重い処理もユーザを待たせずほかの操作がサクサク可能となる（グーグルマップ等）メリットはあります。
デメリット：しかし正しくコーディングしないとエラーやバグの発生しやすいポイントでもあります。
⚠️ 非同期処理でよくあるエラー
- まだデータが来てないのに、使おうとしてエラーになる。
- 順番を守れておらず、先に必要なデータが揃っていないのに、次の処理を始めてしまう。
- 複数のデータを一気に取ろうとして、1つでも失敗すると全部やり直しになる。
Promiseオブジェクトについて
Promiseは時間がかかる処理の「結果を入れておくオブジェクト」です。
JavaScriptで非同期処理を扱うには、今は基本的に Promise が「ほぼ必須」となってます！
つまり非同期処理とは「Promiseを返す」ような処理です。そして処理は“完了を待たずに”、JavaScriptは次の行へ進むということになります。
Promiseオブジェクトは3つの状態をもちます
「Promiseの状態」
- pending（保留）: 初期状態。まだ非同期処理は終わっていない（成功も失敗もしていない）
- fulfilled（成功）: 非同期処理が正常に終了した
- rejected（拒否）: 非同期処理が失敗した
🔍 よく使われる「Promiseを返す組み込みAPI」一覧
Promiseを使用するにはPromiseを返すAPIを使う必要があります。
| 関数/API名 | 説明 |
|---|---|
fetch() | ネットワークからデータを取ってくる（非同期） |
Response.json() | fetch() で取得したデータを JSON に変換（非同期） |
navigator.geolocation.getCurrentPosition() | これはPromiseじゃないけど、Promise版を自分で作れる対象 |
navigator.clipboard.readText() | クリップボードからテキストを読む |
navigator.clipboard.writeText() | クリップボードにテキストを書き込む |
FileReader.readAsText() など | ファイルを非同期で読むAPI（コールバックだがPromiseにラップ可能） |
window.showOpenFilePicker() | ファイル選択ダイアログを開く（最近のブラウザ） |
caches.open() | ブラウザのキャッシュストレージ操作 |
Notification.requestPermission() | 通知の許可をリクエスト |
Web Bluetooth API などの新しいAPI | ほとんどが Promise ベース |
🔧 組み込み以外でも、Promiseを返すように書くことも可能です
- 自作のPromise返す関数（
new Promise） - async 関数（書くだけで自動的にPromiseを返す）
⚠️ コード上で明示的にPromiseを書かなくても上記の通り組み込みAPI（例：fetch）や async 関数は、 Promise を返しているので非同期処理となります。
Promiseを使った非同期処理の実装
JavaScriptでPromiseを使う方法は、主に下記の2種類あります。
- .then
- async / await（最近は主流）
.then
.thenは前の処理が終わった後にやる処理を指定します
.then() 内の処理は、Promiseの結果（成功 or 失敗）が出ないと（完了しないと）実行されません
前の処理.then(終わった後にやる処理)前の処理の返り値を使用することも可能です
前の処理.then((前の処理の戻り値) => 終わった後にやる処理)処理A()
.then(resultA => 処理B(resultA)) // ✅ 処理Aの返り値を処理Bに渡す
.then(resultB => 処理C(resultB)); // ✅ 処理Bの返り値を処理Cに渡す
.catchはPromise が失敗時の処理
📝 比較まとめ
| 項目 | .then() | async / await |
|---|---|---|
| 書き方 | チェーン式 | 普通の順番で書ける |
| エラー処理 | .catch() | try-catch |
| 読みやすさ | やや複雑 | シンプルで直感的 |
| 適している場面 | 単純な処理 | 複数の処理を順番に書きたいとき |
