【React入門】天気予報アプリを作って学ぶAPI連携|初心者向け完全ガイド

プログラミング

「Reactを学んでいるけど、APIの使い方が分からない…」
そんな初心者の悩みを、天気予報アプリの作成でスッキリ解決しましょう。
この記事では、OpenWeatherMap APIとReactを連携させて、リアルタイムの天気を取得する方法を、わかりやすく丁寧に解説します。

React 天気予報アプリの作り方

結論:API連携の第一歩に最適です

Reactで天気予報アプリを作ることで、APIの使い方、状態管理、非同期通信(fetch)の基本が一気に身に付きます。

使用するツールと準備

準備するもの

  • Node.js(https://nodejs.org/ja)
  • OpenWeatherMapのAPIキー(https://openweathermap.org/api)
  • create-react-app

プロジェクト作成コマンド:

1
2
3
npx create-react-app react-weather-app
cd react-weather-app
npm start

APIキーの取得と設定方法

OpenWeatherMap APIの登録

公式サイトから無料プランでAPIキーを取得できます。
取得後、.envファイルに以下を設定してください:

1
REACT_APP_WEATHER_API_KEY=xxxxxx

天気データを取得する実装

App.jsの基本構成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { useState } from "react";
function App() {
  const [city, setCity] = useState("");
  const [weather, setWeather] = useState(null);
  const fetchWeather = async () => {
    if (!city) return;
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${process.env.REACT_APP_WEATHER_API_KEY}&units=metric&lang=ja`
    );
    const data = await response.json();
    setWeather(data);
  };
  return (
    <div style={{ textAlign: "center" }}>
      <h1>天気予報アプリ</h1>
      <input
        type="text"
        value={city}
        onChange={(e) => setCity(e.target.value)}
        placeholder="都市名を入力"
      />
      <button onClick={fetchWeather}>検索</button>
      {weather && weather.main && (
        <div>
          <h2>{weather.name}</h2>
          <p>気温: {weather.main.temp}℃</p>
          <p>天気: {weather.weather[0].description}</p>
        </div>
      )}
    </div>
  );
}
export default App;

よくあるエラーと対処法

「city not found」と表示される

  • 入力ミス(日本語ではなく英語で入力することが推奨)
  • APIキーの制限

APIキーが反映されない

  • .envの変更後はnpm startを再起動しましょう。

公的機関の参考リンク

  • 気象庁データの活用指針:https://www.jma.go.jp/jma/kishou/info/coment.html
  • GIGAスクール構想(文科省):https://www.mext.go.jp/a_menu/other/index_00001.htm

完成形コードまとめ

App.jsにすべてのコードを記述すれば、天気予報アプリが完成します。
APIキーだけは自分のものに置き換えてください。

まとめ:APIの基礎を実践で習得

ReactとAPI連携の第一歩として、天気予報アプリは非常に効果的です。
「APIの呼び出し → 状態管理 → 表示」という流れが自然に身につきます。
次のステップでは、地図表示や週間天気への拡張に挑戦してみましょう。

タイトルとURLをコピーしました