Ajax リクエストを投げる[JavaScript] #初心者

どのようにJavaScriptからリクエストが投げられるのかを考えてみたいと思います。
リクエストは色々なタイミングで発生します。

例：
・リンクをクリック
・URLに入力してエンターを押した時
・再読み込みボタンをクリック

JavaScriptからリクエストを作成することもできます。その方法として「AJAX」があります。

AJAX（Asynchronous JavaScript and XML）

AJAXを使うことで、Webページを再読み込みせずに裏側で情報を送受信できます。
これにより、ユーザー体験が向上します。

以前だと、ページを再読み込みしたり、違うページに移動しなければならなかったことが、同じページにいながらにして裏側の情報を取得できるようになりました.

今回は、AJAXについてと、JavaScriptでリクエストを投げる方法などについてまとめていきます。

API入門

JavaScriptでリクエストを投げる際に取得する情報は「生のデータ（API）」が多いです。

APIとは、特定のURL（エンドポイント）にリクエストを投げて情報をやり取りするインターフェースのことです。
多くの場合、APIはJSON形式でデータを返します。

例：

Twitterやfacebookなどのさまざまな企業がweb APIのエンドポイントというものを公開しています。

このエンドポイントからはさまざまな情報を取得することができ、それを使ってプログラムを作成することができます。
なので、web APIは別のアプリケーションやサービスやデータベースへの入口のような場所だと言えることができます。

JSON

JSON（JavaScript Object Notation）は、ソフトウェア間でデータをやり取りするためのテキストベースの共通フォーマットです。

JSONデータをJavaScriptオブジェクトに変換するには JSON.parse を使用し、
JavaScriptオブジェクトをJSON形式に変換するには JSON.stringify を使用します。

HTTPのリクエストについて

HTTPリクエストにはいくつかの種類があり、それぞれ異なる役割を持っています。主なメソッドを以下に示します：

GET リクエスト：情報を取得するために使用されます。
POST リクエスト：情報を送信するために使用されます。
DELETE リクエスト：情報を削除するために使用されます。

ただし、APIの実装次第では、これらのメソッドが異なる動作をする場合もありますので注意が必要です。

HTTPステータスコード

HTTPレスポンスにはステータスコードが付随しており、リクエストの結果を示します。

2xx (成功)：リクエストが正常に処理されたことを示します。
3xx (リダイレクト)：追加のアクションが必要であることを示します。
4xx (クライアントエラー)：クライアント側のエラーを示します。たとえば、リクエストが正しくない場合です。
5xx (サーバーエラー)：サーバー側のエラーを示します。サーバーがリクエストを処理できない場合です。

クエリストリング

HTTPリクエストを投げるときに、URLに情報を載せることができます。これをクエリストリングと言います。

例えば、:id、{{id}}、などは、変数（動的に変化するもの）を表します。
SWAPI（スターウォーズAPI）の場合、この変数が数字（id）を表しています。

クエリストリングの形式は以下の通りです：

?キー=値&キー=値

クエリストリングはURLの後に続き、キーと値のペアを＆でつなげます。これは、バックエンドにクライアントから情報を渡す手段としてよく使われます。どんなキーと値でも使用できますが、バックエンドが興味を持つ特定の値を使用することで、リクエストが処理されることがあります。

Postmanの活用

Postmanなどのツールを使えば、クエリストリングを簡単に追加してテストすることができます。これにより、クエリストリングの構造が分かりやすくなります。

HTTPヘッダー

HTTPリクエストやレスポンスにはHTTPヘッダーを含めることができます。HTTPヘッダーはキーと値のペアで、追加の情報を提供します。

クライアント側から送信する場合：特定の情報をリクエストに含めるために使用します。
サーバー側から送信する場合：レスポンスに追加の情報を含めるために使用します。

普段は特に意識する必要はありませんが、APIによっては特定のHTTPヘッダーを設定する必要がある場合があります。例えば、認証トークンやコンテンツタイプなどが挙げられます。

HTTPヘッダーを理解し適切に使用することで、より柔軟かつセキュアなAPI通信が可能になります。

JavaScriptからHTTPリクエストを投げてみる

古い方法: XMLHttpRequest

まずは、最も古く、現在ではあまり使われない方法でHTTPリクエストを投げてみます。

なぜこの方法を学ぶのかというと、内部的にどのような処理が行われているのかを理解することで、後に学ぶfetchやAxiosの利便性や進化の過程をより深く理解するためです。

XMLHttpRequestの基本

・昔は、ajaxといえばXMLHttpRequest：非同期通信のために広く使用されていました。
・Promiseはサポートされていない：コールバックが多くなり、コードが複雑になります。
・使い方が少し難しい：手動で多くの設定を行う必要があります。

XMLHttpRequestの手順：

XMLHttpRequestオブジェクトを作成する

const xhr = new XMLHttpRequest();

リクエストを初期化する

xhr.open('GET', 'https://swapi.dev/api/people/1/');

リクエストを送信する

xhr.send();

レスポンスを受け取るためにイベントハンドラーを設定する

xhr.onload = function() {
    if (xhr.status === 200) {
        console.log("Success:", this.responseText);
        const data = JSON.parse(this.responseText);
        console.log(data);
    } else {
        console.error("Error:", xhr.statusText);
    }
};

xhr.onerror = function() {
    console.error("Request failed");
};

モダンな方法: Fetch API

次に、よりモダンな方法であるFetch APIを使用します。FetchはPromiseをサポートしており、非同期処理を簡単に扱うことができます。

・JavaScriptでリクエストを投げるモダンなやり方
・Promiseをサポートしている

Fetch APIの使用方法：

fetchを呼び出す

fetch('https://swapi.dev/api/people/1/')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

上記のコードでは、Fetch APIを使ってリクエストを投げています。最初のthenブロックでレスポンスをJSONにパースし、次のthenブロックでそのデータをコンソールに表示します。エラーが発生した場合はcatchブロックで処理します。

Fetch APIの特徴
Promiseをサポート：非同期処理が簡単になります。
シンプルなコード：コールバック地獄に陥りにくいです。

最も便利な方法: Axios

最後に、Axiosを紹介します。Axiosは、FetchやXMLHttpRequestとは異なり、別のライブラリです。これにより、HTTPリクエストをさらに簡単かつ便利に行うことができます。ただし、標準でブラウザに組み込まれているわけではないので、別途インストールが必要です。

Axiosの使用方法：
1.リクエストを投げる

axios.get('https://swapi.dev/api/people/1/')
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));

2.ヘッダーを指定してリクエストを投げる

axios.get('https://icanhazdadjoke.com/', {
    headers: {
        'Accept': 'application/json'
    }
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

Axiosの特徴
使いやすいインターフェース：シンプルで直感的です。
Promiseをサポート：非同期処理が簡単です。
追加機能：リクエストとレスポンスの変換、エラーハンドリング、タイムアウト設定など、多くの便利な機能を提供します。

まとめ

・XMLHttpRequestは古い方法で、コールバックが多く、コードが複雑になりやすいですが、内部的な処理を理解するために学ぶ価値があります。

・Fetch APIはPromiseをサポートしており、非同期処理が簡単になります。

・Axiosはさらに使いやすく、追加機能が豊富で、HTTPリクエストを効率的に扱うことができます。

これらの方法を理解し、それぞれの利点と欠点を知ることで、適切な場面で適切な方法を選ぶことができるようになります。

Ajax リクエストを投げる[JavaScript]

目次：