JavaScriptで外部データを読み込んで、ページ内に表示したい──そんなときに使えるのがFetch APIです。この記事では、外部のJSONデータを取得し、記事リストをHTML上に動的に表示する基本の使い方を初心者向けにやさしく解説します。

Fetch APIとは？

fetch()は、ネットワーク越しにリソース（JSON、HTML、画像など）を非同期で取得できるJavaScriptの機能です。従来のXMLHttpRequestよりも記述がシンプルで、現在では主流の方法となっています。

このAPIを使うことで、例えば「記事一覧を読み込む」「フォームの入力を送信する」「検索結果を絞り込む」など、Webページをよりインタラクティブに動かせるようになります。

前提：JSONファイルの例

ここでは、以下のような記事一覧を含んだJSONファイルを用意したとします。

[
  {
    "title": "CSS Flexbox入門",
    "url": "https://example.com/flexbox"
  },
  {
    "title": "HTMLフォームの基本",
    "url": "https://example.com/form"
  }
]

HTML構造（表示する場所）

取得したデータを表示するため、HTMLにリストの受け皿となる<ul>要素を準備しておきます。

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

JavaScriptでデータ取得＆表示

JavaScriptでfetchを使ってJSONを取得し、リスト表示してみましょう。

document.addEventListener("DOMContentLoaded", () => {
  const list = document.getElementById("article-list");

  fetch("articles.json")
    .then(response => {
      if (!response.ok) throw new Error("読み込み失敗");
      return response.json();
    })
    .then(data => {
      data.forEach(article => {
        const li = document.createElement("li");
        const a = document.createElement("a");
        a.href = article.url;
        a.textContent = article.title;
        li.appendChild(a);
        list.appendChild(li);
      });
    })
    .catch(error => {
      list.innerHTML = "<li>データの読み込みに失敗しました。</li>";
      console.error("エラー:", error);
    });
});

初心者が注意すべきポイント

初めてFetch APIを使う際には、以下の点に気をつけるとスムーズです：

• ファイルパスの確認： 相対パスやファイル名の誤りがよくある原因
• CORSエラー： 別ドメインのデータを取得する場合、サーバー側の設定が必要
• ローカル環境の制限： fetchはセキュリティ上、file://では動作しないことがあるため、ローカルサーバーで動かすのがおすすめ

ポイントまとめ

• 非同期でデータを取得 → ページ読み込み後にリスト表示
• エラーハンドリング → 通信エラー時のフォールバック表示も重要
• ループでDOM生成 → 配列を使って複数の要素を自動で追加

応用例

今回紹介した基本を応用すれば、以下のような発展的な使い方も可能です。

• WordPressのREST APIから最新記事を取得して表示
• 検索ワードによるフィルターや絞り込み機能の実装
• 「もっと見る」ボタンによるページネーション
• ローディング中のスピナーやアニメーションの表示

おわりに

Fetch APIを活用すれば、静的なページでも動的なコンテンツ表示が簡単に実現できます。まずはJSONの読み込みから始めて、徐々に外部APIやCMSとの連携など、より実践的な応用にも挑戦してみてください。

エラー処理やDOM操作をしっかり理解することで、より柔軟でユーザーに優しいWebページが作れるようになりますよ！