JavaScript `fetch()` の使い方【初心者向け】

非同期通信でAPIからデータを取得する基本

🌤 実行デモ

👇これが出る👇

気温を取得中...


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>気温表示</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
      background-color: #f0f0f0;
    }
    #weather {
      font-size: 1.5rem;
      color: #333;
    }
  </style>
</head>
<body>

  <h1>東京の現在の気温</h1>
  <p id="weather">気温を取得中...</p>

  <script>
    async function getWeather() {
      try {
        // APIからデータを取得
        const res = await fetch("https://api.open-meteo.com/v1/forecast?latitude=35.6895&longitude=139.6917¤t_weather=true");
        const data = await res.json();
        const temp = data.current_weather.temperature;
        document.querySelector("#weather").textContent = `東京の気温: ${temp}℃`;
      } catch (e) {
        document.querySelector("#weather").textContent = "🌧 取得に失敗しました";
        console.error("エラー:", e);
      }
    }
    // ページが読み込まれたときに気温を取得
    getWeather();
  </script>

</body>
</html>

🧩 fetch関数の活用とトラブル対策

fetch() は、API通信を簡潔に扱えるモダンなJavaScript機能です。今回紹介した天気APIのように、URLを指定して非同期にデータを取得し、画面に反映するまでを数行で実装できます。

たとえば const res = await fetch(...) のように記述し、続けて const data = await res.json() によってJSON形式のデータを解析します。この流れはあらゆるAPIで共通する基本パターンです。

🚨 よくある失敗と対策

もしURLが間違っていたりネットワークが不安定だった場合、try...catch ブロックで fetch() の失敗をキャッチしておくことで、ユーザーに「取得に失敗しました」といったエラー表示が可能になります。

また、天気のようなリアルタイム情報は更新頻度も高いため、fetch() を setInterval() と組み合わせて定期的に再取得させる設計もおすすめです。

APIによってはAPIキーが必要な場合もあるため、公式ドキュメントを確認し、必要であれば ?apikey=あなたのキー をURLに追記しましょう。