非同期処理

// イベントループの動作順序
console.log("1: 同期処理");

setTimeout(() => {
  console.log("2: マクロタスク（setTimeout）");
}, 0);

Promise.resolve().then(() => {
  console.log("3: マイクロタスク（Promise）");
});

console.log("4: 同期処理");

// 出力順序:
// 1: 同期処理
// 4: 同期処理
// 3: マイクロタスク（Promise）
// 2: マクロタスク（setTimeout）

// コールバック地獄の例
function fetchUser(id, callback) {
  setTimeout(() => callback({ id, name: "田中" }), 100);
}

function fetchPosts(userId, callback) {
  setTimeout(() => callback([{ title: "記事1" }]), 100);
}

function fetchComments(postId, callback) {
  setTimeout(() => callback([{ text: "コメント1" }]), 100);
}

// ネストが深くなる（コールバック地獄）
fetchUser(1, (user) => {
  fetchPosts(user.id, (posts) => {
    fetchComments(posts[0].title, (comments) => {
      console.log(user, posts, comments);
      // さらにネストが続く...
    });
  });
});

// Promise の作成
const fetchData = new Promise((resolve, reject) => {
  const success = true;
  setTimeout(() => {
    if (success) {
      resolve({ id: 1, name: "データ" });
    } else {
      reject(new Error("取得に失敗しました"));
    }
  }, 100);
});

// then / catch / finally チェーン
fetchData
  .then(data => {
    console.log("成功:", data.name); // "成功: データ"
    return data.id; // 次の then に渡す
  })
  .then(id => {
    console.log("ID:", id); // "ID: 1"
  })
  .catch(error => {
    console.error("エラー:", error.message);
  })
  .finally(() => {
    console.log("処理完了"); // 成功・失敗問わず実行
  });

// Promise チェーンと async/await の比較

// Promise チェーン版
function fetchUserPromise(id) {
  return fetch(`/api/users/${id}`)
    .then(res => res.json())
    .then(user => fetch(`/api/posts?userId=${user.id}`))
    .then(res => res.json())
    .catch(err => console.error(err));
}

// async/await 版（同じ処理がより読みやすい）
async function fetchUserAsync(id) {
  try {
    const userRes = await fetch(`/api/users/${id}`);
    const user = await userRes.json();
    const postsRes = await fetch(`/api/posts?userId=${user.id}`);
    const posts = await postsRes.json();
    return posts;
  } catch (err) {
    console.error(err);
  }
}

function wait(ms) {
  return new Promise(r => setTimeout(r, ms));
}

// 逐次実行: 合計 300ms かかる
async function sequential() {
  await wait(100);
  await wait(100);
  await wait(100);
  console.log("逐次完了");
}

// 並列実行: 最長の 100ms で完了
async function parallel() {
  await Promise.all([
    wait(100),
    wait(100),
    wait(100)
  ]);
  console.log("並列完了");
}

const fast = new Promise(r => setTimeout(() => r("fast"), 100));
const slow = new Promise(r => setTimeout(() => r("slow"), 300));
const fail = new Promise((_, reject) =>
  setTimeout(() => reject(new Error("failed")), 200)
);

// Promise.all: 全て成功するか、1つでも失敗したら reject
Promise.all([fast, slow])
  .then(results => console.log("all:", results));
// all: ["fast", "slow"]

// Promise.race: 最初に完了（成功 or 失敗）した結果
Promise.race([fast, slow])
  .then(result => console.log("race:", result));
// race: "fast"

// Promise.allSettled: 全ての結果（成功・失敗問わず）
Promise.allSettled([fast, fail, slow])
  .then(results => console.log("allSettled:", results));
// allSettled: [
//   { status: "fulfilled", value: "fast" },
//   { status: "rejected", reason: Error("failed") },
//   { status: "fulfilled", value: "slow" }
// ]

// Promise.any: 最初に成功した結果
Promise.any([fail, fast, slow])
  .then(result => console.log("any:", result));
// any: "fast"

// 実用例: タイムアウト付き fetch
function fetchWithTimeout(url, timeoutMs) {
  const fetchPromise = fetch(url).then(r => r.json());
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => reject(new Error("タイムアウト")), timeoutMs)
  );
  return Promise.race([fetchPromise, timeoutPromise]);
}

// 実用例: 複数 API から最初に応答したものを使う
function fetchFromMirrors(mirrors) {
  return Promise.any(
    mirrors.map(url => fetch(url).then(r => r.json()))
  );
}