【JavaScript入門】fetchメソッドでAjax通信を実装する

Webサイトやアプリケーションを運用する上で欠かせないのが、必要なデータを取得するための通信処理です。
ページの読み込み時だけでなく、様々な動作に合わせて情報を取得し、画面を切り替えていく必要があります。

JavaScriptで必要なデータを読み込む際によく活用されているのが、Ajaxと呼ばれる非同期にデータ処理を行う技術です。
非同期処理は主に、XMLHttpRequest と Fetch API の２通りの方法で行うことができますが、今回の記事ではその中から、Fetch API を使用して Ajax通信を行う方法について解説していきたいと思います。

JavaScript の fetch() とは？

fetchメソッドは、Fetch APIでリクエストの発行やレスポンスの取得を行う際に使用するメソッドです。
このメソッドを使用することにより、非同期的にサーバーとデータのやり取りを行い、必要な情報を取得することができます。

元来、Ajax通信を行う上で使用されていたのは XMLHttpRequestですが、ES6で Fetch APIが登場して以降は、XMLHttpRequestに代わる方法としてこの fetchメソッドがよく使用されています。

Ajax（エイジャックス）とは？

Ajax (Asynchronous JavaScript and XML) とは、Javascriptを使用して非同期にサーバーとデータのやり取りを行い、取得した情報を再読み込みすることなくページに反映させる技術のことを指します。
Ajaxを使用することによって、ページ上の必要な部分だけを瞬時に更新することができるため、様々なサービスで幅広く活用されている技術です。

例えば以下のように、リアルタイムで情報が更新されるサービスなどでよく使用されています。

• 地図アプリ：スクロールや拡大・縮小の際に、画像部分だけが更新される
• 検索機能：入力したキーワードに応じて、検索候補が変化する
• SNSのタイムライン：スクロールするごとに情報が順に追加表示される（無限スクロール）

Fetch APIとは？

Fetch APIは、Web標準APIの一種です。
非同期でHTTPリクエストを行う際に使用するAPIであり、同じくサーバーとのやり取りに使用する XMLHttpRequestに比べて、コードをよりシンプルに記述できるのが特徴です。

XMLHttpRequestがコールバック関数を使用してデータ処理を行うのに対し、Fetch APIは Promiseをベースに設計されているため、thenメソッドや catchメソッド、あるいは async/await などを使用して、コールバック関数よりも視覚的に理解しやすいコードを記述することができます。

fetchメソッドの使い方

それでは、実際に fetchメソッドを使用する方法について、詳しく見ていきましょう。

基本構文

fetchメソッドは、第1引数に通信先となるURLを指定することで、リクエストを送信することができます。
また、第2引数には任意でリクエスト時の詳細なオプションを指定可能です。

【基本構文】

fetch(リクエスト先のURL, オプション)

リクエストのデフォルト設定は GETリクエストとなっているため、POSTリクエストを送りたい際などにはオプションの指定が必要となります。

また、第1引数には URLの代わりに Requestオブジェクトを渡すこともできますが、コンストラクタの引数が fetchメソッドと同様の内容となっているため、どちらを使用しても大きな差異はありません。

メソッドの戻り値は、Promiseオブジェクトを返します。
そのため、thenメソッドや catchメソッドを使用して、レスポンス処理を記述することができます。

【サンプルコード】

fetch("https://sample.com")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("エラー:", error));

XMLHttpRequestを使用するとコールバック地獄となってしまうような処理も、fetchメソッドであればより見やすいコードで記述することができます。

await と組み合わせて使う

fetchメソッドは、async/await ともよく組み合わせて使用されます。
先ほど紹介した以下の例を、async/await を使った形式で書き換えてみましょう。

【サンプルコード】

// Promise.then()の場合
fetch("https://sample.com")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("エラー:", error));

// async/await の場合
async function getData() {
  try {
    const response = await fetch("https://sample.com");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("エラー:", error);
  }
}

async関数の中でしか awaitが使えない点や、try-catch文で例外処理を記述している関係から、async/awaitを使ったコードの方がわずかに記述量は多くありますが、非同期処理の結果によってどの情報を取得しているのかがより直感的に理解しやすいコードになったかと思います。

awaitで非同期処理を実行した場合、戻り値は Promiseオブジェクトの resolve関数などで引数を渡すのと同じように扱われます。
上記のコードで言うところの 「.then(response => 」 あたりの部分が、await で置き換えられるということになります。

fetchで返ってくるレスポンスの主要プロパティ・メソッド

fetchメソッドで取得したレスポンスデータやステータスコードなどの関連する情報は、まとめてResponseオブジェクトとして扱われます。
そこで、Responseオブジェクトの中でもよく使用されるプロパティやメソッドを、以下の一覧で紹介します。

【プロパティ】

【メソッド】

fetchでのリクエストのHTTPメソッドを指定する

基本構文の欄でも解説したように、fetchメソッドはリクエスト時のオプションを第2引数で指定することができます。
オプションを使用して、HTTPメソッドやリクエストヘッダーなどの詳細な情報を指定する方法についても、具体的に確認していきましょう。

GETメソッドを使用する

上述したように、fetchメソッドのリクエストはデフォルトでGETリクエストとなるため、基本的にはオプションでGETメソッドを指定する必要はありません。
ただし、明示的にGETメソッドを指定したい場合や、リクエストヘッダーなどを細かく設定したい場合に、オプションを活用することができます。

以下に、オプションを実際に指定する際の簡単なサンプルを紹介します。

【サンプルコード】

await fetch("https://sample.com", {
  method: ‘GET’,
  headers: {
    'Content-Type': 'application/json'
  },
});

fetchメソッドでよく使用されるオプションをいくつか紹介します。

• method: リクエストのメソッドを指定（GETやPOSTなど）
• headers: リクエストヘッダを指定（Headerオブジェクトでの指定も可能）
• body: リクエストボディの指定（JSON形式の文字列など）
• signal:不要になったリクエストなどを途中で中断したい場合に指定

この他にも、指定可能なオプションがいくつか用意されています。
全てのオプションを確認したい場合は、MDNを参照してください。

また、GETリクエストにパラメータを追加したい場合は、URLに直接記述する他に、URLSearchParamsを併用する方法などがあります。

【サンプルコード】

// 渡したいパラメータをJSON形式で記述する
const params = { 
	a: aaa,
	b: bbb,
	c: ccc,
};

// 記述したパラメータで URLSearchParamsオブジェクトを生成
const query_params = new URLSearchParams(params); 

// URLの後ろにパラメータを付け足す
fetch('${リクエスト先のURL}?' + query_params)

POSTメソッドを使用する

fetchメソッドでPOSTリクエストを送信したい場合も、先ほどと同じようにオプションを指定しましょう。
POSTリクエストの場合は、methodでPOSTメソッドを指定し、リクエストに必要なデータをbodyで指定します。

【サンプルコード】

await fetch("https://sample.com", {
  method: ‘POST’,
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(deta)
});

リクエストのボディの設定に利用できる主なデータフォーマットは以下のとおりです。

• JSON
• Blob
• ArrayBuffer
• FormData
• URLSearchParams
• x-www-form-urlencoded

POSTリクエストの場合は、bodyで指定するデータフォーマットに合わせて、Headerで適切なContent-typeを設定する必要があります。

まとめ

いかがでしたか？今回は、Fetch API を使用して Ajax通信を行う方法について解説しました。

比較的新しい技術である Fetch APIですが、非同期処理を行う上で欠かせない重要なインターフェースです。
実際の開発においては必須とも言える技術ですので、使い方をしっかりと理解し、使いこなせるようにしておきましょう。

また、Promiseオブジェクトを用いた非同期処理の記述方法なども、合わせて必要となる知識の１つですので、使い方をよく理解しておくといいでしょう。

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。