はじめに
アプリ開発とは無縁のエンジニアがOpenWeatherMapを使って天気予報を見れるWebアプリを作ってみた。
cssは海外のエンジニアの方を少し参考にさせてもらいました。
★機能紹介(ざっくり)★
- 検索は基本ローマ字(理由は後程説明します。)
- ログインすれば星をクリックできる。するとお気に入りリストに追加できる。
- もう一度押すとお気に入りリストから削除される。
- 一画面で現在の天気、気温、湿度、風速、3時間単位での天気、直近5日間の天気を確認できる。
- 天気、時間によって背景画像が変わる。
開発環境紹介
言語
JavaScript(React) ※初心者にはきつかった
CSS
サーバーサイド
Node.js
DB
Firebase (google)
API
OpenWeatherMap
開発に至ったきっかけと目的
話すと長くなりますが、少しお付き合いください。
きっかけは実家の飲食店のホームページ作りでした。
父「店のホームページ作って」
私「正直めんどくさいけど頑張ってみる。」
当時は駆け出しの組み込み系エンジニアでそもそもホームページってどうやって作るねん？
からスタート。
YouTubeをみてるとWordPressで簡単にホームページを作ろう！のような趣旨の動画を発見。
さっそく作ってみたが、うーん。。。なんか微妙。
(WordPressを非難しているわけではなく全く使いこなせていなかった)
これがweb開発に興味をもちはじめるきっかけになりました。
ホームページを作りたいというよりかは父のお願いをそっちのけでアプリを作りたい
と思ってしまったので父には申し訳なかったがさっそく開発をしてみた。
何故、天気予報アプリなのかというと、天気とかで背景画像が変わる天気予報アプリがあったら
面白そう＆勉強になりそう。という安直な理由でした。
まとめると、、、
きっかけは父にホームページを作ってと言われた。→web開発に興味を持ち始めた。
天気予報アプリを開発する過程でweb開発について(どんな言語でどんな技術があるか)を
勉強できると思った。
工夫した点
とりあえず使用者が見えやすいように重要な情報は大きく目立つようにした。
例えば、正直なところ天気予報見るときは天気と気温、最低気温と最高気温くらいで、
他はあまりみないので(私だけ？)、そこが一番目に入るように工夫した。
天気(晴れと曇りとか)は小さいけど背景画像でわかるからそこまで重要ではないと判断。
天気、時間帯で背景画像を変える
天気や時間帯の組み合わせで背景画像が変わるようにした。
天気が直感的で分かりやすいし、色々勉強になりそうだから。
組み合わせでいうと
晴れの場合の
朝
昼
夕方
夜
曇りの場合
朝～夕方(同一の画像)
夜
雨の場合
・
・
・
というように結構な組み合わせがあるので、新鮮味があるかもしれないです。
夕方の晴れだとこんな感じ
お気に入りリスト機能の追加
いちいち自分の地域を検索するのは面倒なので、お気に入りリストに追加したものは
ワンクリックで検索できるようにした。
ログイン機能の追加
お気に入りリスト機能において、ユーザーによってお気に入りリストを分ける必要があったため、
googleアカウントにでログイン機能を追加した。
なぜローマ字で検索なのか
OpenWeatherMapは海外のAPIで一応、日本語でのリクエストも可能です。
※idの後に&lang=jaを足すと日本語で返してくれます。
ここで、問題になるのが、やはり日本語での検索では正確性に欠けるところです。
ある地域では日本語で検索できても、ある地域ではできなかったりと、、、
色々調べましたが不可能みたいで、諦めました。
この開発ではAPI, DB, React, etc... と、
インプットすることがとにかく多く、ここに時間と労力をかけるべきではないと考えました。
私の唯一の心残りです。。。
苦労した点
非同期処理の使い方
APIで情報取得してから色々と関数にデータを渡しているのだが、useEffectをうまく
使いこなせず、データを渡す前に関数の処理がはじまってしまったりと、めちゃくちゃになった。
親から子へのpropsの受け渡し
今では常識として考えられるがpropsを受け取るときに{props}
この形で受け取ることができておらずかなり沼にハマった。
css全然使いこなせない
まず、cssにどんなものがあるかすらわからない状態なのでChatGPT先生にはとてもお世話になった。
今でもなかなか使いこなせない。特にレスポンシブ対応には苦労します。
背景画像の条件下での変更
基本的にurl('パス名')で書いてきたが、url()の中に関数を入れる場合、一度importして画像をオブジェクトとして
url(オブジェクト名)にしないと実装できず、沢山の時間を費やした。妥協しなかった自分を褒めたい。
url(関数())を使う場合は画像をimportして使用することを忘れないでいたい。
returnの後に記載されているのが画像をimportした際のオブジェクト名です。
最後に作ってみた感想と今後の課題
正直たくさん苦労はありましたが最後まで楽しく開発を行えたと思います。
特にweb開発は成果が目に見えやすく、期待通りの挙動をしてくれた時は本当に
嬉しかったです。
ただ、反省することはたくさんあります。例えば
- コンポーネントごとに管理できていない
- Next.jsを使えばよかった
- DBもAWSを使用すればよかった
と挙げればきりがありませんが、これからは技術の選定などもしっかり行いたいです。
最後までお読みいただきありがとうございます。
もしよろしければコメントなどしていただくと嬉しく思います。
時間があれば https://weather-b71d6.web.app/
使ってみてください。