第32回 - Web Frontend - Part3

11/25に 第32回ZEALOT勉強会 を実施しました。

テーマは、「Web Frontend Part3」として JavaScript での asynchronous(非同期処理)について、特に callback, promise, async/await についてお話しいただきました。

以下に簡単に勉強会の内容をまとめてみました。


コールバック地獄とは

asynchronous(非同期処理) をハンドリングするものとして以下のものがあります。

  • callback (ある関数を呼び出す時に引数として指定する別の関数)
  • promise
  • async/await

非同期処理で、処理完了後に他の処理をする(だいたい複数の処理が続く)と、callback の中で callback を呼び、ネストしていき callback を順番に処理していくことになります。

   
画像1. callback hell  
callback hell  

これが callback hell(コールバック地獄) で、

  • どこでエラーが発生しているかわかりにくい。
  • どのような処理をしているのかを追いづらくなる。

など、可読性が悪くなる原因だったようです。(実際のコードは、もっと多くの処理が書かれることを考えると恐ろしいですね、、、)

Promise とは?

そして、Promise の話となります。

Promise は JavaScript では ES2015(ECMA Script 2015) から追加された機能で、その機能は callback の処理と大体は同じと考えて良いです。

Promise オブジェクトは、未来のある時点で値を提供するモノ(resolve とか reject)を返します。成功時の値自体ではなくプロキシ(代理のもの)を返すようなイメージみたいです。

Promise で使える then, catch, finally などの各メソッドもまたプロミスを返すので、これらを連鎖(chain)させることができます。

   
画像2. promise chaining  
promise chaining  

promise chaining で書くと、処理の順番がわかりやすいですし、エラー処理もまとめてできるので可読性が良くなることがわかります。

callback hell の画像と比較すると明らかですよね。

async/await

async/await を使うことで、さらに可読性が良くなります。(こちらの機能は ES2017 より追加されました)

  • asynchronous logic を synchronous logic のように書ける
  • then より可読性がいい
 
画像3. promise の then を使った書き方
then
 
画像4. async/await を使った書き方
await/async
 

async/await を使うと可読性が上がるので使った方が良いが、Promise.all(), Promise.any(), Promise.race() などの機能を使うときは async/awaitを使った書き方にはできないようです。

まとめ

callback hell がいかに悲惨だったか、それを経て promise や async/await が ECMA Script に追加され、各ブラウザ(IE除く)に実装されたんだなぁ と歴史もまなべた勉強会でした! 今回もわかりやすく非常に勉強になりました!