「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の呼び出し → 状態管理 → 表示」という流れが自然に身につきます。
次のステップでは、地図表示や週間天気への拡張に挑戦してみましょう。