【jQuery】$.getJSON()で外部データを取得して表示する

JavaScript
2026.06.02

こんにちは、かつコーチです。

「$.ajax()は分かったけど、JSON取得だけならもっと短く書けないの？」と感じたことはありませんか。

jQueryには、JSON形式のデータ取得に特化した$.getJSON()というショートカットメソッドが用意されています。

この記事では、.getJSON()の基本的な使い方から、取得したデータをDOMに反映させる実装例、.ajax()との使い分けまで解説します。

読み終わる頃には、外部APIから取ってきたデータを一覧表示に組み込めるようになります。

$.getJSON()の基本の書き方

基本構文

$.getJSON()は、GETメソッドでJSON形式のデータを取得するための専用メソッドです。

内部的には$.ajax()にmethod: 'GET'とdataType: 'json'を指定したものと同じ動きをします。

$.getJSON('/api/posts', function(data) {
  console.log('取得成功', data);
});

第1引数にURL、第2引数に成功時のコールバック関数を渡すだけで済むため、$.ajax()よりも記述量が少なくて済みます。

Deferredオブジェクト（非同期処理の状態と結果を管理する仕組み）を返す点は$.ajax()と同じなので、.done()・.fail()もそのまま使えます。

$.getJSON('/api/posts')
  .done(function(data) {
    console.log('取得成功', data);
  })
  .fail(function(jqXHR, textStatus) {
    console.error('取得失敗', textStatus);
  });

パラメータ付きで取得する

クエリパラメータを付けたい場合は、第2引数にオブジェクトを渡します。

$.getJSON('/api/posts', { category: 'tech', limit: 10 }, function(data) {
  console.log('取得成功', data);
});
// 実際のリクエストURL: /api/posts?category=tech&limit=10

つまずきやすい設定・注意点として、第2引数にオブジェクトを渡すと自動的にパラメータとして扱われるため、第2引数と第3引数（コールバック関数）の順番を間違えないよう気をつけてください。

取得したデータをDOMに反映する

実際の画面では、取得したJSONデータをリストとして表示することが多いです。

以下は、記事一覧を取得してHTMLに反映する例です。

<ul id="post-list"></ul>

$.getJSON('/api/posts', function(data) {
  const $list = $('#post-list');
  $list.empty();
  // empty()で表示済みの内容を一度クリアしてから追加する

  data.forEach(function(post) {
    const $item = $('<li>').text(post.title);
    $list.append($item);
  });
});

$('<li>')のようにタグ名を$()に渡すと、新しいDOM要素を作成できます。

作成した要素に.text()で文字列をセットし、.append()で親要素に追加する流れが基本パターンです。

よくあるつまずきポイント・エラー対処

データが空でもエラーにならず表示が崩れる

$.getJSON()は通信自体が成功していれば、レスポンスが空配列でもコールバックが呼ばれます。

❌ Before（データが空のケースを考慮していない）

$.getJSON('/api/posts', function(data) {
  const $list = $('#post-list');
  data.forEach(function(post) {
    $list.append($('<li>').text(post.title));
  });
  // dataが空配列のとき、リストが何も表示されないまま放置される
});

私が実装したとき、開発中はダミーデータが常に入っていたため気づかず、本番環境で記事が0件のカテゴリを表示したところ、ユーザーには真っ白なリストしか見えない状態になっていました。

「読み込み中のまま止まっているのか、単に記事がないのか」が画面から判断できず、問い合わせをもらって初めて気づいたつまずきです。

✅ After（空データの場合の表示を用意する）

$.getJSON('/api/posts', function(data) {
  const $list = $('#post-list');
  $list.empty();

  if (data.length === 0) {
    $list.append('<li>該当する記事はありません</li>');
    return;
  }

  data.forEach(function(post) {
    $list.append($('<li>').text(post.title));
  });
});

配列のlengthをチェックし、0件のときは専用のメッセージを表示するようにすることで、ユーザーが状況を正しく理解できるようになります。

レスポンスがJSONとして解釈されずエラーになる

サーバー側のレスポンスヘッダーが正しくapplication/jsonになっていないと、$.getJSON()がパースに失敗することがあります。

❌ Before（Content-Typeの設定漏れに気づかない）

$.getJSON('/api/posts')
  .fail(function(jqXHR, textStatus) {
    console.error(textStatus);
    // "parsererror" とだけ表示され、原因が分からない
  });

コンソールにはparsererrorとしか出ず、最初は自分のJavaScriptのコードが間違っているのだと思い込み、data.forEach周りを何度も書き直していました。

実際にはサーバー側がレスポンスヘッダーをtext/htmlで返していたことが原因で、jqXHR.responseTextを確認して初めて気づきました。

✅ After（jqXHR.responseTextで実際のレスポンス内容を確認する）

$.getJSON('/api/posts')
  .fail(function(jqXHR, textStatus) {
    console.error('ステータス:', textStatus);
    console.error('実際のレスポンス:', jqXHR.responseText);
    // 実際のレスポンス: "<html>...</html>" のようにHTMLが返っていた、などが分かる
  });

parsererrorが出たときは、JavaScript側ではなくサーバー側のレスポンス内容・Content-Typeヘッダーを疑うのが定石です。

jqXHR.responseTextで生のレスポンスを確認すれば、原因の切り分けが早くなります。

応用・一歩先の使い方

複数のJSONエンドポイントを並行して取得したい場合は、$.when()を使うと便利です。

$.when(
  $.getJSON('/api/posts'),
  $.getJSON('/api/categories')
).done(function(postsResponse, categoriesResponse) {
  // 各引数は [data, textStatus, jqXHR] の配列になる
  const posts = postsResponse[0];
  const categories = categoriesResponse[0];

  console.log('記事一覧', posts);
  console.log('カテゴリ一覧', categories);
});

$.when()は複数のDeferredオブジェクトをまとめて待機し、すべて完了したタイミングで.done()を呼び出してくれます。

素のJavaScriptのPromise.all()に近い役割を持つメソッドだと考えると理解しやすいです。

一覧画面とカテゴリ絞り込みを同時に組み立てたいときなど、複数のAPIを組み合わせる場面で活用してみてください。

まとめ

この記事のポイント

  • $.getJSON()はGET通信でJSONを取得するための専用ショートカットメソッド
  • 第2引数にオブジェクトを渡すとクエリパラメータとして扱われる
  • 取得データが0件のケースを考慮した表示処理を必ず入れる
  • parsererrorが出たときはサーバー側のContent-Typeを疑い、jqXHR.responseTextで確認する
  • 複数のJSONを並行取得したいときは$.when()を使う

次に読むべき記事

  • $.ajax()でAPI通信する基本（fetchとの違いも解説）
  • jQueryでよくあるエラーと解決法まとめ（$ is not defined等）
  • jQueryと素のJavaScript、2026年どちらを選ぶべきか徹底比較

タグ: jQuery, 中級者向け, API連携

タイトルとURLをコピーしました