最初の fetch

見てみよう：fetch——コードで注文

前レッスンでは手でブラウザから API を開いた。今度は JavaScript が同じこと——fetch コマンドで：

const adresa = 'https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&current_weather=true';

const odpoved = await fetch(adresa);
const data = await odpoved.json();

console.log(data.current_weather.temperature);

1行ずつ何が起きてるか：

fetch(adresa) – リクエスト送信（ウェイターが厨房へ）。
await – 待つ。インターネットは少し時間がかかる！
odpoved.json() – レスポンスを JavaScript オブジェクトに変換。
あとは普通のオブジェクト：data.current_weather.temperature など。

⚠️

await は async 付き関数か <script type="module"> の中でのみ動く。“await is only valid in async functions” エラーなら：

async function nacti() {
  // fetch and await go here
}
nacti();

ページにデータを表示

コンソールはプログラマー用——訪問者はページで見たい：

<p id="teplota">Loading…</p>

<script type="module">
  const odpoved = await fetch('https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&current_weather=true');
  const data = await odpoved.json();

  document.querySelector('#teplota').textContent =
    `Right now it's ${data.current_weather.temperature} °C`;
</script>

魔法使いで知ってるもの（querySelector、textContent）+ 新しい fetch。それだけ。

やってみよう 💪

id="teplota" の段落と上のスクリプトをサイトに追加。
座標を自分の街に変更。
風速も表示に追加（data.current_weather.windspeed）。
ボーナス：気温が0未満なら「🥶 Bundle up!」をテキストに追加。

✅

確認： 読み込み後、ページに本物の現在気温。Wi-Fi を切って更新すると「Loading…」のまま——データが本当にインターネットから来てる証拠。

このレッスンのまとめ

fetch(adresa) でリクエスト、await でレスポンス待ち。
.json() で知ってるオブジェクトに変換。
インターネット全体のデータが、関数1つ先。

このレッスンは有料レベルの一部です

見てみよう：fetch——コードで注文

ページにデータを表示

やってみよう 💪

このレッスンのまとめ