JavaScriptのPromise（プロミス）とは？非同期処理の基本と使い方を解説
JavaScriptのPromise（プロミス）は、作成された時点ではまだ値が確定していない非同期処理を扱うためのオブジェクトです。APIリクエストやファイルの読み込みなど、完了まで時間がかかる処理について、「いずれ結果を受け取る」という約束を表現します。
Promiseは、以下の3つの状態を持ちます。
- pending（保留中）：処理がまだ完了しておらず、成功も失敗も確定していない初期状態
- fulfilled（履行済み）：処理が正常に完了し、結果の値が利用できる状態
- rejected（拒否済み）：処理が失敗し、エラーの理由が利用できる状態
一度fulfilledまたはrejectedに遷移したPromiseはsettled（確定済み）となり、それ以降状態が変わることはありません。
Promiseのコード例
以下は、fetch APIとPromiseチェーンを使って、ユーザー名の一覧を取得・表示するサンプルコードです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript Promises</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、Promiseを使ってユーザー名が表示されます
</h3>
<script>
let sampleEle = document.querySelector(".sample");
document.querySelector(".Btn").addEventListener("click", () => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((result) => {
result.forEach((element) => {
sampleEle.innerHTML += element.username + "<br>";
});
})
.catch((err) => alert(err));
});
</script>
</body>
</html>コードのポイント
- fetch()メソッドはPromiseを返すため、then()でレスポンスを受け取ることができます
- response.json()もPromiseを返すため、then()を連結（チェーン）して段階的に処理を進められます
- catch()を使えば、チェーン内のどの段階で発生したエラーも一括して捕捉できます
実行結果
ページを開いた直後の初期画面は以下のとおりです。
「CLICK HERE」ボタンをクリックすると、Promise経由で取得したユーザー名が一覧で表示されます。
-
JavaScriptのWeakSetとは？特徴と主要メソッド、サンプルコードをわかりやすく解説
JavaScriptのWeakSet（ウィークセット）は、オブジェクトを格納するためのコレクションです。Setと同様に、同じオブジェクトを重複して保存することはできません。WeakSetの主な特徴弱い参照で保持する：WeakSet内のオブジェクトへの参照が他に存在しなくなると、ガベージコレクションによって自動的にメモリから解放されます。そのため、メモリリークを防ぎたい場面で役立ちます。オブジェクトのみ格納可能：数値や文字列などのプリミティブ値は追加できません。列挙できない：Setのようなsizeプロパティや反復処理の仕組みを持たず、格納されている要素の一覧を取得することはできません。WeakS
-
JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説
JavaScriptのPromiseとは？Promise（プロミス）は、JavaScriptで非同期処理を扱うためのオブジェクトです。Promiseが生成された時点では、最終的な結果の値はまだ確定していません。処理が完了した将来のタイミングで、成功または失敗の結果を受け取ることができます。これにより、APIからのデータ取得やファイル読み込みなど、時間のかかる処理を効率的に記述できます。Promiseの3つの状態Promiseは、必ず以下の3つの状態のいずれかを持ちます。pending（待機）：初期状態。処理がまだ完了していない状態です。fulfilled（履行）：処理が正常に完了し、結果の値が