Fetch APIとAjax (XHR)

ウェブ開発において、サーバーとのデータの取得や送信は不可欠な要素です。

Fetch APIとAjax（XMLHttpRequestまたはXHR）は、これらの操作を実現するための主要な手段です。

この記事では、初心者向けにFetch APIとAjaxの基本から使い方までを解説します。

フロントエンドエンジニアロードマップ一覧はこちら

Fetch APIの基本

Fetch APIは、ネットワークリクエストを行うための現代的で柔軟なAPIです。

主にJavaScriptで利用され、Promiseを使用して非同期通信をサポートしています。

以下は、Fetch APIの基本的な使用例です。

// データを取得する例
fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('ネットワークエラー');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('データの取得に失敗しました。', error));

この例では、fetch関数を使用して指定されたURLからデータを取得しています。

thenメソッドを使用して成功時とエラー時の処理を定義し、最終的にデータをコンソールに出力しています。

Fetch APIでデータを送信する

Fetch APIを使用してデータをサーバーに送信するには、リクエストオプションを設定する必要があります。

以下は、POSTリクエストを送信する例です。

// データを送信する例
fetch('https://api.example.com/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        username: 'john_doe',
        password: 'secure_password',
    }),
})
    .then(response => {
        if (!response.ok) {
            throw new Error('ネットワークエラー');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('データの送信に失敗しました。', error));

この例では、methodをPOSTに設定し、headersには送信するデータの形式を指定しています。

bodyには送信するデータをJSON形式に変換して設定しています。

Ajax（XHR）の基本

Fetch APIが導入される前は、Ajax（Asynchronous JavaScript and XML）が主流でした。

AjaxはXHR（XMLHttpRequest）オブジェクトを使用して非同期通信を実現します。以下は、Ajaxを使用してデータを取得する例です。

// データを取得する例（Ajax）
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        let responseData = JSON.parse(xhr.responseText);
        console.log(responseData);
    } else {
        console.error('ネットワークエラー');
    }
};

xhr.send();

この例では、XMLHttpRequestオブジェクトを作成し、openメソッドでリクエストの設定を行い、onloadイベントで成功時の処理を、sendメソッドでリクエストを送信しています。

Ajaxでデータを送信する

Ajaxを使用してデータをサーバーに送信するには、POSTリクエストを行います。

以下は、Ajaxを使用したPOSTリクエストの例です。

// データを送信する例（Ajax）
let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');

let requestData = JSON.stringify({
    username: 'john_doe',
    password: 'secure_password',
});

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        let responseData = JSON.parse(xhr.responseText);
        console.log(responseData);
    } else {
        console.error('ネットワークエラー');
    }
};

xhr.send(requestData);

この例では、setRequestHeaderメソッドでリクエストヘッダーを設定し、sendメソッドでデータを送信しています。

Fetch API vs Ajax（XHR）

Fetch APIとAjax（XHR）はどちらもネットワーク通信を行う手段ですが、Fetch APIが登場することでいくつかの利点があります。

Fetch APIの利点

1. Promiseベース: Fetch APIはPromiseを使用して非同期通信を扱います。これにより、より直感的でシンプルなコードが書けます。
2. クロスオリジンリクエスト: Fetch APIはデフォルトで同一オリジンポリシーに従いますが、クロスオリジンリクエストの場合も簡単に制御できます。Ajaxは同一オリジンリクエストのみサポートしています。
3. リクエスト・レスポンスのヘッダーの取得: Fetch APIでは、ヘッダーやリクエスト・レスポンスの情報に簡単にアクセスできます。

Ajax（XHR）の利点

1. IE11のサポート: Fetch APIは比較的新しいもので、一部の古いブラウザ（特にIE11）でサポートされていないことがあります。Ajaxは広くサポートされています。
2. 既存のコードへの適合: 既存のプロジェクトやコードベースがAjaxを使用している場合、Fetch APIに切り替える際には注意が必要です。

まとめ

Fetch APIとAjaxはウェブ開発において重要なツールであり、サーバーとのデータの取得や送信を可能にします。

Fetch APIはPromiseベースで直感的なコードが書ける一方、Ajaxは広くサポートされているため、プロジェクトの要件やブラウザの対応状況によって使い分けることが重要です。

初心者の方も基本的な使い方から少しずつ試してみて、実際のプロジェクトでの活用を目指しましょう。

フロントエンドエンジニアロードマップ一覧はこちら