お問い合わせ
お問い合わせ
ホーム > JavaScript > Fetch APIで簡単Webアプリ作成｜外部データを取得して表示する

Fetch APIで簡単Webアプリ作成｜外部データを取得して表示する

JavaScript
Fetch APIを使って外部データを取得しWebアプリに表示する様子をイメージした図
Fetch APIで外部データを取得し、Webアプリに表示する流れを表現したアイキャッチ画像です。

Webアプリケーションでは、外部のAPIからデータを取得してページに表示する仕組みが広く利用されています。JavaScriptの Fetch API は、シンプルな記述でデータ取得ができるため、基礎を身につけることで多くの場面で活用できます。本記事では、Fetch APIの基本的な使い方と、実際に動作するサンプルWebアプリの作り方を整理します。

なお、JavaScriptの基本事項を確認したい場合は、
👉 内部リンク： 「JavaScriptのthisを理解する｜関数やイベントでの挙動を整理」 も参考になります。

1. Fetch APIとは

Fetch APIは、HTTP通信を行うためのブラウザ標準のAPIです。従来からあるXMLHttpRequestに比べてコードが読みやすく、Promiseベースで扱いやすい特徴があります。

特徴

  • シンプルで読みやすい構文
  • Promiseに対応しているため非同期処理が扱いやすい
  • JSON形式との相性が良い
  • 追加ライブラリなしで利用可能

2. 基本的な使い方

最も基本となる使用例は次のとおりです。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('エラー:', error);
  });

処理の流れ

  1. fetch() にURLを指定してアクセス
  2. 取得したレスポンスを response.json() で JSON に変換
  3. 変換後のデータを画面に反映

非同期処理の書き方をより深く整理したい場合は、
👉 内部リンク： 「JavaScriptでDOM操作｜要素取得・イベント・クラス操作を体験」 が理解の助けになります。

3. 実践：外部データを取得して表示する簡単Webアプリ

ここでは、公開APIからデータを取得し、HTML上のリストに表示する簡単なサンプルを紹介します。
※APIには学習用として一般的なJSONPlaceholderを使用します。

▼ HTML（表示部分の作成）

<h1>投稿一覧</h1>
<ul id="postList"></ul>

▼ JavaScript（Fetchでデータ取得）

const list = document.getElementById('postList');

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(posts => {
    posts.slice(0, 5).forEach(post => {
      const li = document.createElement('li');
      li.textContent = `${post.id}: ${post.title}`;
      list.appendChild(li);
    });
  })
  .catch(error => {
    list.textContent = 'データの取得に失敗しました。';
    console.error(error);
  });

表示結果イメージ

  • 投稿タイトルが最大5件リスト表示される
  • 通信エラー時はメッセージを表示

DOM操作の基礎について詳しく知りたい場合は、
👉 内部リンク： 「JavaScriptでDOM操作｜要素取得・イベント・クラス操作を体験」

4. async/awaitを使った書き方

async/await を用いると、より自然な記述で処理をまとめられます。

async function loadPosts() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await response.json();

    const list = document.getElementById('postList');
    posts.slice(0, 5).forEach(post => {
      const li = document.createElement('li');
      li.textContent = post.title;
      list.appendChild(li);
    });
  } catch (error) {
    console.error(error);
  }
}

loadPosts();

5. エラーへの対応

Fetch APIでは、ネットワークエラーだけでなくHTTPステータスによるエラーも考慮する必要があります。

▼ ステータスチェックの例

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('サーバーエラーが発生しました');
    }
    return response.json();
  })
  .then(data => {
    // データ処理
  });

6. Fetch APIが使われる場面

Fetch APIは多様な用途に利用できます。

  • ニュース・ブログ記事の自動取得
  • 天気予報アプリ
  • 外部サービス（地図、SNS、翻訳APIなど）との連携
  • SPA（Single Page Application）のデータ更新
  • WordPress REST APIとの連携

特にREST APIを扱う際は、
👉 内部リンク： 「functions.php の編集方法（初心者向け）」 でWordPress側の設定を確認すると理解が深まります。

7. まとめ

Fetch APIは、外部データの読み込みを手軽に実装できる便利なAPIです。
基本構文さえ理解すれば、簡単なWebアプリから本格的なサービスまで幅広く応用できます。

本記事のポイント

  • Fetch APIはPromiseベースで扱いやすい
  • JSONデータとの相性が良く、API連携に最適
  • async/awaitでさらに読みやすいコードが書ける
  • DOM操作と組み合わせれば即表示できる

Webアプリ作成の基礎を固める第一歩として、Fetch APIを使った実践を試すと理解が進みます。