7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-05-29

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

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

参照 Promiseによる非同期処理

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

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

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

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

  • 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などを使ったやっつけコードになっていますが、ひとまず今回は自分が学習した事の備忘録として書かせていただきました。
間違いなどがございましたら、ご指摘願います。

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?