初めに
今回はアプリの作成を通じてAPI通信を行い、非同期処理の操作に慣れる事を学習目的としました。
完成図
主に使用した技術
emotion
React
TypeScript
chart.js
Redux ToolKit
使用したAPI
- Google-Maps-API
- OpenWeatherAPI
アプリの動作内容
- Geolocationで現在地を取得しMapに反映
- 検索フォームに入力された地名からお天気情報を取得
- 取得したお天気情報を各コンポーネント上でビューに反映
総括
苦労した点
- ドキュメントを読み込むという慣れない作業に、はじめはとても苦戦した。読んだり調べたりする事だけで時間が過ぎていき手を動かせずに少し焦りを感じるところもあったが、ここに関しては慣れの部分が大きいと思う。
- API通信自体がほぼ初めてだった事に加え素人がReduxToolKitも使用していた為、関数を定義する際にasyncの部分はcreateAsyncThunkとういう関数の中で使用する事に後から気づいた。二つの新しい知識を同時に組み合わせなければならなかったのは学習効率が悪く少し作戦ミスだと思った。しかしながら、一旦ReduxToolKitの使い方を覚えるとやはりデータをグローバルに管理できたり、通信後の後処理が比較的簡単だという事を感じる事ができたので、とても役に立つ学習となった。 以下一部コード抜粋
weatherSlice
export const fetchWeatherForecast = createAsyncThunk(
'weather/fetchForecast',
async (cityName: string) => {
//まずは都市名の情報を取得
try {
const googleMapURL = 'https://maps.googleapis.com/maps/api/geocode/json';
const key = process.env.REACT_APP_GOOGLE_MAP_API || '';
const res = await axios.get(googleMapURL, {
params: {
address: cityName,
key,
},
});
// 上で取得した都市情報をもとに緯度経度の取得
const { lat, lng } = res.data.results[0].geometry.location;
// 緯度と軽度を元にその都市の天気情報を取得する
const weatherAPIkey = process.env.REACT_APP_OPEN_WEATHER_MAP_API;
const weatherData = await axios.get(
// OpenWeatherのOne Call APIを使用する //
`http://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lng}&units=metric&lang=ja&exclude=minutely&APPID=${weatherAPIkey}`
);
//データの確認
console.log(`天気情報`, weatherData);
// 取得した情報をbuilderに送信
const weatherInfo: WeatherData[] = weatherData.data;
//必要なデータをPassDataにまとめて、ペーロードで取得できるようにする
const passData: any = {
cityName,
lat,
lng,
weatherInfo,
};
console.log(passData);
return passData;
} catch (err) {
console.log(err);
}
}
成長した点
- 取得したデータを元に各コンポーネント上で必要なデータのみを表示する為に、sliceやmap、forといった基本的なJavascriptの文法を使用した事で、JavaScriptの理解が深まった。
- API通信では、まず一つ自分の「形」を持つ事で非同期処理に対して自信を持てるようになった。（下記参照）
- コンソール画面やReduxDevTools画面を使って、エラーの原因をうまくチェックできるようになってきた。
- 前回学んだamplifyでのデプロイを今回はスムーズに行う事ができた。
今後の課題
- まだTypeScriptに慣れていない為どうしても型関係でエラーが出てしまうので、anyを多用してしまった事が課題。今後のアプリ作成や、リファクタリングを通して少しずつ理解度を上げていきたい。