第5章: JavaScriptで非同期処理とAjax

JavaScriptは、ウェブページにインタラクティブな要素を追加し、ユーザーがページをリロードせずにデータを取得したり、サーバーと通信したりすることを可能にします。この章では、非同期処理とAjaxの概念を理解し、コールバック、プロミス、そしてasync/awaitの3つの手法を通じて、データの取得方法について学びます。また、Fetch APIを使った外部APIとの連携方法を解説します。

---

5.1 非同期処理とは？

JavaScriptは基本的にシングルスレッドの言語で、コードが上から下へと順に実行される特性を持ちます。しかし、非同期処理を利用すると、他の処理が完了するのを待たずに次の処理に進むことができます。これにより、ユーザーがブラウザでページをリロードせずに、リアルタイムで情報を表示したり、反応速度の高いアプリケーションを作成したりできます。

5.2 コールバック

最も基本的な非同期処理の方法は「コールバック」です。コールバックは関数を引数として別の関数に渡し、処理が完了したらその関数を呼び出す仕組みです。

たとえば、サーバーからデータを取得し、そのデータを画面に表示する場合を考えましょう。以下のコードは、非同期処理にコールバックを利用した例です。

function fetchData(callback) {
    setTimeout(() => {
        const data = "データ取得完了！";
        callback(data);
    }, 2000);
}

function displayData(data) {
    console.log(data);
}

fetchData(displayData);

• fetchData関数は、非同期処理を模倣するためにsetTimeoutを使っています。
• displayData関数は、コールバックとしてfetchDataに渡され、データ取得が完了したら呼び出されます。

コールバックの欠点
コールバックを多用するとコードが複雑になり、コールバック地獄と呼ばれるネストが深くなりすぎて読みづらいコードが生まれやすいという問題があります。これを解決するために登場したのが、次に解説する「プロミス」です。

5.3 プロミス (Promise)

プロミスは、非同期処理の結果が「成功」か「失敗」かに応じて、最終的な結果を返すオブジェクトです。プロミスには3つの状態があり、それぞれ次のような状態遷移を持ちます。

1. Pending (保留) – 処理が完了していない初期状態。
2. Fulfilled (完了) – 処理が成功した状態。
3. Rejected (失敗) – 処理が失敗した状態。

プロミスを使うと、コールバックの代わりに.then()と.catch()メソッドを用いて、コードの読みやすさと管理のしやすさが向上します。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = "プロミスのデータ取得完了！";
            if (data) {
                resolve(data);
            } else {
                reject("データ取得に失敗しました");
            }
        }, 2000);
    });
}

fetchData()
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error(error);
    });

• fetchData関数はプロミスを返し、成功時にはresolve、失敗時にはrejectを呼び出します。
• fetchData()を呼び出すと、.then()メソッドで成功時の処理を、.catch()メソッドでエラーハンドリングを行います。

プロミスのメリット
プロミスにより、非同期処理の結果をオブジェクトとして取り扱えるようになり、コールバック地獄を避けつつ、エラー処理が簡潔に記述できます。

5.4 async/await

async/awaitは、プロミスをさらに簡潔に書くための構文で、非同期処理を同期処理のように記述できます。async関数は、内部で非同期処理を扱うことを示し、awaitキーワードはプロミスが解決されるまで待機します。

以下のコードは、async/awaitを使用してデータを取得する例です。

async function fetchData() {
    try {
        const data = await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve("async/awaitのデータ取得完了！");
            }, 2000);
        });
        console.log(data);
    } catch (error) {
        console.error("エラー:", error);
    }
}

fetchData();

• fetchData関数はasyncで宣言され、awaitを使ってプロミスの解決を待ちます。
• エラーが発生する可能性があるので、try/catchブロックでエラーハンドリングを行います。

async/awaitの利点
コードがシンプルで読みやすくなり、非同期処理を同期処理のように記述できるため、エラーハンドリングも直感的に書けます。

5.5 Fetch APIを使ったデータ取得

JavaScriptのFetch APIは、Ajax（Asynchronous JavaScript and XML）を用いて非同期にリソースやデータを取得するモダンな方法です。APIを使うことで、HTTPリクエストを簡潔に記述できます。

以下は、Fetch APIを使ってサンプルAPIからデータを取得する例です。

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then((response) => {
        if (!response.ok) {
            throw new Error("ネットワークエラー");
        }
        return response.json();
    })
    .then((data) => {
        console.log("取得したデータ:", data);
    })
    .catch((error) => {
        console.error("エラー:", error);
    });

• fetch()メソッドはHTTPリクエストを送信し、結果をプロミスとして返します。
• レスポンスが正常でない場合は、Errorを投げ、エラーハンドリングを行います。

5.6 外部APIとの連携

最後に、非同期処理を使った外部APIとの連携についてです。以下は、async/awaitとFetch APIを使って、外部APIからデータを取得する例です。

async function getData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
        if (!response.ok) {
            throw new Error("データ取得に失敗しました");
        }
        const data = await response.json();
        console.log("取得したデータ:", data);
    } catch (error) {
        console.error("エラー:", error);
    }
}

getData();

• getData関数は、asyncで宣言され、APIリクエストが解決されるまでawaitで待機します。
• レスポンスが正常でない場合はエラーを発生させ、try/catchでエラーハンドリングします。

---

まとめ

この章では、非同期処理とAjaxについて学び、コールバック、プロミス、async/awaitを通じたデータ取得の基本的な使い方を理解しました。特に、async/awaitはコードの可読性が高く、非同期処理を直感的に扱うための便利な手法です。