SvelteKitで天気情報を表示するアプリを最小構成で作ってみた

1. はじめに

最近社内でSvelteKitを触り始めたのですが、「SvelteKit × 外部API」で何か作ってみたかったので、
天気予報APIを使って最小構成のアプリを作ってみました。

---

2. ゴール

こんな感じのページを作ります：

/weather にアクセスすると、東京の現在の気温・風速・時刻が表示される

しかも たった2ファイル（+page.tsと+page.svelte）だけで完結します。

---

3. 環境構築(demo-appの作成)

こちらの記事を参考にsvelteを起動する準備を進めました。
https://qiita.com/miruon/items/b71b286ffa0b9d68b8d7

実際に私もやってみた先の記事はこちらです。(2025年5月時点)
https://zenn.dev/emo1499/articles/bd15c7386e0f66

最初は環境構築でけっこう詰まりました：

• npm run dev → Missing script: "dev" エラー
• sv create が見つからず zsh: command not found: sv
• bun install しても No packages! Deleted empty lockfile
• cd demo-app しようとしたら no such file or directory

対処したこと：

• npm install -g sv で sv CLI をグローバルインストール
• sv create demo-app でSvelteKitのminimalテンプレートを選択
• パッケージマネージャは bun に統一
• bun run dev --open で無事ブラウザ表示！

---

4. API取得の仕組み

今回は「Open-Meteo API（無料・APIキー不要）」を使います：

https://api.open-meteo.com/v1/forecast?latitude=35.6895&longitude=139.6917&current_weather=true

---

5. コード全体（2ファイル）

src/routes/weather/+page.ts

export async function load() {
  const res = await fetch(
    'https://api.open-meteo.com/v1/forecast?latitude=35.6895&longitude=139.6917&current_weather=true'
  );
  const data = await res.json();
  return {
    weather: data.current_weather
  };
}

src/routes/weather/+page.svelte

<script lang="ts">
  export let data;
  const { temperature, windspeed, time } = data.weather;
</script>

<h1>Tokyo Weather</h1>
<p>🌡️ Temperature: {temperature}°C</p>
<p>💨 Wind Speed: {windspeed} km/h</p>
<p>🕒 Time: {time}</p>

---

6. なぜこれだけで動くの？

SvelteKitは…

• +page.ts の load() を実行してデータを取得
• その return 値を、+page.svelte にある export let data に自動で渡す

つまり、データ取得と表示がファイルだけで完結する「魔法のような構成」になっています。
何も指定することなく動くので最初は少し戸惑われるかもしれません。ただその便利さを享受して開発するのでもいいのではないでしょうか。

---

7. おわりに & 次やりたいこと

• 今回は「SvelteKitでAPI取得＆表示」がとてもシンプルにできると実感
• 出力結果↓↓↓
  
• 次は「地名を入力して天気を切り替える」や「天気アイコンを表示」、「レイアウトや装飾」なども試してみたい

また、記事に載せたエラー体験が、他の誰かの助けになれば嬉しいです！

---

✅ もしこの記事が参考になったら…

いいね・保存・コメントなどいただけたら励みになります！