学ぶ JavaScriptにおけるAPIの取得と操作 | 非同期JavaScriptとAPI統合

メニューを表示するにはスワイプしてください

APIとは何か、そしてどのように操作するか

定義

API（Application Programming Interface）は、異なるソフトウェアアプリケーション同士が通信するための規則やプロトコルの集合。

ウェブ開発において、APIはJavaScriptコードが外部サービスと連携することを可能にし、サーバーからデータを取得したり、フォームデータを送信したり、サードパーティサービスと統合したりする際に利用される。

現代のJavaScriptアプリケーションでは、APIは主に以下の用途で使用される：

サーバーからデータを取得（例：天気データ、ニュース記事、商品詳細の取得）
サーバーへデータを送信（例：フォームの送信やユーザー設定の保存）
サードパーティサービスとの連携（例：Google Maps、Twitter API、決済ゲートウェイ）

APIとのやり取りは、HTTPリクエストをAPIエンドポイントに送信し、サーバーが通常JSON形式でデータを返すことで行われる。

さらに学ぶ

JSONが初めての方や、仕組みについてさらに理解を深めたい方は、記事 Understanding and Working with JSON Data をご覧ください。

fetch() を使ったHTTPリクエストの送信

fetch() 関数は、JavaScriptでネットワークリクエストを行うための最新の方法です。リクエストが完了すると解決されるPromiseを返します。

index.html

index.js

この例は、fetch() を使用して API へ HTTP GET リクエストを送信する方法を示しています。fetchData 関数は指定されたエンドポイント（https://jsonplaceholder.typicode.com/posts/1）にリクエストを送信します。レスポンスを受信した後、response.json() によって JSON データが解析されます。解析されたデータから投稿のタイトルが抽出され、HTML の段落に表示されます。

APIレスポンスの処理：JSONの解析とレスポンスステータスの確認

APIリクエストを送信した後、リクエストが成功したかどうかを確認し、レスポンスを適切に処理することが重要です。多くの場合、APIから返されるデータはJSON形式であるため、response.json() を使って解析する必要があります。

さらに、リクエストが成功したことを確認するために、常にレスポンスステータス（ステータスコード200～299）をチェックする必要があります。

index.html

index.js

この例は、APIリクエストのレスポンスステータスの処理方法を示しています。fetchAndCheckStatus関数はAPIエンドポイントにリクエストを送り、response.okを使ってレスポンスが成功かどうかを確認します。response.okは、ステータスコードが200～299の範囲の場合にtrueを返します。リクエストが成功した場合、JSONデータが解析されて表示されます。リクエストが失敗した場合は、エラーステータスコードがHTMLに表示されます。

APIのエラーハンドリングとネットワーク障害への対応

APIを利用する際には、以下のような潜在的なエラーへの対応が重要です。

ネットワーク障害：ネットワークの問題によりサーバーに接続できない場合
無効なレスポンス：APIがエラー（例：404 Not Foundや500 Server Error）を返す場合

try...catchとfetch()を組み合わせて、ネットワークエラーやAPIレスポンスエラーの両方を管理できます。

index.html

index.js

この例は、APIエラーを効果的に処理する方法を示しています。fetchWithErrorHandling関数は、try...catchを使用してネットワークエラーと無効なAPIレスポンスの両方を管理します。無効なURLへのリクエストが失敗した場合や、レスポンスのステータスコードが200～299の範囲外の場合、特定のメッセージとともにエラーがスローされます。その後、catchブロックでエラーメッセージがHTMLに表示されます。この方法により、不正なエンドポイントや接続障害など、API呼び出し時の問題が適切に管理され、ユーザーに明確に伝えられます。