解説:Fetch APIでGETリクエストを送信する方法

Fetchは非常に汎用されているAPIリクエストライブラリーとして、多くのユーザーに利用されています。それでは、Fetch APIでGETリクエストを送信するには、どうしたらいいですか?本文では、初心者に対しても分かりやすいFetch APIでのGETリクエストの送信方法を皆さんに紹介します。

中村 拓也

中村 拓也

12 5月 2025

解説:Fetch APIでGETリクエストを送信する方法

Fetchは非常に汎用されているAPIリクエストライブラリーとして、多くのユーザーに利用されています。それでは、Fetch APIでGETリクエストを送信するには、どうしたらいいですか?本文では、初心者に対しても分かりやすいFetch APIでのGETリクエストの送信方法を皆さんに紹介します。

Fetch APIとは

Fetch API とは、WebアプリケーションからHTTPネットワークリクエストを行うためのJavaScriptのインターフェイスです。

Fetch APIの主な特徴は以下の通りです。

基本的な使い方は、fetch() メソッドにリクエスト情報を設定したオブジェクトを渡し、Promiseを返して非同期処理を開始します。レスポンス本文をテキスト、JSON、Blobなどの形式で取得できます。また、Promiseベースで非同期処理に対応していたり、ストリーム型でリクエスト/レスポンス本文を扱えたりするなど、現代のWebアプリケーション開発に適した設計にもなっていることが成功要因だと考えられます。

JavaScriptのFetch APIとは、その使い方を解説!
Fetch APIとは、ブラウザ上のJavaScriptからHTTPネットワークリクエストを行うためのインターフェースとして、Webアプリケーションの開発でよく利用されています。本文では、Fetch APIの基本情報を皆さんに解説した上、Fetch APIの使い方をも詳しく皆さんに紹介します。Fetch APIを使ってみたいが、その使い方が分からない方は、ぜひ本記事を参照してください。

Fetchとブラウザとの互換

Fetchが汎用される大きな要因の1つは、最近のブラウザにデフォルトで実装されていることです。Fetch APIがブラウザに内蔵されているメリットが大きいのです。

そこで、従来JavaScriptでHTTP通信を行う場合にはXMLHttpRequestが使われてきましたが、これはブラウザに内蔵されているわけではありませんでした。Fetch APIが標準実装されたことで、開発者は外部ライブラリに依存することなく、標準のAPIでHTTP通信機能を利用できるようになりました。

Fetch APIでGETリクエストの送信

それでは、Fetch APIを使って、GETリクエスストを送信するには、どうしたらいいですか?どのようなFetchのコードを書けば良いのでしょうか?

Fetch APIでGETリクエストを送信する基本的なコードは次のようになります。

fetch('URL')
  .then(response => {
    // レスポンス処理
  })
  .catch(error => {
    // エラーハンドリング
  });

そして、具体的なHTTPメソッドを指定したい場合は、2番目のパラメータにオプションを渡せます。

fetch(url, {
  method: 'GET' 
})

のように指定できます。他にもヘッダーやボディなどリクエストのカスタマイズが可能です。

以上のように、Fetch APIを使うことでGETリクエストを容易に実行できます。

FetchでGETリクエストにパラメータを追加

Fetch APIでGETリクエストにパラメータを追加する場合は、リクエストURLに直接追記するのが基本的な方法です。

例えば、user_id というパラメータを渡す場合は以下のようにします。

fetch('https://example.com/path/to/resource?user_id=12345')
  .then(response => {
    // ...
  });

?user_id=12345 のようにURLの末尾にクエリストリングを追加することでGETパラメータを渡せます。複数のパラメータは & で区切ります。

fetch('https://example.com/path?id=123&name=abc') 

encodeURIComponent() を使えば、URLエンコードも適切に処理できます。

const id = encodeURIComponent('id:123');
fetch(`https://example.com/path?${id}`); 

このようにFetch APIでは、リクエストURLに直接パラメータを設定するのが簡単な実装方法です。配列やオブジェクトもURLエンコードして渡せます。

Fetch APIの実装コードの自動生成

Fetch APIの実装コードを書くのが面倒くさくて嫌だと思っているかもしれません。その場合は、使いやすいAPI管理ツールのApidogを使って、1クリックだけで、APIの定義書からFetch APIの実装コードを生成してくれます。

button

また、Apidogというツールは、非常に直感的なUIでAPIを簡単にテストすることもできるため、APIの疎通確認をした上、Fetchの実行コードを生成することで、作業の効率性もかなり向上できるのではないでしょう。

ステップ⒈Apidogで実装したいAPIをクリックして、右側パネルで「コード生成」にガーソルを置き、「クライアントコードを生成」を選択します。

Apidogクライアントコードの生成

ステップ⒉コード生成ウィンドウで、「JavaScript」を選択し、「Fetch」を選択すると、当該APIのFetch実装コードを生成してくれます。

Fetchの実装コードを生成
button

FetchでPOSTリクエストの実装コード例

次は、ApidogがAPIの定義や仕様に自動生成したFetchのGETリクエストの例になります。

var myHeaders = new Headers();
myHeaders.append("User-Agent", "Apidog/1.0.0 (https://apidog.com)");

var requestOptions = {
   method: 'GET',
   headers: myHeaders,
   redirect: 'follow'
};

fetch("http://127.0.0.1:3658/m1/424554-0-default/pet/findByStatus?status", requestOptions)
   .then(response => response.text())
   .then(result => console.log(result))
   .catch(error => console.log('error', error));

テストのために、このFetchの実装コードをChromeのコンソールにコピペして、実行すると、成功にレスポンスデータを取得することができますね。

まとめ

Fetch API自体はJavaScriptでHTTP通信を実現する標準的なインターフェイスです。ブラウザに内蔵されているので、外部ライブラリを使うことなく利用できます。しかし、Fetchを使った通信処理のコードを自前で書くのは大変です。リクエスト送信からレスポンス処理まで、いろいろと設定する必要があります。

そこで注目したいのが、API定義からFetchのコードを自動生成してくれるツール「Apidog」です。

ApidogではGUIの操作だけで目的のAPIを選び、1クリックでそのAPIに対応したFetchによるクライアントコードが作成できます。リクエストの方法やヘッダー、パラメータといった細かい設定も考慮した上でのコード生成が可能です。つまりコードを一から書く手間を大幅に省けるのです。生成したコードをそのままアプリに組み込めば、短時間でFetchを用いたAPI通信機能が実装できるのです。

button

Explore more

MindsDB: あらゆるITユーザーのための万能MCPサーバー

MindsDB: あらゆるITユーザーのための万能MCPサーバー

MindsDBは、200以上のデータソースへの接続を容易にし、AIアプリの構築やインサイトの探索をプロのように実現します。さらなるデータソースの接続や、APIdogでのAPIドキュメント化をお試しください。

26 5月 2025

IT初心者必見!Google Drive MCPサーバーでAIを強化する方法

IT初心者必見!Google Drive MCPサーバーでAIを強化する方法

MCPサーバーは、AIをソフトウェア開発でより効果的なパートナーにし、生産性を向上させます。Google Drive MCPサーバーはAIのデータ統合を簡素化し、API開発ではApidog MCPサーバーが重要な役割を果たします。

22 5月 2025

2025最新:Node.jsでWebSocketを利用する

2025最新:Node.jsでWebSocketを利用する

WebSocketはブラウザとサーバー間のリアルタイムな双方向通信を可能にする技術です。Node.jsでwsモジュールを使って、WebSocket通信を簡単に実現することができます。本文では、Node.jsでWebSocketを利用する方法を紹介します。必要な方はぜひこの記事の内容を参照してください。

12 5月 2025

ApidogでAPIデザイン中心のアプローチを取る

APIの開発と利用をよりシンプルなことにする方法を発見できる