JavaScript非同期通信編

非同期通信は、JavaScriptを使ったウェブ開発において非常に重要な概念です。

非同期通信を活用することで、ユーザーインターフェイスがブロックされることなく、バックグラウンドでデータの取得や送信が行えます。

これにより、ユーザー体験が向上し、アプリケーションのレスポンスが迅速になります。

本記事では、非同期通信の基本的な概念と、その実装方法について詳しく解説します。

具体的には、callback、Promise、およびasync/awaitの使用方法を中心に、非同期処理を効果的に管理するためのベストプラクティスを紹介します。

初心者から上級者まで、JavaScriptで非同期通信をマスターすることで、より洗練されたアプリケーションを開発できるようになるでしょう。

それでは、非同期通信の世界へ一歩踏み出しましょう。

タップできる目次

非同期通信とは？
- 非同期通信の特徴
- 具体的な例
非同期通信の技術
コールバック関数について
まとめ

非同期通信とは？

非同期通信（Asynchronous Communication）は、プログラムがサーバーとやりとりする際に、サーバーからの応答を待たずに他の作業を続けることができる通信方法です。

これにより、ユーザーがウェブページを操作している間にバックグラウンドでデータを取得したり送信したりすることができ、ユーザーエクスペリエンスが向上します。

JavaScriptはシングルスレッドなので、同時に複数の処理を行うことはできません。

非同期処理を使うことで、ある処理が終了するのを待たずに、別の処理を実行することができるので、時間のかかる処理を待つ間に他の処理を行うことができます。

と説明されても分かりづらいので、宅配便の配達で解説してみます。

同期通信（伝統的な方法）

同期通信を宅配便の配達に例えると、以下のような状況です：

あなたがインターネットで商品を注文します。
注文が確定すると、あなたは一日中家にいて配達員が来るのを待ちます。
配達員が商品を届けるまで、他の外出や予定を入れることができません。
商品が届くと、やっと他のことができます。

この方法では、商品の配達を待つ間は他のことができず、時間を無駄にしてしまいます。

非同期通信（モダンな方法）

非同期通信を宅配便の配達に例えると、以下のような状況です：

あなたがインターネットで商品を注文します。
注文が確定すると、自動的に配送の進捗状況が通知されます。
商品の配送が進む間、あなたは自由に外出したり、他の予定を入れることができます。
配達員が近くに来たら、スマホで通知を受け取り、タイミングを見計らって受け取りに行きます。

この方法では、商品の配達を待っている間も自由に活動でき、時間を有効に使うことができます。

非同期通信の特徴

バックグラウンド処理では非同期通信はバックグラウンドで実行され、メインスレッド（ユーザーインターフェースの操作）をブロックしません。

ユーザーエクスペリエンスの向上では非同期通信により、ページのリロードなしに動的なコンテンツ更新が可能になります。

効率的なリソース利用ではサーバーからの応答を待つ間、他のタスクを処理することで、リソースの効率的な利用ができます。

具体的な例

例1: フォームの送信

通常、フォームが送信されるとページ全体がリロードされますが、非同期通信を使用すると、ページの一部だけを更新することができます。これにより、ユーザーが操作を続けることができます。

例2: 無限スクロール

ウェブサイトの下部に到達すると、自動的に次のデータセットを取得して表示する機能です。これも非同期通信により実現されています。

非同期通信の技術

非同期通信の技術には2種類の方法があります。

AJAX (Asynchronous JavaScript and XML): JavaScriptを使用して非同期通信を行うための技術。ただし、現在はXMLではなく、JSON（JavaScript Object Notation）が広く使われています。

Fetch API: モダンな非同期通信のためのAPI。Promiseベースで、シンプルで使いやすいインターフェースを提供します。

コラム：JSONとは

JSONとは、JavaScriptのオブジェクト表記法をもとにしたデータフォーマットで、テキスト形式でデータを表現できます。

XHR (XMLHttpRequest)

XMLHttpRequest（XHR）は、JavaScriptを使用してWebブラウザとサーバー間でデータを交換するための古い方法です。

AJAX（Asynchronous JavaScript and XML）の一部として広く使われてきましたが、現在はFetch APIに置き換えられつつあります。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        let data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

Fetch API

Fetch APIは、XHRの代わりに使われるモダンな非同期でサーバーからデータを取得するためのメソッドです。

Promiseベースであり、非同期操作をよりシンプルに記述できるのが特徴です。

Fetch APIにはPromiseとasync/awaitという2種類の書き方があり、async/awaitはPromiseをさらにシンプルにした書き方となります。

Promise

Promiseは、JavaScriptで非同期処理を扱うためのオブジェクトです。

非同期操作の成功（解決）または失敗（拒否）を表現し、その結果に基づいて後続の処理を行います。

Promiseは、以下の3つの状態を持つことができます。

Pending（保留中）: 初期状態。まだ成功でも失敗でもない。
Fulfilled（成功）: 操作が成功し、結果が得られた。
Rejected（失敗）: 操作が失敗し、エラーが発生した。

Promiseは、pendingからfulfilledかrejectedに遷移すると、それ以上状態が変わることはありません。

Promiseの基本構造

Promiseは、非同期操作を行い、その結果をハンドリングするための構造を提供します。

以下は基本的なPromiseの使い方の例です。

let myPromise = new Promise((resolve, reject) => {
    // 非同期処理
    setTimeout(() => {
        let success = true; // この例では成功する場合
        if (success) {
            resolve('Success!');
        } else {
            reject('Failure!');
        }
    }, 1000);
});

myPromise.then(result => {
    console.log(result); // 'Success!'
}).catch(error => {
    console.error(error); // 'Failure!'
});

この例では、Promiseを作成するには、new Promiseというコンストラクタを使います。

Promiseコンストラクタがresolveとrejectの2つのコールバック関数を受け取ります。

resolveは、処理が成功したときに呼び出す関数で、成功時の値を引数に渡します。

rejectは、処理が失敗したときに呼び出す関数で、失敗時の理由を引数に渡します。

Promiseのメソッド

then: Promiseが解決（成功）したときに呼び出されるコールバック関数を指定します。

myPromise.then(result => {
    console.log(result);
});

catch: Promiseが拒否（失敗）されたときに呼び出されるコールバック関数を指定します。

myPromise.catch(error => {
    console.error(error);
});

finally: Promiseが解決されても拒否されても必ず実行されるコールバック関数を指定します。クリーンアップ処理に使用されます。

myPromise.finally(() => {
    console.log('Operation complete');
});

複数のPromiseを処理する方法

Promise.all: 複数のPromiseがすべて解決されるまで待ちます。

すべてのPromiseが成功した場合に結果を配列として返します。

いずれかのPromiseが失敗すると、全体が失敗します。

let promise1 = Promise.resolve('First');
let promise2 = Promise.resolve('Second');

Promise.all([promise1, promise2]).then(results => {
    console.log(results); // ['First', 'Second']
}).catch(error => {
    console.error(error);
});

Promise.race: 最初に解決または拒否されたPromiseの結果を返します。

let promise1 = new Promise((resolve) => setTimeout(resolve, 500, 'First'));
let promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'Second'));

Promise.race([promise1, promise2]).then(result => {
    console.log(result); // 'Second'
}).catch(error => {
    console.error(error);
});

async/await

async/awaitは、JavaScriptで非同期処理を行うための構文糖（シンタックスシュガー）です。

Promiseを使った非同期処理を、同期処理のように書けるようにすることで、コードの可読性とメンテナンス性を向上させます。

async関数

asyncキーワードを使って宣言された関数は、自動的にPromiseを返します。

非同期処理を行う関数はすべてasyncキーワードで宣言します。

async function myAsyncFunction() {
    return 'Hello, async!';
}

myAsyncFunction().then(result => console.log(result)); // 'Hello, async!'

awaitキーワード

awaitキーワードは、Promiseが解決されるまで待ちます。一時的に中断する状態です。

この待機中に他のコードはブロックされず、非同期に実行されます。

awaitは常にasync関数の中で使用される必要があります。

async function fetchData() {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
}

fetchData();

このコードでは、await fetchで非同期リクエストが完了するのを待ち、次にawait response.json()でレスポンスのJSONをパースします。

エラーハンドリング

async/awaitのエラーハンドリングは、try/catchブロックを使って行います。

これにより、同期的なコードと同様にエラーをキャッチできます。

async function fetchData() {
// tryブロックでエラーが発生する可能性のある処理を記述
    try {
// fetchメソッドでURLにリクエストを送る
        let response = await fetch('https://api.example.com/data');
// レスポンスが正常でないなら
        if (!response.ok) {
// エラーを送付する
            throw new Error('Network response was not ok');
        }
// 正常であればJSONをレスポンスする
        let data = await response.json();
        console.log(data);
// catchブロックでエラーをキャッチする
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchData();

このコードでは、await fetchで非同期リクエストが完了するのを待ち、次にawait response.json()でレスポンスのJSONをパースします。

このように、非同期処理を順番に待つことで、連鎖的な非同期操作を簡潔に記述することができます。

Promiseかasyncか

新しいプロジェクト: 現在、新しく開発されるプロジェクトでは、可読性と保守性の観点からasync/awaitが広く採用されています。

既存のコード: 既存のコードベースやライブラリでは、Promiseを直接扱っているものも多く、これらも引き続き利用されています。

コールバック関数について

コールバック関数は、他の関数に引数として渡され、後でその関数によって呼び出される関数のことです。

特に非同期処理でよく使われます。

コールバック関数を使うことで、処理が完了した際に特定の動作を実行することができます。

function doSomething(callback) {
    console.log('Doing something...');
    callback();
}

function myCallback() {
    console.log('Callback executed!');
}

doSomething(myCallback);

この例では、doSomething関数にmyCallback関数を渡しています。

doSomething関数内でcallback()を呼び出すと、myCallback関数が実行されます。

非同期処理での使用例

コールバック関数は非同期処理でもよく使用されます。例えば、タイマーを使った非同期処理の例を見てみましょう：

function doSomethingAsync(callback) {
    setTimeout(() => {
        console.log('Async operation completed.');
        callback();
    }, 1000);
}

function myCallback() {
    console.log('Callback after async operation.');
}

doSomethingAsync(myCallback);

この例では、setTimeoutを使って非同期処理を行っています。

1秒後に非同期操作が完了し、その後にコールバック関数myCallbackが実行されます。

コールバック地獄

非同期処理をネストしていくと、コールバック関数がどんどん入れ子になり、コードが読みにくくなることがあります。

これを「コールバック地獄」と呼びます。

doSomethingAsync(() => {
    doSomethingElseAsync(() => {
        doAnotherThingAsync(() => {
            console.log('All async operations completed.');
        });
    });
});

このようなコールバック地獄は、コードの可読性とメンテナンス性を低下させます。

コールバック関数の代替手段

コールバック関数の課題を解決するために、Promiseやasync/awaitが登場しました。

これらの方法を使うと、非同期処理をよりシンプルに、そして同期処理のように書くことができます。

Promiseを使用する場合

Promise は、非同期処理の結果を表現するオブジェクトです。

成功時には resolve、失敗時には reject によって結果を返すことができます。

Promiseを使うことで、コールバック関数をネストさせることなく、非同期処理を連鎖させることができます。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { name: 'John Doe', age: 30 };
            resolve(data);
        }, 2000);
    });
}

fetchData()
    .then(data => {
        console.log(data); // { name: 'John Doe', age: 30 }
    })
    .catch(error => {
        console.error(error);
    });

async/awaitを使用する場合

async/await は、Promiseをさらに使いやすくするための構文です。

async 関数内で await キーワードを使用することで、非同期処理が完了するまでコードの実行を一時停止し、その結果を取得することができます。

これにより、非同期処理が同期的なコードのように書けるため、可読性が向上します。

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { name: 'Jane Doe', age: 25 };
            resolve(data);
        }, 2000);
    });
}

async function main() {
    try {
        const data = await fetchData();
        console.log(data); // { name: 'Jane Doe', age: 25 }
    } catch (error) {
        console.error(error);
    }
}

main();

Promiseでは非同期処理の結果を表現し、then と catch を使って成功と失敗をハンドリングします。コールバックのネストを避けることができます。

async/awaitではPromiseを使った非同期処理を同期的に書くことができ、コードの可読性が向上します。try/catch ブロックを使ってエラーハンドリングも簡単に行えます。

まとめ

非同期通信は、JavaScriptを使ったウェブ開発において不可欠な技術であり、ユーザー体験を大幅に向上させる役割を果たします。

コールバック関数、Promise、async/awaitといった手法を駆使することで、バックグラウンドでのデータ処理を効率的に管理でき、インターフェイスの応答性が向上します。

特にPromiseやasync/awaitは、複雑な非同期処理をシンプルかつ直感的に書けるようにするため、コードの可読性と保守性を高める効果があります。

非同期通信をマスターすることは、よりインタラクティブで動的なウェブアプリケーションを開発するための重要なステップです。

この記事を通じて得た知識を基に、より高度なJavaScriptの技術を駆使し、実践的なスキルを磨いていきましょう。