【JavaScript入門】外部APIを使った実例｜天気API・GitHub APIで学ぶ実践的なデータ取得方法

外部APIを使うと、天気・ユーザー情報・ニュースなど、他サービスが提供するリアルタイムデータを JavaScript から簡単に取得できます。
この記事では、天気APIや GitHub API を例に、fetch と async / await を使った実践的なデータ取得方法と、取得した情報を DOM に反映する手順を分かりやすく解説します。

外部APIとは？

外部APIとは、他のサービスが提供しているデータを
HTTPリクエストで取得できる仕組みのことです。

例：

• 天気情報（OpenWeatherMap）
• GitHubユーザー情報（GitHub API）
• ニュースAPI
• 地図API（Google Maps）

JavaScript の fetch を使えば、
これらのデータを簡単に取得して画面に表示できます。

実例①：天気API（OpenWeatherMap）を使う

OpenWeatherMap は無料で使える天気APIです。
APIキーを取得すれば、都市名から天気を取得できます。

天気を取得するコード例

const API_KEY = "YOUR_API_KEY";
const city = "Tokyo";

async function loadWeather() {
  const url = 
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&lang=ja&units=metric`;

  const res = await fetch(url);

  if (!res.ok) {
    throw new Error("HTTPエラー: " + res.status);
  }

  const data = await res.json();

  document.getElementById("weather").textContent =
    `${data.name}：${data.weather[0].description}（${data.main.temp}℃）`;
}

loadWeather();

HTML側：

<p id="weather"></p>

天気APIは初心者でも扱いやすく、
API学習の最初の題材として最適です。

実例②：GitHub APIでユーザー情報を取得する

GitHub API は認証なしでユーザー情報を取得できます。
例えば「octocat」というユーザーの情報を取得するには：

async function loadGitHubUser() {
  const res = await fetch("https://api.github.com/users/octocat");

  if (!res.ok) {
    throw new Error("HTTPエラー: " + res.status);
  }

  const user = await res.json();

  document.getElementById("name").textContent = user.name;
  document.getElementById("bio").textContent = user.bio;
  document.getElementById("icon").src = user.avatar_url;
}

loadGitHubUser();

HTML側：

<img id="icon" width="100">
<h2 id="name"></h2>
<p id="bio"></p>

GitHub API はレスポンスがわかりやすく、
実務でもよく使われるため学習に最適です。

実例③：複数APIを同時に取得する（Promise.all）

天気APIとGitHub APIを同時に取得する例です。

async function loadAll() {
  const [weatherRes, userRes] = await Promise.all([
    fetch("/weather"),
    fetch("https://api.github.com/users/octocat")
  ]);

  const weather = await weatherRes.json();
  const user = await userRes.json();

  console.log(weather, user);
}

loadAll();

複数のAPIを同時に取得することで、
高速な画面表示が可能になります。

API実装でよくあるエラーと対処法

• APIキーが間違っている → 401エラー
• URLが間違っている → 404エラー
• CORSエラー → サーバー側の設定が必要
• レスポンスがJSONでない → JSONパースエラー

特に CORS はフロント側では解決できないため注意が必要です。

まとめ

外部APIを使うと、JavaScriptだけで
天気・ユーザー情報・ニュースなどのリアルタイムデータ を扱えるようになります。

• 天気API → 初心者向けの実例として最適
• GitHub API → 認証なしで使えて便利
• Promise.all → 複数APIを同時に取得できる
• fetch + async / await が基本構成

APIを扱えるようになると、
Webアプリの表現力が一気に広がります。