JavaScriptの非同期処理（Promise、async/await）

Chrome拡張機能を開発する際、JavaScriptの非同期処理は非常に重要な概念です。API通信、ファイルの読み込み、ストレージアクセスなど多くの処理が非同期で行われるため、Promiseやasync/awaitの理解は欠かせません。

---

1. 非同期処理とは

JavaScriptは基本的にシングルスレッドで動作するため、長時間かかる処理（ネットワーク通信やファイルアクセスなど）を同期的に実行すると、ユーザーインターフェースがブロックされてしまいます。
このような問題を防ぐために、「非同期処理」を使い、時間のかかる処理をバックグラウンドで行います。

---

2. Promise（プロミス）

概要

Promiseは、非同期処理の結果を将来受け取るためのオブジェクトです。以下の3つの状態を持ちます。

使用例

javascript
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("データ取得完了");
    }, 1000);
  });
}

fetchData().then(result => {
  console.log(result); // => データ取得完了
}).catch(error => {
  console.error(error);
});

---

3. async/await

概要

async/awaitは、Promiseをより直感的で同期的に見える形で扱うための構文です。

• asyncキーワードを付けた関数は必ずPromiseを返します。

• awaitは、その場でPromiseの解決を「待つ」ことができます。

使用例

javascript
async function run() {
  try {
    const result = await fetchData();
    console.log(result); // => データ取得完了
  } catch (error) {
    console.error(error);
  }
}

run();

---

4. Chrome拡張機能との関係

Chrome拡張では、以下のような場面で非同期処理が使われます。

• chrome.storage.local.get() などのストレージAPI

• fetch() を使った外部APIとの通信

• chrome.tabs.query() などのタブ操作

例：chrome.storage API（Promise化）

MV3（Manifest V3）では、chrome.storageなどのAPIはPromiseを返すようになっています（chrome.scriptingなども同様）。

javascript
async function getFromStorage(key) {
  const result = await chrome.storage.local.get(key);
  return result[key];
}

---

5. 注意点

• awaitは**async関数の中でのみ**使用可能です。

• エラーハンドリングを適切に行うためには、try...catchを使うことが推奨されます。

• 非同期処理を連続して行う場合は、awaitで1つずつ待つか、Promise.allを使って並列処理も検討すべきです。

---

まとめ

非同期処理の理解は、Chrome拡張機能開発において、信頼性の高いコードを書くために不可欠です。必要に応じてPromiseとasync/awaitを使い分けましょう。