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

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

サーバーとの対話には、さまざまな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つのプロパティとして、title、body、userIdがあります。

オブジェクトを保持する変数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パラメータはリクエストに成功した場合にコールバック関数を呼び出します。

[cta］

以下では、jQueryの$.ajax()メソッドを使用してPATCHとDELETEリクエストを送信する方法を見てみます。

JavaScriptでjQueryの$.ajax()メソッドを使ってPATCHリクエストを行う

このセクションでは、jQueryの$.ajax()メソッドを使用してPATCHリクエストを送信する方法を扱います。

以下がそのコードです。

const body = JSON.stringify({
  body: "My PATCH request",
});
$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/101",
  type: "PATCH",
  data: body,
  success: function (result) {
    console.log(result);
  },
});

上記のコードでは、更新するプロパティが変数bodyに格納されます。そして、これがdataパラメータの値として使用されます。

リクエストが成功すると、successパラメータの関数が実行されます。

JavaScriptでjQueryの$.ajax()メソッドを使ってDELETEリクエストを行う

jQueryの$.ajax()メソッドを使用してDELETEリクエストを送信するには、わずか数行のコードでOKです。

以下はその例です。

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

上で見たように、削除するオブジェクトのIDを含むURL、リクエストの種類、そしてリクエストが成功した場合に実行される関数を指定します。

JavaScriptでjQueryの$.getJSONメソッドを使用する

$.getJSONメソッドでは、短い記述で、GETリクエストを送信することができます。

以下にあるように、URLとコールバック関数を指定するだけでOKです。

$.getJSON("https://jsonplaceholder.typicode.com/users", function (result) {
  console.log(result)
});

上記のコードでは、$.getJSONメソッドのパラメーターとして、サーバーへのURLと、リクエストが成功した後に実行される関数を渡しています。

ここでは、ユーザー情報を含むオブジェクトの配列をコンソールに出力しています。

4. JavaScriptでFetch APIを使ってHTTPリクエストを行う方法

fetch APIは、JavaScriptを使用してサーバーとやりとりする典型的な手法のひとつです。ネイティブのJavaScript APIであり、リクエスト実行時のpromiseをサポートしています。

fetch APIを使用する構文は、この後のセクションで説明するように、非常にわかりやすくなっています。

JavaScriptでFetch APIを使用してGETリクエストを行う

fetch APIを使ってGETリクエストを送信するには、URLを指定するだけでOKです。ここからはpromiseが返され、then()メソッドまたはasyncとawaitを使用してアクセスできます。

例を見てみましょう。

fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((json) => console.log(json));

上のコードでは、fetchメソッドにURLを渡し、promiseを返しました。そして、then()メソッドでサーバーのレスポンスにアクセスしています。レスポンスはresponse.json()メソッドでJSONオブジェクトに変換されます。

レスポンスを取得した後、別のthen()メソッドを使用し、データがコンソールに出力されます。

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

fetchメソッドには、body（送信するデータ）と送信するリクエストの種類を指定するための2つ目のパラメータがあります。このパラメータによって、POSTおよびPATCHリクエストを送信することができます。

このサンプルコードを見てみましょう。

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify({
    title: "Hello World",
    body: "My POST request",
    userId: 900,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));

上記のコードでは、fetchメソッドの2つ目の引数にリクエストオプションを追加しています。methodはリクエストタイプを、bodyはサーバーに送信するデータを、そして、headersはサーバーにJSONデータを送信することを指定します。

GETリクエストを送信したときと同様に、返されたpromise/レスポンスにはthen()メソッドを使用しアクセスします。

JavaScriptでFetch APIを使ってPUTリクエストを行う

他のセクションで、サーバー内のオブジェクトを更新するリクエストを送信したときは、PATCHを使用しました。ここでは、オブジェクト全体を更新することができるPUTを使用します。

以下は、fetch APIを使用した例です。

fetch("https://jsonplaceholder.typicode.com/posts/1", {
  method: "PUT",
  body: JSON.stringify({
    id: 1,
    title: "My PUT request",
    body: "Updating the entire object",
    userId: 1,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
.then((response) => response.json())
.then((json) => console.log(json));

PUTリクエストを送信するので、更新するデータを指定する必要があります。これが、bodyリクエストオプションの値として渡されます。

また、URLの最後のパラメータとして、更新するオブジェクトのIDを指定しました。リクエストが正常に実行されると、更新したオブジェクトがコンソールに出力されます。

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

DELETEリクエストの送信は非常に簡単で、削除するオブジェクトのIDを指定するだけです。他のリクエストで行ったように、then()メソッドを使用してサーバーからレスポンスを受け取ることができます。

以下は簡単な例です。

fetch("https://jsonplaceholder.typicode.com/posts/3", {
  method: "DELETE",
});

上記のコードでは、IDが3であるオブジェクトを削除しています。

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

Axiosは、HTTPリクエストの送信に使える、promiseを土台にしたサードパーティ製ライブラリです。最近のHTTPクライアントと同様に、サーバーへのリクエスト送信に関わる処理を簡略化してくれます。

このセクションでは、Axiosを使用してサーバーにGET、POST、PUT、DELETEリクエストを送信する方法をご紹介します。

AxiosはJavaScriptに組み込まれていませんので、その機能を利用するには、別途インストールする必要があります。Axiosをインストールするには、ターミナルで以下のコマンドを実行します。

npm install axios

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

Axiosを使ってGETリクエストを送信するには、get()メソッドにURLを渡すだけで、promiseが返されます。promiseから返されたレスポンスには、then()メソッドでアクセスできます。

例を見てみましょう。

axios.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));

上記のコードは、サーバーから返されたデータを含むオブジェクトの配列が出力されます。返されたオブジェクトをJSONオブジェクトに変更する必要がないことには、お気づきでしょうか。Axiosがこれを処理してくれるので、response.dataを使ってデータにアクセスすることができます。

エラーを検出するために、catch()メソッドを使用しています。

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

AxiosのPOSTリクエストは、URLとサーバーに送信するデータという2つのパラメータを取ります。データは変数に格納するか、パラメータとして直接渡すことができます。

以下がその方法です。

axios.post("https://jsonplaceholder.typicode.com/posts", {
  title: "POST request with Axios",
  body: "POST request",
  userId: 10,
})
.then(function (response) {
  console.log(response.data);
})
.then((error) => console.log(error))

上の例では、サーバーにデータを送信しています。このデータは、post()メソッドの2番目の引数として渡されます。

リクエストの送信が成功すると、コンソールに結果が出力されます。

JavaScriptでAxiosを使ってPUTリクエストを行う

Axiosを使ったPUTリクエストの送信は、POSTリクエストの送信と似ています。PUTリクエストを送信するには、URL（更新するオブジェクトのIDを含む）と更新するデータを、put()メソッドの第2引数として指定します。

以下の例では、IDが10であるオブジェクトを更新します。

axios.put("https://jsonplaceholder.typicode.com/posts/10", {
  title: "PUT request with Axios",
  body: "PUT request",
  userId: 10,
})
.then(function (response) {
  console.log(response.data);
})
.then((error) => console.log(error))

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

DELETEリクエストを送信するには、削除するオブジェクトのURLの中でIDを指定します。

通常通り、削除するオブジェクトのIDとURLを指定する必要があります。

以下はその例です。

axios.delete("https://jsonplaceholder.typicode.com/posts/10")
.then(function (response) {
  console.log(response);
})
.then((error) => console.log(error))

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

SuperAgentは、JavaScriptでHTTPリクエストを行うために作られた歴史あるライブラリです。Axiosと同様にpromiseをサポートしており、サーバーに様々なHTTPリクエストを送信するメソッドがあらかじめ用意されています。

SuperAgentを使用するには、以下のコマンドを使用してインストールします。

npm install superagent

GETリクエストの例から順に見ていきましょう。

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

SuperAgentでGETリクエストを送信するには、get()メソッドを利用します。URLがメソッドの引数として渡されます。

リクエストから返されるpromiseに対しては、以下の例にあるように、end()メソッドを使うことができます。

superagent
.get("https://jsonplaceholder.typicode.com/posts")
.end((error, response) => {
  console.log(response.body);
});

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

SuperAgentを使用してPOSTリクエストを送信するには、サーバーに送信するデータをSuperAgentのsend()メソッドに引数として渡します。

superagent
.post("https://jsonplaceholder.typicode.com/posts")
.send({
  title: "POST request with SuperAgent",
  body: "POST request",
  userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
  console.log(res.body);
});

上記のコードでは、post()メソッドのパラメータとしてURLが渡されています。送信するデータは、send()メソッドに渡されました。end()メソッドを使用して、サーバーからのレスポンスを取得します。

JavaScriptでSuperAgentを使ってPUTリクエストを行う

SuperAgentでは、put()メソッドを使用してPUTリクエストを送信することができます。前のセクションの例と同様に、更新するデータはsend()メソッドの引数として渡すことになります。

以下はその例です。

superagent
.put("https://jsonplaceholder.typicode.com/posts/10")
.send({
  title: "PUT request with SuperAgent",
  body: "PUT request",
  userId: 10,
})
.set("X-API-Key", "foobar")
.set("accept", "json")
.end((err, res) => {
  console.log(res.body);
});

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

削除リクエストを送信するには、削除するオブジェクトのIDをURLで指定するだけでOKです。これが、delete()メソッドの引数として使用されます。

superagent
.delete("https://jsonplaceholder.typicode.com/posts/10")
.end((err, res) => {
  console.log(res.body);
});

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

Qwestは、サーバーとの対話に便利なAJAXライブラリです。現在、GitHubでアーカイブされています。fetch APIとAxiosの出現により、作者がこのライブラリのメンテナンスを打ち切りました。

Qwestはpromiseの使用をサポートしています。

以下のセクションでは、Qwestを使用してGET、POST、PUT、DELETEリクエストを送信する方法について説明します。

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

Qwestには、GETリクエストの送信に使用できるget()メソッドがあります。その使い方は以下の通りです。

qwest.get("https://jsonplaceholder.typicode.com/posts")

.then((xhr, response) => console.log(response));

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

第2引数として、サーバーに送信するデータをpost()メソッドに渡します。第1引数はURLです。

以下がその例です。

qwest.post("https://jsonplaceholder.typicode.com/posts", {
  title: 'POST request with Qwest',
  body: 'POST request',
  userId: 30
})
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

[cta］

JavaScriptでQwestを使ってPUTリクエストを行う

この構文は、前のセクションと同じです。変更するのはリクエストタイプだけで、あとは更新したいオブジェクトのIDを、更新したいデータとともに指定するだけです。

この例を見てみましょう。

qwest.put("https://jsonplaceholder.typicode.com/posts/30", {
  title: 'PUT request with Qwest',
  body: 'PUT request',
  userId: 30
})
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

IDはサーバーに送信するオブジェクトではなく、URLで指定していることに注意してください。

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

通常、サーバーからオブジェクトを削除するには、URLと削除するオブジェクトのIDを指定する必要があります。削除するオブジェクトのURLとIDの両方は、Qwestのdelete()メソッドに引数として渡されます。

以下がその例です。

qwest.delete("https://jsonplaceholder.typicode.com/posts/30")
.then(function(xhr, response) {
  console.log(response)
})
.catch(function(e, xhr, response) {
  console.log(e)
});

リクエストが正常に実行されると、IDが30であるオブジェクトが削除されます。

まとめ

JavaScriptを使ってサーバーとやりとりする機能は、何年もかけて進化を続けてきました。JavaScript開発者のコミュニティが活発になるにつれ、変更が加えられたり、新しいツールが導入されたりして、結果的にシンプルで簡単な処理が可能になっています。

今回の方法は、リモートサーバーにのみ適用されるわけではなく、フルスタックのウェブアプリケーションを構築する際に、自らのサーバーとやり取りする際にも使用できます。また、多くのJavaScriptライブラリやフレームワークで動作します。

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

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