掲題の通りなのですが、Vue3とTypescriptの練習がてらお天気予報アプリを作ってみました。
Versionとか
$ node --version v19.2.0 $ npm -v 8.19.3
プロジェクト作成
こちらのQiitaの記事を参考にさせていただきました。
Open Weather
データはこちらのapiを使いました。
英語のサイトなので、日本語で使い方を説明してくれている記事がありましたので、こちらを参考にしました。
実装
GitHubにコードをアップしてみました。
よかったら参考にしてみてください。
hosting
作ったものはFirebaseHostingにアップしてみました。
↑から遷移できます。
よかったら見ていってください。
右上のタブで地域を切り替えることができます。
47都道府県、途中で面倒になっちゃったのでざっくり東日本だけ切り替え可能です。
extensionの使い方はアンチパターン感ありますね。
初心者なので許してください。
firebaseへのhosting方法はこちらにあります。
感想
Vue3での書き方を探すのに苦労しました。
以前の書き方を知っている人ならそんなに苦労せずに置き換えて考えられるのかもしれないです。
以前の書き方も知らないのでどうかこうか迷いました。
ref()でフレキシブルにデータを再描画できるのはいいですね。
今回はコンポーネントを細かく分けずに１つのコンポーネントだけを作っているので、Viewをいい感じに分けるのもやっていきたいです。
