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

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

React 天気予報アプリの作り方
1. 結論：API連携の第一歩に最適です
使用するツールと準備
1. 準備するもの
APIキーの取得と設定方法
1. OpenWeatherMap APIの登録
天気データを取得する実装
1. App.jsの基本構成
よくあるエラーと対処法
1. 「city not found」と表示される
2. APIキーが反映されない
公的機関の参考リンク
完成形コードまとめ
まとめ：APIの基礎を実践で習得

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

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

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

使用するツールと準備

準備するもの

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

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

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の基本構成

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;