JavaScript | 複数の fetch を並列で実行 → どれか失敗しても安全に処理を続ける

実務でも「finally の中で return や throw を書いてしまう」ミスは危険かつ気づきにくいため、
ESLint（JavaScriptの静的解析ツール）で検出できるようにしておくのが効果的です。

目的

「finally の中で return や throw を禁止する」ESLintルールを設定して、
コードレビューの前に自動チェックできるようにする。

サンプル構成

• .eslintrc.json — ESLint 設定ファイル
• bad.js — NGなコード例（finally内のreturn/throwあり）
• good.js — OKなコード例

1. .eslintrc.json 設定例

以下をプロジェクトのルートに作成：

{
  "env": {
    "es2021": true,
    "browser": true
  },
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-unsafe-finally": "error"
  }
}

{
  "env": {
    "es2021": true,
    "browser": true
  },
  "extends": ["eslint:recommended"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-unsafe-finally": "error"
  }
}

📘 no-unsafe-finally
このルールが「finally 内で return / throw / break / continue」などを禁止します。

2. 悪いコード例（エラーになる）

// bad.js
async function getData() {
  try {
    console.log("処理中...");
    throw new Error("APIエラー");
  } catch (err) {
    console.error("catch:", err.message);
    throw err;
  } finally {
    console.log("finally中");
    return "finallyのreturn"; // ← ESLintがエラーを検出！
  }
}

// bad.js
async function getData() {
  try {
    console.log("処理中...");
    throw new Error("APIエラー");
  } catch (err) {
    console.error("catch:", err.message);
    throw err;
  } finally {
    console.log("finally中");
    return "finallyのreturn"; // ← ESLintがエラーを検出！
  }
}

🔍 ESLint 実行結果：

$ npx eslint bad.js
bad.js
  10:5  error  Unsafe usage of ReturnStatement in finally block  no-unsafe-finally

✖ 1 problem (1 error, 0 warnings)

💥 no-unsafe-finally がしっかり検出してくれます。

3. 良いコード例（OK）

// good.js
async function getData() {
  try {
    console.log("処理中...");
    const res = await fetch("https://example.com");
    return await res.json();
  } catch (err) {
    console.error("catch:", err.message);
    throw err;
  } finally {
    console.log("finally: 後処理（ローディング解除など）");
  }
}

// good.js
async function getData() {
  try {
    console.log("処理中...");
    const res = await fetch("https://example.com");
    return await res.json();
  } catch (err) {
    console.error("catch:", err.message);
    throw err;
  } finally {
    console.log("finally: 後処理（ローディング解除など）");
  }
}

✅ finally 内は「後処理のみ」なので、ESLintエラーなし。

補足：ルールの意味

no-unsafe-finally は次の構文を禁止します：

ワンポイント（プロ向けTips）

• TypeScript + ESLint を使うなら、
  @typescript-eslint/eslint-plugin にも同名ルールがある（互換性あり）。
• VSCode では ESLint プラグインを入れると、
  リアルタイムで波線警告が出るので初心者にも安心。

まとめ