この記事で分かること
Promiseとは何か（非同期処理の基本）Promiseの3つの状態（pending/fulfilled/rejected）then/catchの使い方- コールバック地獄を解消する仕組み
- 実務での
Promiseの使いどころ
Promise は、JavaScript の非同期処理を安全かつ分かりやすく扱うために導入された重要な仕組みです。
この記事では、Promise の基本概念から3つの状態、then / catch の使い方、そしてコールバック地獄を解消する仕組みまで、非同期処理の基礎として必ず押さえておきたいポイントを分かりやすく解説します。
Promiseとは？
Promise（プロミス） は、JavaScript の非同期処理を扱うための仕組みです。
「いつ終わるかわからない処理」を安全に扱うために使われます。
例えば以下のような処理は非同期です。
- API通信（
fetch/ XHR） - ファイル読み込み
setTimeout
Promise を使うことで、非同期処理の完了後に
then() で続きの処理を書けるようになります。
Promise の3つの状態
| 状態 | 意味 |
|---|---|
pending |
処理中 |
fulfilled |
成功（resolve） |
rejected |
失敗（reject） |
Promise は「成功」か「失敗」のどちらかに必ず落ち着きます。
Promise を自分で作る基本構文
const promise = new Promise((resolve, reject) => {
const success = true;
if (success) {
resolve("成功しました");
} else {
reject("失敗しました");
}
});
resolve → 成功
reject → 失敗
を表します。
then / catch の使い方
promise
.then(result => {
console.log("成功:", result);
})
.catch(error => {
console.log("失敗:", error);
});
then は成功時、catch は失敗時に実行されます。
非同期処理の例：setTimeout を Promise 化
function wait(ms) {
return new Promise(resolve => {
setTimeout(() => resolve(ms + "ms 経過"), ms);
});
}
wait(1000).then(msg => console.log(msg));
Promise を使うと、非同期処理を「順番に」書けるようになります。
Promise チェーン（順番に処理する）
wait(1000)
.then(() => wait(1000))
.then(() => wait(1000))
.then(() => console.log("合計3秒経過"));
Promise を使うと、
コールバック地獄（callback hell） を避けられます。
コールバック地獄とは？
昔の非同期処理は以下のようにネストが深くなりがちでした。
// コールバック地獄の例
func1(() => {
func2(() => {
func3(() => {
console.log("完了");
});
});
});
Promise を使うと、これがフラットに書けます。
func1()
.then(func2)
.then(func3)
.then(() => console.log("完了"));
Promise は fetch と相性が良い
fetch は Promise を返すため、
then / catch で自然に扱えます。
fetch("/api")
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
Promise に関するよくある質問（FAQ）
Promise は何のために使うのですか？
非同期処理を安全に扱い、処理の完了後に続きの処理を書けるようにするためです。
then と catch の違いは何ですか？
then は成功時、catch は失敗時に実行されます。
Promise と async / await の関係は？
async / await は Promise をより読みやすく書くための構文です。Promise が土台になっています。
Promise は今でも使われていますか？
はい。fetch や async / await の内部でも Promise が使われており、現代でも必須の知識です。
まとめ
Promise は JavaScript の非同期処理の基礎であり、
fetch や async / await を理解するための土台です。
Promiseは「成功」か「失敗」の結果を持つthen→ 成功時、catch→ 失敗時- コールバック地獄を解消する
fetchなどの非同期処理で必須
次に学ぶ async / await と組み合わせることで、
さらに読みやすい非同期コードが書けるようになります。
