初心者の非同期処理の覚え方 #React

初めに

「非同期、Promiseベース何それ？」みたいなところから非同期処理を理解していくのは本当に大変です。
私が最初から知りたかった事だけをまとめてみます。
注意：基本的な考え方としてはどの言語でも共通している部分はあるかと思いますが、ここではReactでアプリを作成している事を前提としています。

同期処理と非同期処理

JavaScriptは普通にプログラムを書くと上から順番に処理されていきます。これを同期処理と言い、途中で時間の掛かる処理を書くとその処理が終了するまでストップしてしまいます。
例えば、サーバーと通信をして何かしらのデータを取得するような処理を書くと、結果を得られるまで処理がストップしてしまうわけです。
そこで登場するのが非同期処理という技術で、時間の掛かる処理を実行してもすぐに次の処理に移行することができます。そして、他の処理を実行している間に結果を取得したら、そのまま続きの処理を始められるのです。

参照　Promiseによる非同期処理

問題点

いろんな書き方、用語が多すぎ問題。
これまでの歴史や流れを知っているエンジニアにとっては難しくはなくとも、変遷を知らない初学者にとってはここがもっとも辛い点の一つだと思います。
非同期処理を学習する上で、分からない部分をググってみると、、、

Promise
fetch/then
resolve
result
async/await
axios
try/catch

どれを使ってどう書けばいいの？て感じです。
私はここで大分悩みました。

解決策

全てを覚えるのではなくまずは一つ、慣れるまでは自分の書きやすい非同期処理の形を持つ事が良いのではないかと考えました。
そこで私は以下の３つをベースとして使用することにしました。

async/await
axios
try/catch

細かい理由は色々ありますが、理由はともかく「この形に持っていくと非同期処理ができるんだな」的なパターンを覚える事が優先です。あとは慣れです。

async/await

asyncは、これから非同期処理を行いますよ宣言
awaitは、asyncを使った非同期処理関数の中の処理に対して、ある処理が終わるまで待ってもらいたい部分で宣言する

axios

こちらは外部のライブラリとなりますが、無くても非同期処理は書けるようです。ただHTTP通信の際に送受信したいデータに対してわざわざJsonの処理を施さなくて済むのでコードも短くなり楽チンというメリットがあります。

参考記事
【リソース取得APIの比較】fetchとaxiosの4つの相違点

try/catch構文

シンプルで分かりやすい構文。

非同期通信の際に行いたい処理(tryしたい処理)をtry{}の中に記述
処理に失敗したらcatch{}の中でコンソールや画面にエラーを表示させる書き方です。

それでは、これらを使用してお天気情報を取得してみます。
緯度と軽度を引数で受け取ったと仮定して、その地域の天気情報を取得します。

example.ts

import axios from 'axios';

export const fetchWeatherData = async (lat: number, lng: number) => {
  try {
    const APIkey = process.env.REACT_APP_OPEN_WEATHER_MAP_API;
    const res = await axios.get(
    //今回はOpenWeatherMapのOne Call APIを使用する//
    `http://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lng}&units=metric&lang=ja&exclude=minutely&APPID=${APIkey}`
    );
    //上でawait宣言しているのでその処理が終わってからこの次の処理が始まる//
    const weatherInfo: any = res.data;
    return weatherInfo;
  } catch (err) {
    console.log(err);
  }
};

これでweatherInfo内に、特定の地域の天気情報を取得する事ができました。
ここで取得したデータをもとに、それぞれのコンポーネント内で必要なデータをビューに反映させる流れとなっています。

最後に

ここではweatherInfoの型がanyなどを使ったやっつけコードになっていますが、ひとまず今回は自分が学習した事の備忘録として書かせていただきました。
間違いなどがございましたら、ご指摘願います。