Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Reduxで非同期処理を行う~ES2017のasync/await構文を使って実装する方法

基礎からはじめるReact入門 第10回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/07/17 14:00

 Reactアプリ開発の基礎を解説してきた本連載。前回の第9回では、Reduxに備わったMiddlewareの仕組みを使って非同期処理を実現する方法について学びましたが、Middlewareを使わずに非同期処理を実現する方法もあります。今回は、ECMAScript 2017のasync/await構文とReduxを併用しながら非同期処理を実現する方法について学んでいきます。

目次

対象読者

  • 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)。

[リスト1]fetchとPromiseによる非同期処理の例
fetch("/api/hoge") // Promiseオブジェクトが返却される
.then(response => {
  // 通信が成功した場合の処理
})
.catch(error => {
  // エラーが発生した場合の処理
})

 Promiseオブジェクトは自作することもできます。resolveとrejectの2つの引数を取るコールバック関数をコンストラクタに渡してnewするだけです(リスト2)。

[リスト2]Promiseの作り方
const promise = new Promise((resolve, reject) => {
  // 時間のかかる処理
  
  if (/* 成功したかどうかの判定 */) {
    resolve(/* 処理結果 */);
  } else {
    reject(/* エラーオブジェクト */);
  }
});

 コールバック関数の中でresolve関数に処理結果を渡すとthenのコールバック関数が呼び出され、reject関数にエラー内容を渡すとcatchのコールバック関数が呼び出されます。

Promiseが苦手な処理

 Promiseは非同期処理を直感的かつ浅いインデントで記述できる、見通しのよいAPIを持っていますが、複数の非同期処理を組み合わせる際には、工夫が必要になる場合もあります。例えば、「ある非同期処理の結果を受けて別の非同期処理を動かした際に、前の処理の結果も扱いたい」といった場合です(リスト3)。

[リスト3]Promiseが苦手な処理
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を書いてしまう、などの方法で工夫することで望んだ処理を実現することが可能です。ですが、どの方法を採るにせよ、あまりスマートな解決方法にはなりません。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:基礎からはじめるReact入門

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5