JavaScript | 第14章「プロミスの使用」

JavaScript「プロミスの使用」要点まとめ

Promiseの基本

• Promise（プロミス）とは：
  「非同期処理の結果（成功 or 失敗）」を表すオブジェクト。
  → まだ終わっていない処理の「将来の値」を扱う仕組み。

Promiseの3つの状態

基本メソッド

⚠️ すべての .then / .catch は 新しい Promise を返す
→ チェーン（thenチェーン）で次の処理をつなげられる。

Promiseチェーン

複数の非同期処理を順番に実行できる。

doSomething()
  .then(result => doSomethingElse(result))
  .then(final => console.log(final))
  .catch(error => console.error(error));

doSomething()
  .then(result => doSomethingElse(result))
  .then(final => console.log(final))
  .catch(error => console.error(error));

✅ ネストせずに順番の処理を書ける
✅ エラーは最後の .catch() で一括処理

Promiseを自分で作る

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

wait(1000).then(() => console.log("1秒後に実行"));

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

wait(1000).then(() => console.log("1秒後に実行"));

new Promise((resolve, reject) => { ... })
の中で成功なら resolve(), 失敗なら reject() を呼ぶ。

Promiseの合成

複数の非同期処理をまとめて扱う。

よくある注意点

• .then の中でPromiseを返さないと次の .then が待たずに実行される。
• .catch の後は成功扱いで次の .then が実行される（再スローしない限り）。
• 非同期処理の完了はイベントループの「マイクロタスク」で後回しにされる。
• 乱用せず、async / await と組み合わせるとより読みやすくなる。

まとめイメージ

Promise
 ├─ pending（待機中）
 ├─ fulfilled → then() に進む
 └─ rejected → catch() に進む
                  ↓
               finally()（どちらでも最後に）