.png)
対象読者
- JavaScriptとWeb開発の基礎に理解がある方
- Reactに興味／関心があり、これから学び始める方
前提環境
筆者の検証環境は以下の通りです。
- macOS High Sierra 10.13.3
- Node.js v8.9.4／npm 5.6.0
- React 16.3.1
- redux 3.7.2
- react-redux 5.0.7
async/awaitとは（1）
async/await構文はECMAScript 2017で追加された、新しい文法です。その名の通り、 async キーワードと await キーワードの組み合わせで成り立っています。また、非同期処理の仕組みであるPromiseとも密接に連携しています。それぞれの要素について説明します。
Promiseとは
async/await構文を説明するにあたり、Promiseは切り離すことができません。まずはPromiseについて簡単におさらいしておきましょう。
Promise（プロミス）は多くのJavaScript処理系で採用されている非同期処理の仕組みです。Promiseオブジェクトは非同期な処理を内包しており、成功した場合と失敗した場合のそれぞれについてコールバック関数を渡しておくことで、非同期処理の終了時にそれらを実行してくれます。代表的な活用例は、近年多くのブラウザに実装されている、通信の関数fetchです（リスト1）。
fetch("/api/hoge") // Promiseオブジェクトが返却される
.then(response => {
// 通信が成功した場合の処理
})
.catch(error => {
// エラーが発生した場合の処理
})
Promiseオブジェクトは自作することもできます。resolveとrejectの2つの引数を取るコールバック関数をコンストラクタに渡してnewするだけです（リスト2）。
const promise = new Promise((resolve, reject) => {
// 時間のかかる処理
if (/* 成功したかどうかの判定 */) {
resolve(/* 処理結果 */);
} else {
reject(/* エラーオブジェクト */);
}
});
コールバック関数の中でresolve関数に処理結果を渡すとthenのコールバック関数が呼び出され、reject関数にエラー内容を渡すとcatchのコールバック関数が呼び出されます。
Promiseが苦手な処理
Promiseは非同期処理を直感的かつ浅いインデントで記述できる、見通しのよいAPIを持っていますが、複数の非同期処理を組み合わせる際には、工夫が必要になる場合もあります。例えば、「ある非同期処理の結果を受けて別の非同期処理を動かした際に、前の処理の結果も扱いたい」といった場合です（リスト3）。
fetch("/api/hoge")
.then(response => {
// responseからidを抽出する
const hogeId = translateResponse(response);
// hogeIdを使って別のAPIを呼び出す
return fetch(`/api/fuga?hogeId=${hogeId}`);
})
.then(response => {
// responseからidを抽出する
const fugaId = translateResponse(response);
// hogeIdとfugaIdを使って別のAPIを呼び出したいが、
// hogeIdがこのスコープにないのでエラーが起きる
return fetch(`/api/piyo?hogeId=${hogeId}&fugaId=${fugaId}`);
})
リスト3の例では /api/hoge の結果を使って /api/fuga を呼び出し、両方の結果を使って /api/piyo を呼び出そうとしていました。しかし、 /api/piyo を呼び出すためのスコープには /api/hoge の結果が存在しないので、このままでは正しいURLを構築できません。
この問題はどうにもならないわけではありません。スコープ外にあらかじめ用意しておいた変数にhogeIdを入れておく、あるいは、 /api/hoge のレスポンスのスコープ内に /api/fuga のレスポンスのthenを書いてしまう、などの方法で工夫することで望んだ処理を実現することが可能です。ですが、どの方法を採るにせよ、あまりスマートな解決方法にはなりません。
