今回は僕が製作したアプリの一つの「Weather Report」を開発して感じたこと、反省点などをまとめたいと思います。
使用した技術、ライブラリ等(2023/02/27時点)
- React(v18.0.2)
- react-google-maps-api(v2.17.1)
- OpenWeatherAPI(無料プラン)
このアプリで出来ること
左上の検索バーに地名、住所、郵便番号などの地理的情報を入力したら、そのエリアの天気を調べることができます。
例）東京駅周辺を検索した場合
上記画像のように右側にお天気情報が表示され、その中で一番上に表示されている内容が現在の天気で、下のリストには3時間ごとの天気情報が表示されます。
仕組み
今回、画面上の地図、地理的情報の取得にはGoogle maps APIを利用しており、それをReactアプリケーションに落とし込むのにはreact-google-maps-apiを利用しています。
このライブラリにはReactのコンポーネントベースでgoogle map apiを利用できるようにする機能があります。
公式ドキュメント
Google maps apiドキュメント
改善点
キーワード検索をした際に、マップ上にピンを刺す機能を搭載しようとしたけど、なぜかピンが刺せなかったので、原因を探して、ピン(もしくは何かしらのポインターのよ うなもの)を搭載できればと思っています。
また、このアプリはモバイルファースト(スマホやタブレットのレイアウトから作成していくデザイン手法)での開発をしていたのですが、シンプルにCSSでの開発をしたため、開発を進めていくにつれてコードが複雑になってしまったので、sassを活用して、コードをスッキリとしたかったです。
それと天気情報取得に関することですが、今回使用したOpenWeatherAPIは無料枠を用いての開発なので、取得してきた情報の精度が悪いです。
最後に
今までは一つのアプリに一つのAPIを用いての開発をしていたのですが、今回は2つのAPIを参照しての開発だったので、コードが複雑になったり、データがうまく取得できなかったりと、うまくいかなかったところが多かったのですが、各APIを利用している先駆者様のお力を借りて、なんとか実装することができたので、よかったです。
今後にもつながる経験だったと思いました。