JavaScript

The Promise constructor in JavaScript is an object that represents the eventual success or failure of an asynchronous operation and manages the resulting value.

Promise [constructor]

　Promise（プロミス）コンストラクターは、非同期処理を扱うためのオブジェクトです。非同期処理とは、プログラムがすぐに結果を返さず、時間がかかる処理のことです。たとえば、ネットワークからデータを取得する場合などが該当します。

Promiseコンストラクターの基本

　Promiseを使うと、将来の結果を表現できます。Promiseは次の3つの状態を持ちます。

Pending（保留中）: まだ完了も失敗もしていない初期の状態。
Fulfilled（成功）: 非同期処理が成功し、結果が得られた状態。
Rejected（失敗）: 非同期処理が失敗し、エラーが発生した状態。

Promiseの使い方

　Promiseは次のようにして作成します。

JavaScript

let promise = new Promise(function(resolve, reject) {
	// 非同期処理をここに書きます
	let success = true; // これは処理が成功したかどうかを表すダミー変数です
	
	if (success) {
		resolve("処理が成功しました！"); // 成功時の処理
	} else {
		reject("処理が失敗しました。"); // 失敗時の処理
	}
});

　この例では、resolveは処理が成功したときに呼び出され、rejectは処理が失敗したときに呼び出されます。

Sample

　Promiseを使って非同期処理を行い、その結果を Webページに表示するサンプルコードを示します。この例では、フェイクAPIを呼び出してデータを取得し、その結果を表示します。

Promiseの例

ここに結果を表示

HTML

<p class="h8">Promiseの例</p>
<button id="fetchButton">データを取得</button>
<p id="result" class="result">ここに結果を表示</p>
<script>
	<!-- JavaScript code here -->
</script>

JavaScript

document.getElementById("fetchButton").addEventListener("click", function() {
	let resultDiv = document.getElementById("result");
	resultDiv.textContent = "データを取得中...";

	// フェイクAPI呼び出しをPromiseでシミュレート
	let fetchData = new Promise(function(resolve, reject) {
		setTimeout(function() { // 非同期処理としてタイマーを使います
			let success = true; // ダミーの成功条件

			if (success) {
				resolve("データの取得に成功しました！");
			} else {
				reject("データの取得に失敗しました。");
			}
		}, 2000); // 2秒後に結果を返す
	});

	fetchData.then(function(successMessage) {
		resultDiv.textContent = successMessage; // 成功メッセージを表示
	}).catch(function(errorMessage) {
		resultDiv.textContent = errorMessage; // エラーメッセージを表示
	});
});

CSS

.h8 {
	font-size: larger;
	font-weight: bold;
}
button {
	display: inline-block;
	padding: 1ex 2ex;
	margin: 1ex;
	font-size: larger;
	box-shadow: 0.2ex 0.2ex 0.3ex;
}

　このコードでは、ボタンをクリックすると、２秒後にデータ取得の結果を表示します。Promiseを使って非同期処理をシミュレートし、成功時と失敗時のメッセージを適切に表示しています。

　このように Promiseを使うことで、非同期処理を直感的に扱えるようになります。また、実際に動作するサンプルコードを使うことで、Promiseの動作を視覚的に確認することができます。