サイトのフロントエンドとバックエンド間のやり取りは、HTTPリクエストによって可能になります。データベース内の新規/旧ユーザーの更新、WordPress管理画面からのブログ記事の公開、プロフィールからの写真の削除、ユーザー自己紹介欄の情報変更といった機能はすべて、サーバーとクライアントの間のやりとりを必要とします。

ウェブアプリケーションの構築時には(フロントエンドとフルスタックウェブアプリケーションの両方で)、しばしば、データベースやサーバーに保存されたデータを操作するものです。対象となるサーバーは、サードパーティに属していることもあれば、プロジェクトの開発者が作成したものにもなり得ます。

リモートサーバーにHTTPリクエストを行い、JavaScriptでCRUD操作を行うさまざまな方法がこちら✅ クリックでつぶやく

サーバーとの対話には、さまざまなHTTPメソッドを使用することができます。POST、GET、PUT/PATCH、DELETEといったメソッドで、データの作成、読み取り、更新、削除(CRUD)が可能です。

今回は、リモートサーバーにHTTPリクエストを行い、JavaScriptでCRUD操作を行う方法をご紹介します。

各セクションで、HTTPリクエスト送信に使えるメソッドを扱います。fetch APIやXMLHttpRequestオブジェクトなどの組み込みメソッドから始め、AxiosやSuperAgentなどのオープンソースHTTPリクエストライブラリも見ていきます。

それでは、始めましょう。

JavaScriptのHTTPリクエストとは

JavaScriptのHTTP リクエストは、サーバーに保存されたデータを操作するのに使用される、一連の定義済みメソッドです。

サーバーに送信するすべてのリクエストで、エンドポイントと送信されるリクエストの種類を指定します。エンドポイントは、クライアントとサーバーの2つのプログラム間のゲートウェイのようなものです。

クライアントはリクエストを送信するプログラムであり、サーバーはリクエストを受信するプログラムです。サーバーは、リクエストの有効性に応じてレスポンスを返します。リクエストが成功した場合、サーバーはXMLまたはJSON形式(ほとんどの場合JSON)でデータを送り返し、リクエストが失敗した場合、エラーメッセージを送り返します。

サーバーが送り返すレスポンスは、通常ステータスコードを伴います。サーバーがリクエストを受け取ったときの状態を、このコードから推し量ることができます。その例は以下の通りです。

  • 100-199:情報(処理中)
  • 200-299:リクエスト成功
  • 300-399:リダイレクト
  • 400-499:クライアントエラー
  • 500-599:サーバーエラー

いくつかについては、後から詳しく説明を加えます。

次のセクションでは、JavaScriptでHTTPリクエストを作成するさまざまな方法を見てみましょう。

JavaScriptでのHTTPリクエストの扱い方

複数のサブセクションに分けて、JavaScriptでHTTPリクエストを行うさまざまなメソッドを解説していきます。

それぞれの方法で、POST、GET、PUT/PATCH、DELETE リクエストをサーバーに送信する方法を例示します。

JSON Placeholderは、すべてのリクエストが送信されるリモートサーバー/エンドポイントとして機能します。

さっそく始めましょう。

1. JavaScriptでXMLHttpRequestを使ってHTTPリクエストを行う方法(AJAX)

XMLHttpRequest はJavaScriptの組み込みオブジェクトで、ブラウザを再読み込みすることなくサーバーとやり取りしたり、ウェブページにコンテンツを読み込んだりするのに使用できます。

このセクションでは、XMLHttpRequestを使用してPOST、GET、PUT/PATCH、およびDELETEリクエストを送信する方法を説明します。

AJAX は、非同期HTTPリクエストを行うのに使用されます。簡単に言えば、リクエストへのレスポンスが保留されている間(完了していない時)にも、JavaScriptコードの他の部分で、実行を継続できるということです。

また、AJAXの利用により、訪問者にページ全体を再読み込みさせることなく、ウェブページの特定のセクションに変更を加えることができます。

AJAXは、デフォルトではXMLHttpRequestオブジェクトで動作するため、このセクションの例はAJAXリクエストと考えることができます。

JavaScriptでXMLHttpRequestを使ってGETリクエストを行う

サーバーからデータを取得するには、GETリクエストを利用します。JavaScriptでXMLHttpRequestを使用してGETリクエストを正常に送信するためには、以下を満たす必要があります。

  1. 新しいXMLHttpRequestオブジェクトを作成する
  2. リクエストの種類とエンドポイント (サーバーの URL) を指定して、接続を開始する
  3. リクエストを送信する
  4. サーバーからの応答を待つ

XMLHttpRequestを使用してPOSTリクエストを送信する手順を理解したところで、次はコードの例を見てみましょう。

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
xhr.send();
xhr.responseType = "json";
xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 200) {
    const data = xhr.response;
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};

上のコードを分解して、中身を理解していきます。

最初に、XMLHttpRequestオブジェクトを作成し、それをxhrという変数に格納しています(オブジェクトからのインスタンス作成)。

const xhr = new XMLHttpRequest();

次に、リクエストタイプ(GET)とリクエストの送信先であるエンドポイント(ここでは“https://jsonplaceholder.typicode.com/users”)を指定しました。

xhr.open("GET", "https://jsonplaceholder.typicode.com/users");

リクエストをサーバーに送信するのに、send()メソッドを使用しました。

サーバーがデータを送り返すときの形式を指定することができます。

ほとんどの場合、JSONが使用されます。とは言え、念のために、以下の通りデータがJSONで返されるようにしました。

xhr.responseType = "json";

ここまでで、GETリクエストの送信は完了です。次に、イベントリスナーを使用してサーバーからのメッセージを受け取れる状態にしましょう。

xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 200) {
    const data = xhr.response;
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};

上のコードでは、onloadイベントを利用しています。if文を使用して、サーバーレスポンスのステータスをチェックしました。

クライアントの状態が4(DONE)で、ステータスコードが200(成功)であれば、コンソールにデータが記録されます。そうでない場合は、エラー状況を示すエラーメッセージが表示されます。

エラーなしでここまできたら、コンソールにオブジェクトの配列が表示されるはずです。

[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

これは、サーバーから取得したデータです。

JavaScriptでXMLHttpRequestを使ってPOSTリクエストを行う

POSTリクエストを使用すると、情報(データ)をオブジェクトとしてサーバー/データベースに送信することができます。オブジェクトには、ユーザーに関する情報や、ToDoリストの項目など、あらゆる使い道があります。

このセクションで紹介するコード例は、前のものと似ています。しかし主な違いとして、POSTリクエストでは、通常、サーバーに送信する前にオブジェクトに特定の情報を格納する必要があります。

以下はその例です。

const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
const body = JSON.stringify({
  title: "Hello World",
  body: "My POST request",
  userId: 900,
});
xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 201) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send(body);

上記のコードでは、サーバーに送信する情報はbodyという変数に格納されています。その中には、3つのプロパティとして、titlebodyuserIdがあります。

オブジェクトを保持する変数bodyは、サーバーへの送信前にJSONオブジェクトに変換する必要がありますのでご注意ください。この変換は、JSON.stringify()メソッドを使用して行います。

そして、JSONオブジェクトのサーバーへの送信のために、send()メソッドに引数として渡します。

xhr.send(body);

JavaScriptでXMLHttpRequestを使ってPATCHリクエストを行う

PATCHリクエストは、オブジェクトの指定されたプロパティを更新するのに使用できます。これは、オブジェクトの全体を更新するPUTメソッドとは異なります。

以下は、JavaScriptでのXMLHttpRequestを使ったPATCHリクエストの例です。

const xhr = new XMLHttpRequest();
xhr.open("PATCH", "https://jsonplaceholder.typicode.com/posts/101");
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
const body = JSON.stringify({
  body: "My PATCH request",
});
xhr.onload = () => {
  var data = JSON.parse(xhr.responseText);
  if (xhr.readyState == 4 && xhr.status == "200") {
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send(body);

上記のコードを実行すると、更新とサーバーへの送信が処理され、その結果がコンソールに表示されます。

JavaScriptでXMLHttpRequestを使ってDELETEリクエストを行う

その名の通り、DELETEメソッドはサーバーからデータを削除するのに使用できます。これは、JavaScriptのどのHTTPメソッドにも共通することです。

ほとんどの場合、削除したいデータのIDを指定する必要があります。IDは通常、エンドポイント/URLのパラメータになります。

DELETEリクエストの例を見てみましょう。

const xhr = new XMLHttpRequest();
xhr.open("DELETE", "https://jsonplaceholder.typicode.com/posts/3");
xhr.onload = function () {
  var data = JSON.parse(xhr.responseText);
  if (xhr.readyState == 4 && xhr.status == "200") {
    console.log(data);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};
xhr.send();

上のコードを実行すると、エンドポイント(“https://jsonplaceholder.typicode.com/posts/3”)で指定されたIDが3であるpostのオブジェクトが削除されます。

2. JavaScriptでjQueryを使ってHTTPリクエストを行う方法

jQueryでは、構文を短くすることで、サーバーからデータを取得するプロセスを簡素化できます。

このセクションでは、さまざまな jQueryメソッドを使用してHTTPリクエストを実行する方法を説明します。

JavaScriptでjQueryを使ってGETリクエストを行う

jQueryには、サーバーにGETリクエストを送信する$.get()というメソッドがあります。このメソッドは、サーバーへのURLと、リクエストが成功した場合に実行されるコールバック関数という2つのパラメータを取ります。

以下はその例です。

$.get("https://jsonplaceholder.typicode.com/users", (data, status) => {
  console.log(data);
});

上のコードでわかるように、$.get()メソッドはURL(https://jsonplaceholder.typicode.com/users)と匿名コールバック関数をパラメータとして受け取っています。

コールバック関数を通じて、リクエストからのデータとそのステータスを取得できます。この例では、コンソールにデータを出力しました。

以上が、jQueryを使ったGETリクエストの簡単な実行方法です。

JavaScriptでjQueryを使ってPOSTリクエストを行う

jQueryを使ってPOSTリクエストを送信するには、$.post()メソッドを使用します。メソッドには、URL、サーバーに送信するデータ、コールバック関数の3つのパラメータが必要です。

const body = JSON.stringify({
  title: "Hello World",
  body: "My POST request",
  userId: 900,
});
$.post("https://jsonplaceholder.typicode.com/users", body, (data, status) => {
  console.log(data);
});

上記のコードでは、サーバーに送信するオブジェクトを作成し、それをbodyという変数に格納しました。この変数は、$.post()メソッドの2番目の引数として渡されています。

コールバック関数を使用して、リクエストの結果をコンソールに出力しています。

3. jQueryで$.ajax()メソッドを使って非同期リクエストを行う方法

PATCHとDELETEリクエストの送信に進む前に、$.ajax()メソッドについて説明します。

jQueryの$.ajax()メソッドは、非同期リクエストを行うのに使用できます。

構文が他と異なります。

以下は、$.ajax()メソッドを使用してGETリクエストを行う方法です。

$.ajax({
  url: "https://jsonplaceholder.typicode.com/users",
  type: "GET",
  success: function (result) {
    console.log(result);
  },
});

$.ajax()メソッドでは、様々なパラメータが使用できます。

上記のコードでは、urlパラメータはサーバーへのURLを指定し、typeはリクエストタイプを指定し、successパラメータはリクエストに成功した場合にコールバック関数を呼び出します。

JavaScriptでHTTPリクエストを行う方法については以上です。さまざまな例と説明を扱い、内蔵のJavaScriptメソッドとサードパーティライブラリを使用してGET、POST、PUT/PATCH、DELETEリクエストを送信する方法をご紹介しました。

サイトの構築とデプロイには、スキルを問わず、面倒な作業がつきものです。そこでKinstaでは、無料で使えるツール「DevKinsta」をご用意しています。2万5,000人以上の開発者、ウェブデザイナー、フリーランサーの方々に、WordPressテーマ、プラグインなどの開発にご利用いただいています。詳しくはこちらをご覧ください。