JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説

JavaScriptのPromiseとは？

Promise（プロミス）は、JavaScriptで非同期処理を扱うためのオブジェクトです。Promiseが生成された時点では、最終的な結果の値はまだ確定していません。処理が完了した将来のタイミングで、成功または失敗の結果を受け取ることができます。これにより、APIからのデータ取得やファイル読み込みなど、時間のかかる処理を効率的に記述できます。

Promiseの3つの状態

Promiseは、必ず以下の3つの状態のいずれかを持ちます。

  • pending（待機）：初期状態。処理がまだ完了していない状態です。
  • fulfilled（履行）：処理が正常に完了し、結果の値が利用可能になった状態です。
  • rejected（拒否）：処理が失敗し、エラーが発生した状態です。

一度 fulfilled または rejected に移行したPromiseは、それ以上状態が変わることはありません。

Promiseの実装例

以下は、fetch APIとPromiseを組み合わせて、APIからユーザー名を取得して表示するJavaScriptのコード例です。

<!DOCTYPE html>
<html lang="ja">
<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() メソッドを使って外部APIからユーザーデータを取得します。fetch() はPromiseを返すため、.then() メソッドをチェーンして処理を記述できます。最初の .then() でレスポンスをJSON形式に変換し、次の .then() で各ユーザーの username を画面に追加表示します。処理中にエラーが発生した場合は、.catch() メソッドがエラーを捕捉し、アラートで通知します。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説

「CLICK HERE」ボタンをクリックすると、APIから取得したユーザー名の一覧が表示されます。

JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説

まとめ

Promiseを使うことで、コールバック関数のネスト（コールバック地獄）を避け、可読性の高い非同期処理を書くことができます。さらに async/await 構文と組み合わせれば、同期処理のような自然な記述も可能になります。モダンなJavaScript開発において、Promiseは欠かせない基礎概念といえるでしょう。

  1. JavaScriptの関数式（Function Expression）とは？特徴と使い方を解説

    JavaScriptにおける関数式（Function Expression）とは、関数を変数に代入して定義する方法のことです。代入された関数は、その変数名を使って後から呼び出すことができます。 関数式の主な特徴 関数を変数に格納し、変数名を指定して呼び出せる 通常の関数宣言（function declaration）と異なり、ホイスティング（巻き上げ）が行われないため、定義よりも前に呼び出すことはできない 多くの場合、名前を持たない「無名関数（匿名関数）」として定義される コールバック関数や即時実行関数（IIFE）など、さまざまな場面で活用できる この「ホイスティングされない」という点が重

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2