Promise（プロミス）とは？
「非同期処理（時間がかかる処理）を、順番どおりに扱うための仕組み」
例で理解しよう
console.log("A");
setTimeout(() => console.log("B"), 1000);
console.log("C");
出力順：
A
C
（1秒後）B
setTimeout は「非同期処理」。
JavaScript は「B」を待たずに次へ進む。
Promise は、このような非同期の完了を待ちたいときに使う。
Promise の基本構文
const promise = new Promise((resolve, reject) => {
// 時間のかかる処理
setTimeout(() => {
const success = true;
if (success) resolve("成功しました！");
else reject("エラーが起きました");
}, 1000);
});
promise
.then((result) => {
console.log(result); // 成功時
})
.catch((error) => {
console.error(error); // 失敗時
})
.finally(() => {
console.log("処理が完了しました");
});
図解：Promiseの流れ
┌────────┐
│ new Promise()│ ← 非同期処理をセット
└───┬────┘
│
▼
resolve() → then() で処理を続ける
reject() → catch() でエラー処理
finally() → 最後に必ず実行
実践1：データ取得のような流れ
function fetchData() {
return new Promise((resolve) => {
console.log("サーバーにデータを要求中...");
setTimeout(() => {
resolve("データを受け取りました！");
}, 1500);
});
}
fetchData()
.then((message) => {
console.log(message);
})
.finally(() => {
console.log("通信終了");
});
出力：
サーバーにデータを要求中...
（1.5秒後）
データを受け取りました！
通信終了
実践2：エラー処理を含む例
function fetchData() {
return new Promise((resolve, reject) => {
const success = Math.random() > 0.5;
setTimeout(() => {
if (success) resolve("✅ データ取得成功");
else reject("❌ データ取得失敗");
}, 1000);
});
}
fetchData()
.then((result) => console.log(result))
.catch((error) => console.error(error))
.finally(() => console.log("完了"));
結果（実行ごとに変わる）：
✅ データ取得成功
完了
または
❌ データ取得失敗
完了
Promise チェーン
then() は Promise を返すので、連続して書ける！
getUser()
.then(showUserInfo)
.then(loadProfileImage)
.then(showComplete)
.catch(handleError);
イメージ：
getUser → showUserInfo → loadProfileImage → showComplete
（どこかで失敗したら catch に飛ぶ）
async / await（Promiseをもっと簡単に）
async function loadData() {
try {
const result = await fetchData();
console.log(result);
} catch (error) {
console.error(error);
} finally {
console.log("完了");
}
}
loadData();
意味：
「await は Promise が完了するまで待つ」
→ 見た目が同期処理っぽく書ける！
模範課題セット
課題1
Promiseを使って「2秒後に”Hello”と表示」させてください。
模範解答：
const p = new Promise((resolve) => {
setTimeout(() => resolve("Hello"), 2000);
});
p.then((msg) => console.log(msg));
課題2
Promiseを使って「成功または失敗をランダムに出す」関数を作りましょう。
模範解答：
function randomTask() {
return new Promise((resolve, reject) => {
const ok = Math.random() > 0.5;
setTimeout(() => {
if (ok) resolve("成功！");
else reject("失敗！");
}, 1000);
});
}
randomTask()
.then((msg) => console.log(msg))
.catch((err) => console.error(err));
課題3（発展）
Promiseチェーンを使って以下を順番に出力してください。
1️⃣ 「処理開始」
2️⃣ 1秒後「読み込み中…」
3️⃣ さらに1秒後「完了！」
模範解答：
console.log("処理開始");
new Promise((resolve) => {
setTimeout(() => resolve("読み込み中..."), 1000);
})
.then((msg) => {
console.log(msg);
return new Promise((resolve) => {
setTimeout(() => resolve("完了！"), 1000);
});
})
.then((msg) => console.log(msg));
まとめ図
Promise とは：
┌───────────────────────────┐
│ 「将来の完了や失敗を表す箱」 │
└───────────────────────────┘
状態の流れ：
Pending → Fulfilled（成功） → then()
↘ Rejected（失敗） → catch()
finally() はどちらでも実行