【JavaScript】API呼び出しとは？初心者向けに使い方やコード例をわかりやすく解説

フロントエンド開発•
JavaScriptREST API

はじめに

JavaScriptでのAPI呼び出しは、外部のデータやサービスとやりとりを行う際に欠かせない要素です。

たとえば、天気情報やSNSの投稿データ、社内の在庫管理システムなどから情報を取得するときも、JavaScriptによるAPI呼び出しが活用されます。

初心者の方にとっては、非同期処理の考え方やHTTPメソッドなど、少し戸惑うポイントが多いかもしれません。

しかし、API呼び出しの手順をしっかり理解すれば、画面に動的な情報を表示したり、ユーザーの入力内容をサーバーへ送って受け取った結果を扱ったりと、さまざまな機能を実装できるようになります。

ここでは、まずAPI呼び出しの基本的な概念を整理しながら、fetchやAxiosのようなツールを使ったコード例を紹介していきます。

加えて、実際の開発現場でもよく話題になるエラー処理やJSONの扱い方なども解説します。

この記事を読むとわかること

  • JavaScriptによるAPI呼び出しの流れ
  • fetchやAxiosなどの基本的な使い方
  • JSON形式のデータの取り扱い方
  • 非同期処理やエラー処理のポイント
  • 実務で想定される活用シーンと注意点

これらのポイントを押さえると、はじめてのAPI呼び出しでも困ることが少なくなるでしょう。

さらに、今後実務に進んだとき、トラブルに早めに気づいて解決できるようになります。

では、さっそく始めていきましょう。

API呼び出しとは何か

API呼び出しとは、外部や内部のサーバーが提供する機能やデータへアクセスして、情報のやり取りを行う仕組みのことです。

JavaScriptを使えば、ブラウザが対応しているfetch APIや、外部ライブラリのAxiosなどを通じてリクエストを送信できます。

その結果、たとえば下記のようなことが可能になります。

  • ニュースサイトから最新記事の情報を取得して、Webアプリケーションに表示する
  • サーバー側にユーザーの入力したデータを送信して、登録や更新を行う
  • 地図サービスから取得した位置情報をもとに、地図上にマーキングして表示する

こうした処理はAPI呼び出しがあってこそ成立します。

つまり、ユーザーとサーバーを繋ぐ重要な役割を担っているのがJavaScriptによるAPI呼び出しです。

非同期処理との関係

API呼び出しには非同期処理が絡んできます。

リクエストを送ってからサーバーからの応答を受け取るまで、タイムラグが発生するのが普通です。

もしこれを同期処理で行うと、サーバーの処理が終わるまでブラウザ全体が固まったような状態になってしまいます。

そのため、JavaScriptのAPI呼び出しは、非同期処理を使って、サーバーの応答を待っている間にもほかの処理を続行できるようになっています。

この辺りの仕組みを理解しておくと、実際にコードを書くときも混乱しにくくなります。

実務でよくあるAPI呼び出しの例

実務での例としては、フロントエンドからサーバーへ注文情報やユーザー登録情報を送って、戻り値として登録結果や在庫状況を受け取る、というシーンが多いです。

特に、ショッピングサイトや会員登録フォーム、チャットアプリなどでは頻繁にAPIを呼び出します。

その際に、APIのURLやHTTPメソッド（GET、POSTなど）、必要なパラメータ、そして認証用のトークンなどを正しく扱う必要があります。

基本的なHTTPメソッド

API呼び出しでは、サーバーにどのような操作をしてもらうのかを指定するために、いくつかのHTTPメソッドを使います。

ここでは初心者の方にもわかりやすいように、代表的なものを簡単にまとめます。

GET

データを取得したいときに用います。 ニュース記事の一覧を取ってきたり、ユーザープロフィールを読み込んだりする場面で使われます。

POST

サーバーに新しい情報を送りたいときに使います。 会員登録や新しいタスクの追加などが典型例です。

PUT

既存のデータを完全に置き換えたいときに使われます。

PATCH

既存のデータの一部だけを更新したいときに用いられることがあります。

DELETE

データを削除したいときに用います。

これらを使ってサーバーに対して「何をどうしてほしいのか」をリクエストとして送信し、その応答を受け取るのがJavaScriptのAPI呼び出しの大まかな流れになります。

fetchを使ったシンプルなAPI呼び出し

JavaScriptでAPI呼び出しを行う際、まず思い浮かぶのがfetch APIです。

fetchはブラウザが標準で用意している機能のため、追加のライブラリを入れなくても利用できます。

ここでは、外部のJSON形式のデータをGETメソッドで取得して、ページに表示する例を見ていきましょう。

// 外部APIからJSONデータを取得し、コンソールに出力する例
fetch("https://api.example.com/data")
  .then(response => {
    if (!response.ok) {
      // ステータスコードがエラーを示す場合はここで処理
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then(data => {
    console.log("取得したデータ:", data);
    // 必要に応じて、画面へ表示するなどの処理を行う
  })
  .catch(error => {
    console.error("データの取得に失敗しました:", error);
  });

thenとcatch

fetch()はPromiseという仕組みで非同期処理を扱います。

上記のコードでは then() で成功時の処理を、 catch() で失敗時の処理をまとめています。

この構文に慣れておくと、さまざまなAPI呼び出しパターンに対応できます。

JSONデータの扱い

サーバーから返ってきたデータをJavaScriptオブジェクトとして扱いたいときは、 response.json() と書くことで自動的にJSONをパースしてくれます。

あとは取得したオブジェクトの内容を自由に参照したり、画面に表示したりできます。

たとえば、 data.title や data.items[0].name のようにアクセスすることで値を取り出せます。

async/awaitを使ったAPI呼び出し

then() と catch() で書く方法はややネストが深くなりがちです。

そこで登場するのが、async/await という構文です。

これはコードを同期処理のように書けるため、読みやすいのが大きなメリットです。

// async/awaitを使ったAPI呼び出し例
async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    const data = await response.json();
    console.log("取得したデータ:", data);
  } catch (error) {
    console.error("データの取得に失敗しました:", error);
  }
}

// 関数を実行
fetchData();

このように書くと、一連の処理が順番どおりに並んでおり、非同期処理が苦手な方でも理解しやすいでしょう。

POSTリクエストでデータを送る

続いて、実務でよく使われるのがPOSTリクエストです。

たとえば、ユーザーがフォームに入力した情報をサーバーに送信して、新しいレコードを作成するといった場面です。

async function postData() {
  const payload = {
    name: "山田太郎",
    email: "taro@example.com",
  };

  try {
    const response = await fetch("https://api.example.com/users", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(payload),
    });

    if (!response.ok) {
      throw new Error("Failed to create user");
    }

    const data = await response.json();
    console.log("ユーザー登録が成功しました:", data);
  } catch (error) {
    console.error("ユーザー登録に失敗しました:", error);
  }
}

postData();

ここでは、method に POST を指定し、さらに headers で送信データの形式がJSONであることを伝えています。

そして、JavaScriptオブジェクトである payload を JSON.stringify(payload) で文字列化して body にセットしています。

こうすることで、サーバー側はユーザーの情報を新規登録できるという仕組みです。

Axiosを使ったAPI呼び出し

fetch APIも便利ですが、より機能が充実した外部ライブラリとしてAxiosがあります。

Axiosはエラーレスポンスをわかりやすく扱える点や、IEなどの古いブラウザへの対応も考慮されている点が特徴です。

使い方はfetchと似ており、以下のように記述します。

import axios from "axios";

async function fetchUser() {
  try {
    const response = await axios.get("https://api.example.com/user/123");
    // Axiosの場合、レスポンスデータは response.data に格納されている
    console.log("ユーザー情報:", response.data);
  } catch (error) {
    console.error("ユーザー情報の取得に失敗しました:", error);
  }
}

fetchUser();

POSTリクエスト時の書き方

Axiosを使ったPOSTリクエストの例も見ておきましょう。

import axios from "axios";

async function createUser() {
  const payload = {
    name: "田中花子",
    email: "hanako@example.com",
  };

  try {
    const response = await axios.post(
      "https://api.example.com/users",
      payload
    );
    console.log("ユーザー登録:", response.data);
  } catch (error) {
    console.error("登録に失敗:", error);
  }
}

createUser();

fetchとは異なり、POSTデータを body ではなく、第2引数として直接 payload を渡します。

それ以外の部分はほぼ同じですので、fetchとAxiosの使いやすい方を選択しても構いません。

実務で考慮したいポイント

JavaScriptのAPI呼び出しは、コードを書くときには意外と細かな配慮が必要になります。

ここでは、代表的な注意点をいくつか紹介します。

エラー処理

APIが正しく動いていない、あるいはリクエストに問題がある場合、HTTPステータスコードでエラーを返すことがあります。

たとえば、404（リソースが見つからない）や500（サーバーエラー）などです。

こうしたエラーコードをきちんと拾って処理しないと、ユーザーには何も起きていないかのように見えてしまうケースもあります。

先ほどのコード例でも、 response.ok をチェックしたり、catchブロックを用意したりすることで、エラー時の処理を明確にしていました。

このように、サーバーから返ってくるステータスコードを踏まえたエラー処理をしっかり組み込みましょう。

CORS

ブラウザ上のJavaScriptから外部ドメインにリクエストを送る場合、 CORS (Cross-Origin Resource Sharing) の制限に引っかかる場合があります。

CORSが適切に設定されていないと、ブラウザはセキュリティ上の理由からリクエストをブロックしてしまいます。

これを回避するには、サーバー側で適切なヘッダー設定を行うか、プロキシサーバーを用いるなど、フロントエンドとサーバーが協力して設定を整える必要があります。

トークン認証

社内システムやSNSのAPIを呼び出すときは、ほとんどの場合トークン認証が必要になります。

ヘッダーに Authorization: Bearer <トークン> のような形で認証情報を含めてリクエストするケースが多いでしょう。

const token = "YOUR_ACCESS_TOKEN";

fetch("https://api.example.com/secure-data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${token}`,
  },
})
  .then(response => response.json())
  .then(data => {
    console.log("認証が必要なデータ:", data);
  })
  .catch(error => {
    console.error("エラー:", error);
  });

このように認証トークンをセットすると、サーバー側で権限チェックを行った上でデータを返してくれます。

実務でありがちなシナリオ

ログインが必要なアプリ

ログイン情報をサーバーにPOSTしてトークンを取得し、以降のリクエストはそのトークンをヘッダーに乗せる

在庫情報の更新

PUTやPATCHを使って、既存の商品データを更新していく

画像のアップロード

フォームデータを扱うなど、JSON以外の送信方法も考慮する必要がある

こうしたシナリオでは、非同期処理が複数同時に走ることも多いため、状況に応じてPromise.allなどを使った同時並行処理にも慣れておくと便利です。

API呼び出しがうまくいかないときのトラブルシューティング

JavaScriptでAPI呼び出しを実装していると、「なんだか動かない」「レスポンスが返ってこない」という状況にぶつかることがあります。

ここでは、よくあるトラブルと解決策を簡単にまとめます。

URLのスペルミス

もっともシンプルですが、APIのURLを間違えているケースです。

ベースURLやエンドポイントの拼写を見直しましょう。

HTTPメソッドやヘッダーの設定ミス

本来はPOSTで送るべきところをGETにしてしまうと、サーバー側が想定しないリクエストを受け取るため、エラーになる可能性があります。

Content-Typeの指定が正しいかどうかも確認が必要です。

サーバー側のCORS設定

ローカルホストでフロントエンドを動かしているときに、サーバー側がCORSの許可を正しく設定していないと、ブラウザがリクエストを拒否してしまいます。

CORSエラーとしてコンソールにメッセージが表示されるので、そこで気づくことが多いです。

タイポ（プロパティのスペルミス）

JSONデータのキーや変数名を間違えて書いていると、データが表示されない、あるいはエラーになることがあります。

console.logを使って、受け取ったデータの構造をしっかりチェックするとトラブルを早期に発見できます。

エラー内容がわからないときは、ブラウザの開発者ツールやコンソールのエラーメッセージをしっかり確認してみてください。

実行環境（ブラウザ vs Node.js）

JavaScriptはブラウザだけでなく、Node.js環境でも利用できます。

ブラウザ

fetch APIが標準で用意されています。CORSの制約があります。

Node.js

バージョンによってはfetchが使えるケースもありますが、Axiosのようなライブラリを使うほうが主流です。CORSは基本的に気にしなくて済みます。

どちらの環境で動かすかによって、利用できるAPIやライブラリが変わるので、そこを考慮して選びましょう。

JSON以外のデータ形式の扱い

APIによっては、テキスト形式やXMLなど、JSON以外の形式が返されることがあります。

とくに画像やPDFなどのバイナリデータを扱うときは、BlobやArrayBufferという形式に変換して扱う場合もあります。

async function fetchImage() {
  try {
    const response = await fetch("https://example.com/image.png");
    const blob = await response.blob();
    // URL.createObjectURL() で表示用のURLを作れる
    const imageUrl = URL.createObjectURL(blob);
    const imgElement = document.getElementById("myImage");
    imgElement.src = imageUrl;
  } catch (error) {
    console.error("画像の取得に失敗:", error);
  }
}

fetchImage();

この例では、取得した画像ファイルをBlob形式として受け取り、ブラウザ上で <img> タグに適用しています。

このように、APIから返ってくるデータ形式によって処理が異なるため、事前に仕様を確認しておきましょう。

セキュリティ面での配慮

JavaScriptでAPIを呼び出すときは、URLや認証トークンなどが前端（フロントエンド）のコードに含まれます。

そのため、以下のようなセキュリティ面の配慮が必要です。

アクセス制御の設定

APIを呼び出せるユーザーや端末を制限する仕組みを検討する

トークンの適切な管理

ローカルストレージなどにトークンを保管する場合は、有効期限や自動ログアウトの設計を行う

HTTPSの利用

平文のHTTPを使っていると盗聴される恐れがあるので、HTTPSを利用した暗号化通信が基本

API呼び出しに必要な秘密鍵やトークンを公開リポジトリに含めてしまうと、安全性が損なわれる恐れがあります。

実務での活用シーン

JavaScriptによるAPI呼び出しは、Webアプリケーションの開発で非常に頻繁に登場します。

以下のようなシチュエーションは特に代表的です。

シングルページアプリケーション（SPA）

ReactやVueなどのフレームワークと組み合わせて、クライアントサイドで動的に画面を切り替えるアプリを作る場合、画面遷移のたびにサーバーへデータを取りに行くためにAPI呼び出しが行われます。

ダッシュボード系ツール

企業の内部システムで、売上データや分析結果をグラフ表示するときなどもAPIの呼び出しでデータを取得し、JavaScriptで描画します。

バッチ処理や自動化

Node.jsのスクリプトとして定期的に実行し、他サービスのAPIから情報を取得してデータベースに保存するなどの運用もよく見られます。

コードメンテナンスのコツ

実務では、API呼び出しのコードがどんどん増えると、管理が難しくなることがあります。

そこでいくつかのコツを押さえておくと、可読性が向上し、バグを発見しやすくなります。

API呼び出し部分を専用の関数にまとめる

同じエンドポイントを複数箇所で呼び出す場合は、API呼び出し専用の関数を作っておき、そこだけを修正すれば済むようにします。

async function getUser(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error("ユーザー取得に失敗しました");
  }
  return await response.json();
}

こうすれば、どこか別の画面でユーザー情報を取得したいときでも、 getUser() を呼び出すだけで済みます。

型チェックやバリデーション

フロントエンドとサーバー側で契約（インターフェース）を決めていても、実際に返ってくるデータが想定外の形式だったということは珍しくありません。

そのため、実務では取得したJSONをすぐに画面に適用するのではなく、必要に応じて型チェックやバリデーションを行うケースがあります。

テストの重要性

API呼び出しを含む機能は、サーバーがダウンしていたり仕様が変わったりする可能性があるため、テストコードや動作確認の仕組みを設けておくと安心です。

たとえば、テスト時にモックサーバー（仮想のサーバー）を立てておいて、実際にリクエストが送られてくるかどうか確認することもあります。

まとめ

JavaScriptによるAPI呼び出しは、Webアプリケーションを構築する上でなくてはならない仕組みです。

特に、fetchやAxiosを使った非同期処理の書き方を理解しておくことで、ユーザーからの入力をサーバーに送ったり、サーバーから返ってきたデータを画面に反映したりといった一連の処理をスムーズに実装できます。

初心者の方はまずGETリクエストから試し、JSONデータを表示するところまでやってみると良いでしょう。

その後、POSTリクエストやヘッダーを使った認証などに進むことで、実務のユースケースにも対応できるようになります。

また、エラー処理やCORS、セキュリティ面なども踏まえ、全体の設計をしっかりと考えておくことが大切です。

そうすることで、API呼び出しによる柔軟な機能をアプリケーションに組み込み、より便利で使いやすいサービスを提供できるようになるでしょう。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説