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



### **1. `async` と `await` の基本的な動作**
#### 質問
`async` と `await` の中の処理はどのように動作しますか？

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

#### 例
```javascript
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` でない場合、その値が即座に返されます。
- 非同期処理として機能しません。

#### 例
```javascript
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` にする必要があります。

#### 例
```javascript
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` を使用してエラーをキャッチできます。

#### 例
```javascript
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`（拒否済み）に一度だけ変化します。

#### 例
```javascript
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` のエラーをキャッチしない場合、エラーは呼び出し元に伝播します。
- エラーを処理しないと、アプリケーションがクラッシュする可能性があります。

#### 例
```javascript
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や非同期処理に関する重要なポイントをすべて把握できます！