ホーム

お役立ち記事一覧

お役立ち記事詳細

プログラミング学習公開 2026.10.03

APIとは？初心者向けに、JSONの取得と「失敗したとき」を動かして解説。ナミノリの求人検索にも抜けていた response.ok

Q: APIとAjaxの違いは？

APIは「データを受け渡す窓口」そのもので、Ajaxは「ページを読み込み直さずに、JavaScriptで裏側から通信する」やり方のことです。ナミノリの件数表示は、Ajaxというやり方で、件数を返すAPIを呼んでいます。

Q: 外部のサービスのAPIを使うときも同じですか？

確かめることは同じです。加えて、多くのサービスでは利用登録とAPIキーが必要になり、1日に呼べる回数に上限があります。APIキーはパスワードと同じで、HTMLやJavaScriptに書いて公開したり、Gitに記録したりしてはいけません。

Q: 「CORS」のエラーが出ました。no-cors を付ければ直りますか？

直りません。CORSは、別のサイトのデータを勝手に読めないようにするブラウザの仕組みです。mode: "no-cors" を付けるとエラーは出なくなりますが、中身を読めない返事が返ってくるだけで、データは使えません。CORSは、データを返す側（サーバー）の設定で許可してもらうものです。この記事の練習では、ページとJSONが同じサーバーにあるので、CORSは関係しません。

Q: この練習で、本格的なAPIを作ったことになりますか？

なりません。この記事でしたのは、置いてあるJSONファイルを読み込む側の練習です。本格的なAPIは、サーバー側のプログラムがデータベースを検索するなどして、毎回JSONを作って返します。ナミノリの件数APIもそうです。APIを作る側の考え方は、下の講座で扱っています。

執筆・監修: 徐聖博／株式会社シンシア代表取締役社長

APIは、プログラム同士がデータ（JSON）をやり取りする窓口です。ナミノリの求人検索の裏で動く件数APIをNetworkタブで確かめ、自分のパソコンだけでJSONを取得するページを作ります。fetchは404でも失敗にならないため、response.ok・データの形の確認・catch・finallyで失敗に備える書き方を、わざと壊して確かめます。

APIとは？初心者向けに、JSONの取得と「失敗したとき」を動かして解説

APIは、プログラム同士がデータをやり取りするための窓口です。人間はWebページを見ますが、プログラムは決まった形のデータ（多くは JSON）を受け取ります。

この記事では、まず実在するサービスの画面の裏で、APIがどう呼ばれているかを自分の目で確かめます。題材はナミノリの求人検索です。そのあと、自分のパソコンの中だけで動く小さなページを作り、JSONを取得して表示します。

ただ、この記事でいちばん時間を割くのは、取得に失敗したときの書き方です。書き方を説明するために自分たちのコードを読み直したら、ナミノリにもその処理が抜けていました。

ナミノリの求人検索の裏で動いているAPI

ナミノリの求人一覧には、条件を選ぶと「該当する求人の件数」を表示する仕組みがあります。スマートフォンの幅で表示しているとき、条件のチェックを変えるたびに、ページ全体を読み込み直さずに件数だけを取りに行きます。

このとき呼ばれているのは、次のURLです。

/jobs?（選んだ条件）&count_only=true

返ってくるのはWebページ（HTML）ではなく、次のようなJSONです。

{"count": 9}

「条件に合う求人は9件」という答えだけを、プログラムが読める形で返しています。これがAPIです。画面に出ている件数は、ブラウザのJavaScriptがこのJSONから count の値を取り出して書き込んだものです。

自分の画面で確かめる

Chromeで求人一覧を開く
右クリック →「検証」で検証画面を開き、左上のスマートフォンの形のアイコン（デバイスモード）を押して、幅を狭くする
上のタブから「Network」を選び、その下の「Fetch/XHR」を押す（APIの通信だけに絞り込める）
ページの絞り込み条件のチェックを1つ変える

Networkに jobs?...count_only=true という行が増えます。クリックして「Response（レスポンス）」タブを開くと、{"count": ...} が見えます。数字は、その時点の求人の件数によって変わります。

失敗したときの処理が無かった

この記事を書くために、件数を取りに行くナミノリのコードを読み直しました。書かれていたのは、ほぼ次の形です。

fetch(url)
  .then((response) => response.json())
  .then((data) => {
    countElement.textContent = data.count;
  });

成功したときの処理しか書かれていません。サーバーがエラーを返したり、通信が切れたりしたときに何をするかが無いため、前に表示していた件数が、黙ってそのまま残ります。条件を変えたのに数字が変わらず、それが正しい件数なのか、取得に失敗したのか、画面からは区別できません。

2026年10月3日に、失敗したら件数を「-」と表示するように直しました。直し方は、この記事の後半で練習するものと同じです。

ナミノリの「Web初級講座」で「Ajax通信とAPI」の回を受けた社外の受講者33人は、全員が完了し、2回以上かかったのは4人でした。講座の中でも止まりにくい回です。APIの考え方は、それほど難しくありません。抜けやすいのは、失敗したときにどうするかを書くことのほうです。

※ 受講者数は社内の確認用アカウントを除いて集計しました。集計は2026年10月3日。

練習の準備：ファイルを2つ作る

ここからは自分のパソコンで練習します。外部のサービスや、APIを使うための鍵（APIキー）は使いません。同じフォルダに置いたJSONファイルを、APIの代わりに読み込みます。

新しいフォルダ（例：api-practice）を作り、次の2つのファイルを保存してください。

courses.json

{
  "courses": [
    { "title": "Web初級講座", "lectures": 8 },
    { "title": "UNIX初級講座", "lectures": 7 },
    { "title": "JavaScript初級講座", "lectures": 15 }
  ]
}

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>APIの練習</title>
</head>
<body>
  <button id="load">講座の一覧を読み込む</button>
  <p id="status"></p>
  <ul id="list"></ul>

  <script>
    const button = document.querySelector("#load");
    const statusText = document.querySelector("#status");
    const list = document.querySelector("#list");

    async function loadCourses() {
      button.disabled = true;
      statusText.textContent = "読み込み中…";
      list.textContent = "";

      try {
        const response = await fetch("courses.json");
        if (!response.ok) {
          throw new Error(`サーバーがエラーを返しました（${response.status}）`);
        }

        const data = await response.json();
        if (!Array.isArray(data.courses)) {
          throw new Error("データの形が想定と違います");
        }

        for (const course of data.courses) {
          const item = document.createElement("li");
          item.textContent = `${course.title}（全${course.lectures}回）`;
          list.append(item);
        }
        statusText.textContent = `${data.courses.length}件を読み込みました`;
      } catch (error) {
        statusText.textContent = `読み込めませんでした：${error.message}`;
      } finally {
        button.disabled = false;
      }
    }

    button.addEventListener("click", loadCourses);
  </script>
</body>
</html>

ページは「サーバー」経由で開く

index.html をダブルクリックして開くと、ボタンを押しても 読み込めませんでした：Failed to fetch と表示されます。ブラウザは、ファイルを直接開いたページ（アドレスが file:// で始まる）からの fetch を、安全のために止めるからです。

練習用の小さなサーバーを起動して開きます。Mac・Linux・WindowsのWSLなら、api-practice フォルダで次を実行します（Python 3 が必要です）。

python3 -m http.server 8000

ブラウザで http://localhost:8000/ を開き、ボタンを押してください。

3件を読み込みました
・Web初級講座（全8回）
・UNIX初級講座（全7回）
・JavaScript初級講座（全15回）

と表示されれば成功です。終わったら、ターミナルで Ctrl + C を押すとサーバーが止まります。

コードの読み方：成功までに4つの確認がある

行	していること	無いとどうなるか
`await fetch("courses.json")`	頼んで、返事（レスポンス）を待つ	—
`if (!response.ok)`	返事が「成功」かを確かめる	404や500でも、中身を読もうとして先に進む
`await response.json()`	中身をJSONとして読む	—
`Array.isArray(data.courses)`	欲しいデータが想定どおりの形かを確かめる	形が違うと、意味の分からないエラーになる
`catch (error)`	どこかで失敗したら、理由を画面に出す	何も表示されず、利用者には止まったように見える
`finally`	成功でも失敗でも、最後に必ずボタンを押せる状態に戻す	失敗のあと、もう一度押せなくなる

特に大事なのは2行目の response.ok です。fetch は、サーバーが404や500を返しても「失敗」になりません。 返事が届いた時点で成功扱いになり、catch には進みません。返事の中身が成功かどうかは、自分で response.ok（ステータスコードが200番台か）を確かめる必要があります。ナミノリのコードに抜けていたのも、この確認でした。

表示に textContent を使っているのも意味があります。受け取ったデータに <script> のような文字が入っていても、HTMLとして実行されず、文字のまま表示されます。

わざと失敗させてみる

1か所ずつ壊して、表示が変わることを確かめます。1つ試したら元に戻してください。

壊し方	画面の表示
`fetch("courses.json")` を `fetch("course.json")` にする（ファイルが無い）	読み込めませんでした：サーバーがエラーを返しました（404）
`courses.json` の最後の `}` を消す（JSONが壊れている）	読み込めませんでした：（JSONとして読めない、という英語のメッセージ）
`courses.json` の `"courses"` を `"items"` にする（形が違う）	読み込めませんでした：データの形が想定と違います
サーバーを止めてからボタンを押す（通信できない）	読み込めませんでした：Failed to fetch

どの失敗でもボタンは押せる状態に戻るので、直してからもう一度押せば読み込めます。これが再試行です。

response.ok の確認を消して1つ目を試すと、違いが分かります。404のページ（HTML）をJSONとして読もうとして、Unexpected token '<' ... is not valid JSON という、2つ目と同じ種類の「JSONとして読めない」メッセージになります。原因はファイル名の間違いなのに、表示からはJSONが壊れているように見えてしまいます。

よくある質問

APIとAjaxの違いは？

APIは「データを受け渡す窓口」そのもので、Ajaxは「ページを読み込み直さずに、JavaScriptで裏側から通信する」やり方のことです。ナミノリの件数表示は、Ajaxというやり方で、件数を返すAPIを呼んでいます。

外部のサービスのAPIを使うときも同じですか？

確かめることは同じです。加えて、多くのサービスでは利用登録とAPIキーが必要になり、1日に呼べる回数に上限があります。APIキーはパスワードと同じで、HTMLやJavaScriptに書いて公開したり、Gitに記録したりしてはいけません。

「CORS」のエラーが出ました。no-cors を付ければ直りますか？

直りません。CORSは、別のサイトのデータを勝手に読めないようにするブラウザの仕組みです。mode: "no-cors" を付けるとエラーは出なくなりますが、中身を読めない返事が返ってくるだけで、データは使えません。CORSは、データを返す側（サーバー）の設定で許可してもらうものです。この記事の練習では、ページとJSONが同じサーバーにあるので、CORSは関係しません。

この練習で、本格的なAPIを作ったことになりますか？

なりません。この記事でしたのは、置いてあるJSONファイルを読み込む側の練習です。本格的なAPIは、サーバー側のプログラムがデータベースを検索するなどして、毎回JSONを作って返します。ナミノリの件数APIもそうです。APIを作る側の考え方は、下の講座で扱っています。

まとめ

APIは、プログラム同士がデータ（多くはJSON）をやり取りする窓口
ナミノリの求人検索も、件数だけを返すAPIを裏で呼んでいる。Networkタブの「Fetch/XHR」で見える
fetch は404や500でも失敗にならない。response.ok を自分で確かめる
受け取ったデータの形を確かめ、失敗したら catch で理由を出し、finally で再試行できる状態に戻す
ナミノリの件数表示にも失敗時の処理が無く、2026年10月3日に直した

APIを作る側の考え方（どんなURLにするか、エラーをどう返すか）は、API設計入門講座（全5回・無料）で学べます。通信の基本から確かめたい人は、Webの仕組みの記事とWeb初級講座（4回目が「Ajax通信とAPI」）から始めてください。JavaScriptの書き方が不安なら、JavaScript入門に戻るのがおすすめです。