Blog株式会社テクニカルエンジニアリングサポートに所属する社員が、自身が携わるテクノロジーやイベントに関する情報を発信しています。PolicyCorporate2018-03-14[JavaScript]イベントにもasync/awaitを使おうJavaScriptはじめにECMAScriptが2015年から毎年バージョンアップするようになり、JavaScriptの仕様は大きく変わりました。コールバック地獄の回避や可読性の向上などを実現できるようになりました。JavaScriptではクリックやマウスホバーなどのイベントを検知する機能があります。通常、イベント登録時に、イベント発火時に実行される処理をコールバックとして渡します。実は、この従来の書き方をasync/awaitに置き換えると、一見すると同期処理的に書けるようにできます。本記事では、以下の例のように、async/awaitへ置き換える話を説明します。↓async/awaitを使えるように定義した関数(詳細は後述)。クリックされるまで、次の処理へ進まず非同期的に待機する。awaitForClick(target);alert("クリックされた!");考え方awaitは、Promiseがsuccessされるまで、後続の処理へ進みません。よって、イベント発火時にPromiseをresolveさせれば良いことになります。具体的には、こんな感じです。※今回はクリックイベントに限定していますが、抽象化すれば他のイベントでも応用出来ると思います。});};処理A:awaitForClick関数は、awaitで待機させるようPromiseのインスタンスを返すようにします。処理B:イベント発火時にPromiseをresolveするリスナー(コールバック)を定義します。処理C:処理Bで定義したコールバックを使って、イベント登録します。次の処理へ進まなくなります。true}で登録すると、1度しか発火しなくなります。今回、それをオプションで渡しているのは、resolve関数を2回以上呼んでも意味が無いためです。(resolve関数は、2回目以降何も起こりません)使用例クイズの回答を入力する画面で使うケースを紹介します。JSFiddleでも動かせます。"日本の通貨は「円」。"与えても無駄という意味のことわざ「豚に○○」。処理G})();処理A:awaitForClick関数を定義します。処理B:出題する問題を定義します。処理C:問題文を画面上に出します。処理D:引数に渡しているボタン要素がクリックされるまで待機します。処理E:入力された文字列を取得します。処理F:答え合わせをし、アラートを出します。合っていれば点数を加算します。処理G:点数をアラートで表示させます。見ての通り、上から順番に実行されており、同期的処理のコードのように見えます。処理の流れが追いやすく直感的なので、可読性が上がることが期待できますね。おわりにasync/awaitを使うことで、同期処理ぽく書けるやり方を説明しました。使用例としてクイズの回答を入力する画面を提示しました。今回詳しく見ていませんが、モーダルウィンドウでも、いい感じに使えます。https://jsfiddle.net/njny5xxo/3/なお、今回のやり方はasync/awaitを実装しているブラウザでしか使えません。各ブラウザの対応状況は、こちらで確認できます。https://caniuse.com/#feat=async-functions例によって、IE11では使えませんので、Babelなどを使う必要があります。最近、こんな記事を見ました。はてなブログPro株式会社テクニカルエンジニアリングサポートに所属する社員が情報を発信しています。(1)リンクコーポレートサイトさがめしみっけ。Generatorはてなブログをはじめよう!TESさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。