- 場所を入力することで、その場所の現在の天気、予報天気が取得できるアプリです。
- デプロイ先
- 作成に要した時間：約12時間15分(仕様確認、ESLint等の開発における設定、テスト実装、READEME記載等を含む)
- （なお、予報取得箇所についてはweatherapiのお試し期間が終了し、freeプランに移行したため、現在は3日分のみの取得となります。）
-
今回は天気情報取得するに当たり、weatherapiを使用しています。
-
そのため、weatherapiに無料登録の上、ルートに
.envファイルを作成して、API KEYを設定する必要があります（.env.exampleを参考）。 -
上記手順を踏んだうえで、以下を実行します。
$ npm i # 依存関係インストール。最初のみ。 $ npm run dev # ローカル環境での起動
- 実行コマンド
$ npm run test - (参考:テスト結果)
- フレームワーク: Reactのフレームワークとして、Remixを使用しています。
- テスト: Vitest, Testing Library
- Testing Library自体の使用は多少ありますが、Remix内での使用は初めてとなります。
- また、Vitestについても初めてですが、Jestの使用については経験がございます。
- なお、今回外部APIを使用することから、当初はRemixのcreateRemixStubでレスポンスをMock化し、ページ単位で統合テスト記載する方針を考えていました。
- しかし、調査等時間がかかったため、ページ内の主要コンポーネントに対し、統合テストを記載することで、代用しています。
- 本実装では基本的にRemix作成時に自動で導入されるものやテスト、ESLintに関するものを除き、極力ライブラリを導入せず、自力で実装しています。
- ただし、Vercelにデプロイするにあたり、@vercel/remixのみ追加で導入しています。
- 今回、外部APIを使用しましたが、レスポンスの型定義、テスト用のMock値に関して、Chat GPT(GPT-4)やGitHub Copilotを使用しています。
- 例えば、wetherapiのドキュメントを一部読み込ませて、型定義を作成するなどしています。
- 多少、間違えることはありましたが、概ね問題なく定義されており、今回のような外部APIをもとに型定義する必要がある場合は大いに活用できるという所感です。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent