Promiseや非同期処理に関する不明点をまとめ

1. async と await の基本的な動作

質問

async と await の中の処理はどのように動作しますか？

回答

• async 関数内で使用される await は、非同期処理の完了を待機します。
• await の中は非同期処理である必要があります。
• async 関数全体では、await を順番に実行してから次の処理に進みます。

例

async function example() {
  console.log("Start");
  const result = await new Promise((resolve) => setTimeout(() => resolve("Done"), 1000));
  console.log(result); // 1秒後に "Done" が表示
  console.log("End");
}
example();
// 出力順: "Start" -> 1秒待機 -> "Done" -> "End"

---

2. await 内の関数が Promise を返さない場合

質問

await の中のメソッドが Promise を返さない場合はどうなりますか？

回答

• await に渡される値が Promise でない場合、その値が即座に返されます。
• 非同期処理として機能しません。

例

function notAPromise() {
  return "Immediate Value";
}

async function example() {
  const result = await notAPromise(); // 非同期処理として扱われない
  console.log(result); // "Immediate Value"
}
example();

---

3. 独自の関数を await で使うには

質問

独自の関数を await で使うにはどうすればいいですか？

回答

• 関数は必ず Promise を返す必要があります。
• Promise を返さない場合は、Promise.resolve でラップするか、関数を async にする必要があります。

例

function myAsyncFunction() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Done!"), 1000);
  });
}

async function example() {
  const result = await myAsyncFunction(); // Promise を返す関数
  console.log(result); // 1秒後に "Done!" が表示
}
example();

---

4. Promise がエラーを返した場合のエラーハンドリング

質問

Promise がエラーを返した場合、await で catch できますか？

回答

• await は、Promise が Rejected 状態になった場合にエラーをスローします。
• try-catch を使用してエラーをキャッチできます。

例

async function example() {
  try {
    const result = await new Promise((_, reject) => {
      reject("Something went wrong!"); // エラーを発生
    });
    console.log(result); // 実行されない
  } catch (error) {
    console.error("Caught an error:", error); // "Caught an error: Something went wrong!" が表示
  }
}
example();

---

5. Promise オブジェクトは変化しますか？

質問

Promise オブジェクトは状態が変化しますか？

回答

• Promise オブジェクト自体は不変です。
• 内部の状態が Pending（保留中）から Fulfilled（解決済み）または Rejected（拒否済み）に一度だけ変化します。

例

const promise = new Promise((resolve) => {
  setTimeout(() => resolve("Done"), 1000);
});

console.log(promise); // 初期状態: Promise { <pending> }

setTimeout(() => {
  console.log(promise); // 解決後: Promise { 'Done' }
}, 1100);

---

6. Promise の状態をキャッチしない場合

質問

Promise のエラーをキャッチしないとどうなりますか？

回答

• await のエラーをキャッチしない場合、エラーは呼び出し元に伝播します。
• エラーを処理しないと、アプリケーションがクラッシュする可能性があります。

例

async function example() {
  const result = await new Promise((_, reject) => {
    reject("Something went wrong!");
  });
  console.log(result); // 実行されない
}

example().catch((error) => {
  console.error("Caught an error in the calling code:", error);
});

---

まとめ

質問内容	回答
async と await の基本動作	await は非同期処理の完了を待機し、async 内で順序を保証します。
await がPromiseを返さない場合の挙動	即座に値が返され、非同期として機能しません。
独自の関数を await で使う方法	関数が Promise を返す必要があります。
Promise がエラーを返した場合の処理方法	try-catch を使うか、呼び出し元で .catch() を使ってエラーを処理します。
Promise オブジェクトは変化するか？	オブジェクトは不変で、状態が Pending → Fulfilled/Rejected に一度だけ変化します。
エラーをキャッチしないとどうなるか	エラーが呼び出し元に伝播し、処理されなければクラッシュの原因になります。

これにより、Promiseや非同期処理に関する重要なポイントをすべて把握できます！