会員登録すると
学習することができます。
会員登録する(無料)
登録済みの方はこちら
ログイン

取得処理を関数にする ― 200でも失敗することがある

目安学習時間 18分

課題

全問正解でレクチャー完了です。

【問題1】

URL にクエリパラメータを付けるとき、searchParams を使う利点はどれですか。

[選択肢]

【問題2】

地名検索APIに存在しない地名を渡したとき、この講座で扱っている挙動はどれですか。

[選択肢]
会員登録すると
学習することができます。
会員登録する(無料)

学ぶ目的

まず地名検索を関数にする

Node.js の fetch で書きます。追加のライブラリは要りません。

async function findCity(name) {
  const url = new URL("https://geocoding-api.open-meteo.com/v1/search");
  url.searchParams.set("name", name);
  url.searchParams.set("count", "1");
  url.searchParams.set("language", "ja");

  const res = await fetch(url);
  if (!res.ok) throw new Error(`地名検索に失敗しました (HTTP ${res.status})`);

  const data = await res.json();
  // 見つからないとき results キーごと無い。ここが一番の落とし穴
  if (!data.results || data.results.length === 0) {
    throw new Error(`「${name}」という地名が見つかりませんでした`);
  }
  const hit = data.results[0];
  return { name: hit.name, latitude: hit.latitude, longitude: hit.longitude };
}

new URLsearchParams を使うと、日本語や記号のエスケープを自分でやらずに済みます。

200 OK なのに中身が無い

存在しない地名を渡すと、このAPIはエラーを返しません。HTTP 200 で、results キーそのものが無いJSONが返ります。

res.ok だけを見て data.results[0] を読むと、そこで初めて落ちます。ステータスコードの確認と、中身の確認は別の作業です。

天気の取得

async function fetchWeather(latitude, longitude) {
  const url = new URL("https://api.open-meteo.com/v1/forecast");
  url.searchParams.set("latitude", String(latitude));
  url.searchParams.set("longitude", String(longitude));
  url.searchParams.set("current", "temperature_2m");
  url.searchParams.set("timezone", "Asia/Tokyo");

  const res = await fetch(url);
  if (!res.ok) throw new Error(`天気の取得に失敗しました (HTTP ${res.status})`);

  const data = await res.json();
  return { temperature: data.current.temperature_2m, unit: data.current_units.temperature_2m, time: data.current.time };
}

2つをつなぐ

export async function getWeather(city) {
  const place = await findCity(city);
  const weather = await fetchWeather(place.latitude, place.longitude);
  return { city: place.name, ...weather };
}

ここまではただの関数です。AIはまだ関係ありません。先に人間が呼んで動くことを確かめます。

このレクチャーで学ぶこと

  • fetch と URL/searchParams の使い方
  • HTTP 200 でも中身が無い場合の扱い
  • 2つのAPIをつないで1つの関数にする

質問

まだ質問は投稿されていません。

質問投稿

ログイン後に質問の投稿ができます。