const rawInput = '{ "name": "ホン" }';   // 正しいJSON
// const rawInput = '壊れた文字列';     // ← この行を有効にすると catch が実行される

try {
    const data = JSON.parse(rawInput);   // 💥 失敗するとここで throw
    console.log('成功:', data);          // 成功: { name: 'ホン' }
} catch (err) {
    console.error('パース失敗:', err.message);
    // 失敗時 → "パース失敗: Unexpected token ... in JSON at ..."
}

// 💡 try の中で throw が発生すると → 即座に catch へジャンプ
//    throw がなければ catch はスキップされる

let conn;
try {
    conn = await db.connect();
    return await conn.query('SELECT ...');
} catch (err) {
    log.error(err);
    throw err;     // 再スロー
} finally {
    if (conn) conn.release();   // クリーンアップ
}

try {
    null.foo;
} catch (e) {
    console.log(e.name);     // 'TypeError'
    console.log(e.message);  // "Cannot read properties of null..."
    console.log(e.stack);    // 呼び出しスタック — *デバッグの核心*
    console.log(e.cause);    // 原因チェイニング (ES2022)
}

class AppError extends Error {
    constructor(message, code) {
        super(message);
        this.name = 'AppError';
        this.code = code;
    }
}

class NotFoundError extends AppError {
    constructor(resource) {
        super(`${resource} を見つけられません`, 'NOT_FOUND');
        this.statusCode = 404;
    }
}

class ValidationError extends AppError {
    constructor(field) {
        super(`${field} の検証に失敗しました`, 'VALIDATION');
        this.statusCode = 400;
    }
}

// 🧪 ダミー関数 — 入力に応じて異なるエラーをスロー (コピペ可能)
async function createUser(input) {
    if (!input.email) throw new ValidationError('email');
    if (input.id === 999) throw new NotFoundError('User');
    if (input.crash) throw new Error('DB ダウン');
    return { ok: true };
}

// シミュレーション — Express res オブジェクトを模倣
const res = {
    status: (code) => ({
        json: (body) => console.log(`📤 HTTP ${code}`, body),
        end:  ()     => console.log(`📤 HTTP ${code}`)
    })
};
const log = { error: console.error };

// ▶️ さまざまな入力で分岐を確認
(async () => {
    for (const input of [{ email: '' }, { id: 999, email: 'a' }, { crash: true, email: 'a' }]) {
        try {
            await createUser(input);
        } catch (e) {
            // 🔀 エラーの種類に応じて異なる応答
            if (e instanceof ValidationError) {
                res.status(400).json({ field: e.message });        // 入力エラー
            } else if (e instanceof NotFoundError) {
                res.status(404).end();                              // 見つからない
            } else {
                log.error('Unexpected:', e.message);
                res.status(500).end();                              // サーバーエラー
            }
        }
    }
})();

// 📤 出力:
//   HTTP 400 { field: 'email' }
//   HTTP 404
//   Unexpected: DB ダウン
//   HTTP 500

// 💡 instanceof で「このエラーがどのクラスのインスタンスであるか」を確認
//    → 同じ catch ブロックで種類ごとに異なる処理が可能

// 🧪 ダミーの低レベル関数 — 常に失敗
async function lowLevelCall() {
    throw new Error('Connection refused');
}

async function loadProduct() {
    try {
        await lowLevelCall();
    } catch (lowLevel) {
        // 🔗 元のエラーを cause として「チェイン」して新しいエラーでラップ
        throw new Error('商品検索失敗', { cause: lowLevel });
    }
}

(async () => {
    try {
        await loadProduct();
    } catch (e) {
        console.error(e.message);         // "商品検索失敗"
        console.error(e.cause.message);   // "Connection refused"   ← 元が残っている！
    }
})();

async function fetchUser(id) {
    try {
        const res = await fetch(`/api/users/${id}`);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return await res.json();
    } catch (err) {
        console.error('失敗:', err);
        return null;
    }
}

// 🧪 ダミー関数 — 50ms後に失敗
const fetchUser = (id) => new Promise((_, reject) =>
    setTimeout(() => reject(new Error('User not found: ' + id)), 50)
);
const display = (u) => console.log('表示:', u);

fetchUser(1)
    .then(u   => display(u))
    .catch(err => console.error('エラー:', err.message));   // 📤 "エラー: User not found: 1"

async function getUser(id) {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();          // エラーは呼び出し元に委任
}

// 呼び出し元が処理
try {
    const u = await getUser(1);
} catch (e) { ... }

const items = [1, 2, 3];
const process = (n) => new Promise(r => setTimeout(() => {
    console.log('処理済み:', n);
    r();
}, 100));

// ❌ forEach はコールバックのPromiseを"待たない"
items.forEach(async item => {
    await process(item);
});
console.log('完了');

// 📤 出力順序:
//   完了              ← 🙀 forEach がすぐに終わって先に表示される！
//   処理済み: 1
//   処理済み: 2
//   処理済み: 3

const items = [1, 2, 3];
const process = (n) => new Promise(r =>
    setTimeout(() => { console.log('処理:', n); r(); }, 50)
);

(async () => {
    // ✅ 順次 — 1つ終わってから次が始まる (合計150ms)
    console.time('順次');
    for (const item of items) {
        await process(item);
    }
    console.timeEnd('順次');   // 順次: ~150ms

    // ✅ 並列 — 3つ同時に始まる (合計 ~50ms)
    console.time('並列');
    await Promise.all(items.map(item => process(item)));
    console.timeEnd('並列');   // 並列: ~50ms
})();

<ErrorBoundary fallback={<div>エラー発生</div>}>
    <MyComponent />
</ErrorBoundary>