月: 2024年7月

OpenWeatherMap APIは、世界中の天気情報を提供するオンラインサービスで、現在気象や天気予報を含む様々な気象データを無料で利用できるAPIを提供しています。 Webやモバイルアプリケーションの開発者向けに、JSON、XML、HTML形式で天気情報を配信しています。 今回、ReactとOpenWeatherMap APIを使って、都市を入力したらその都市の天気が表示されるような簡単な天気アプリを作ってみました。 1. 環境構築 Node環境があることを前提にして行います。 templateはtypescriptを指定して、Google Cloud Vision APIをコールするためにaxiosをインストールしておきます。 npm startしてReactの初期画面が表示されれば成功です。 [crayon-67169c3e2d7dd300037253/] 2. OpenWeatherMap APIの設定 OpenWeatherMap APIにアクセスして、ユーザー登録をします。 https://openweathermap.org/ ユーザー名、メールアドレス、パスワードを入力して、「Create Account」を押します。 アカウント登録が完了したら、「My API keys」からAPI Keyをコピーしておきます。 3. 環境変数の設定 作成したAPIキーを.envファイルを作成し、環境変数を設定します。 creare-react-appで作ったプロジェクトはprocess.env.REACT_APP_から始まる変数を読み込みができるようになっています。 先ほどコピーしたAPI Keyを設定します。 .env [crayon-67169c3e2d7e1185125622/] 4. OpenWeatherMap APIを呼び出す API Keyを設定できたら、実際にOpenWeatherMap APIを呼び出してみます。 こちらの公式ドキュメントを参考にAPIの呼び出しを行います。 https://openweathermap.org/current#:~:text=for%20this%20functionality.-,Built%2Din%20API%20request%20by%20city%20name,-You%20can%20call 今回は入力した都市の天気情報を表示したいので、こちらのAPIの呼び方を参考にします。 [crayon-67169c3e2d7e2997767834/] では実際にAPIを呼び出してみます。まず天気アプリ画面用のコンポーネントを作成します。 先ほどのAPIの呼び出しを参考にコードを書いていきます。 ・Weather.tsx [crayon-67169c3e2d7e3125835691/] API呼び出しの全体的なコードは上記のようになります。 [crayon-67169c3e2d7e4101607746/] まずAPIを呼び出しているところから見ていきます。 APIの呼び出しでcityとapiKeyの2つが変数になっています。そのため、apiKeyは先ほど定義した環境変数から取得し、cityは一旦固定で「Tokyo」としておきます。 これで、APIを呼び出すことができます。 [crayon-67169c3e2d7e5235598406/] 次に呼び出したAPIのレスポンスをコンソール上に表示させます。 console.logで結果を出力することで、ブラウザのコンソール上で実際にどんなレスポンスデータが返ってきているか確認することができます。 [crayon-67169c3e2d7e6603477474/] トリガーはこのbuttonにしています。ボタンを押すとAPIが呼び出されるようにしています。 ・App.tsx [crayon-67169c3e2d7e7685452719/] 最後にApp.tsxにWeatherコンポーネントを呼び出して、完了です。 npm startして実際にローカルの画面を表示すると、「API Call」のボタンが表示され、ボタンを押すと、右側のコンソールのようにAPIのレスポンスデータが表示されます。 5. OpenWeatherMap APIのレスポンスデータを画面に表示する 次にAPIのレスポンスデータを画面に表示させていきます。 ・Weather.tsx [crayon-67169c3e2d7e8804928675/] 全体像としては上記のとおりです。 [crayon-67169c3e2d7e9218989985/] useState フックを使って、2つの要素を持つ状態変数を宣言しています。 weatherは天気情報を入れるための変数で、初期値はnullです。setWeatherはweatherの値を更新するための関数です。 [crayon-67169c3e2d7ea137594946/] {weather &amp;&amp; ( ... ) } 部分は、weather変数に値が存在する場合のみ、divタグ内の内容を表示します。 weatherがnullまたはundefinedの場合は、div タグ内の内容は表示されません。 weatherに値がある場合、都市名・気温・天気を表示するようにします。 実際に実行してみると上記のように表示されることが確認できます。 6. 都市を入力して表示できるようにする 現状、東京に固定して天気情報を取得しているため、入力値に合わせて天気情報を取得するようにします。 ・Weather.tsx [crayon-67169c3e2d7eb788678402/] 追加したコードが入力した都市の天気情報を取得して、表示するようにして箇所です。 [crayon-67169c3e2d7ec088188264/] onChangeはフォーム要素の値が変更されたときに発生するイベントハンドラで、inputタグを追加し、onChangeイベントでcity変数に入力した値を入れています。 実際に動かしてみると、入力した都市で天気情報を取得していることがわかります。 7. 入力した都市が存在しなかった場合のハンドリング 次に、入力した都市が存在しなかった場合の対応を行います。 現状、入力した都市が存在していない場合はエラーが発生しますが、画面に表示されないため、ユーザーが認識できない状態となっています。 ・Weather.tsx [crayon-67169c3e2d7ed178549574/] エラー用のuseStateを用意し、エラーを表示するためのHTMLを追加しています。 [crayon-67169c3e2d7ee531121848/] エラーに関しては、都市が存在しない場合とそれ以外のエラーの2種類で条件分岐しています。エラー文をsetErrorで値を更新し、画面に表示します。 8. スタイルを整える 最後にスタイルを整えます。特にこだわりがないようであれば、そのままコピペして使用して大丈夫です。 ・Weather.tsx [crayon-67169c3e2d7ef078360621/] ・App.css [crayon-67169c3e2d7f0561169691/] ローカルの画面を見ると、良い感じのデザインになりました。 おわりに 今回はOpenWeatherMap APIを利用して簡単な天気アプリを実装しました。 天気アプリなどは既存のサービスで充実していますが、実際に自分で作ることでよりサービス作りの解像度を上げることができれば幸いです。

【ハンズオン】ReactとOpenWeatherMap APIで天気アプリを作ろう【TypeScript】