三者三様のイベントハンドリングを掛け合わせて究極のハンドリングパターンを実現する

概要

上記記事で同じマウスイベントのハンドラを3人が別々に書いた

MouseMoveのハンドリング中のエラーもまとめてキャッチできるようになった

まあでもどうせなら全部同期的に書きたい感がある

listen関数はthenチェーンでより簡潔になるのではというアイデアも込み

abort（異常系）とclose（正常系）両方対応してます

code readingが雑すぎました……

いくら雑に書く場所としてscrapboxを使えるとはいえど、ちゃんと読まないで共同の場で適当なことを書くのは避けるべきでした。今後気をつけます

という視点で試しに作ってみたのがこちら：

forループかそうでないかはあまり重要でない、というのはそうです

僕の場合だと、forループへの対応そのものにはほとんどコードの変更はいらないです

forではなく、closePromiseへの対応には6行程度必要ですが、かなり簡潔に済んだのでそれも大きな違いではないかなと感じます

ほとんどコードの変更がないので、async generatorで便利に使えていいなと思ってます

rejectを外に出す必要は、僕の場合はもはやないかな、と感じています

むしろ出さないことでabortとcloseの両方に同時に対応する時とかにも困らない形になっているなと感じます

コードも読みましたが、reactを使うかどうかとかでかなり流儀？が異なるかもなと感じました

僕はライブラリ使わないでどこまでシンプルさと利便性を両立できるのかを突き詰めたかったので下記みたいな感じになってますね

僕のコードと比較した時、どういう見通しの良さとか利便性とかの違いがあるのかまでは比較しきれなかったので、何かあれば教えて欲しいです！

ただ下手にライブラリを使ってしまったことで、今回の処理と関係ない部分が増えて比較しにくくなったのは確かですね……

完全に自分だけがわかればいいのスタンスで書いてしまったのもよくなかったです

趣味コーディングなのはお互い様なので、気にしないでいいですよ

僕のコードへの意見も含まれてるのかなと思って、ちょっと困惑しただけです

後ほどnative DOMにのみ依存したコードを作っておきます

そこで、

実装内容

今回はマウスイベントを扱います。

マウスを押してからドラッグし、マウスを離すまでの処理を実装します。

コードと解説

なんかお料理のレシピみたいになってしまいましたw

下準備

まずイベントリスナをPromiseでラップします

全体の調理

下準備のおかげでとても良い焼き上がり（見通しの良い処理）になります

実食

実際に出来栄え（使い勝手）を確認してみます

下準備

code:handlePattern.js

// single event

function mouseUpPromise() {

return new Promise((resolve) =>

window.addEventListener("mouseup", resolve)

);

}

// single event with canceller

function mouseDownPromise(abortPromise) {

return new Promise((resolve, reject) => {

window.addEventListener("mousedown", resolve);

abortPromise.then(reject, reject);

今回は当てはまらないのですが、then中のエラーをcatchするかどうかという微妙な挙動が変わります

code:handlePattern.js

});

}

// sequential event

async function* mouseMoveChain(closePromise) {

const promise = new Promise((resolve, reject) => {

window.addEventListener("mousemove", resolve);

closePromise.then(reject, reject);

});

try {

} catch (event) {

return;

}

// recursive

yield* mouseMoveChain(closePromise);

}

このラップを書くことで、後述の処理がとてもスッキリしたものになります

それぞれ、上から順に、

最もシンプルなパターン(MouseUp)

キャンセル機能を実装したパターン(MouseDown)

シンプルなパターンに引数を追加したものです

キャンセルしたい時にresolve or rejectするPromiseを引数に受け取ります

今回は大域脱出したいので単にawaitし、reject処理を呼び出し元に任せています

イベントハンドリングを正常終了する場合はMouseMoveのパターンで使っているような形になります

これらの両立も可能です

for文で処理したい時のパターン(MouseMove)

キャンセル機能を実装したパターンをasync generatorにしました

AsyncGeneratorを再帰呼び出ししています

まず普通にpromiseをラップし、キャンセルされない間はその結果を返します

キャンセル機能を実装するときはコツがあります

rejectされた時の処理を呼び出し元に任せる、という意味になります

こうすることで、for文で処理するときに最後のイベントも受け取ることができます

イベントの判別も楽になります

ここが今回の実装の本質的な部分です

code:handlePattern.js

async function handleMouseEvent(abortPromise) {

const mouseDown = await mouseDownPromise(abortPromise);

console.group("mouseEvent");

console.log({ mouseDown, time: mouseDown.timeStamp });

let mouseMove, mouseUp;

僕のテストだといらなかったですが、TSとかでは怒られるかな？

そうでなかったとしても未定義の変数をいきなり使うのは個人的にはばかられますね……バグの温床になりそうですし

code:handlePattern.js

for await (

) {

if (mouseUp) break;

console.log({ mouseMove, time: mouseMove?.timeStamp });

}

console.log({ mouseUp, time: mouseUp?.timeStamp });

console.groupEnd("mouseEvent");

return handleMouseEvent(abortPromise);

}

まずマウスの押下を処理し、次に連続したドラッグイベントの処理をやって、最後にマウスから手を離した時の処理、というのがわかりますね！

このハンドル関数では、コールバックやthenチェーンなどの非同期ならではの処理を気にする必要はありません

code:usage.js

// usage

const controller = new AbortController();

const aborter = new Promise((r) =>

controller.signal.addEventListener("abort", r)

);

function onAbort(e) {

console.log("aborted", e);

}

handleMouseEvent(aborter).catch(onAbort);

https://gyazo.com/2f80900de4fd667c2ac78cc3cba62311

Promiseにラップしてハンドラーに渡しています

各自でご利用の際は、rejectを外部にExposeしたPromiseを渡すなど、お好きな味付けに調整してください

エラーハンドラーも問題なく作動します

まとめ

キャンセル処理やエラーハンドリングも効率よく実装できたと思います

僕は大満足の出来栄えです

issue

abort起因のエラーとそれ以外のエラーが区別できない

改めてこのコードの系譜を整理しておきます

thenチェーンや再帰呼び出しを駆使した処理のギミックを引き継いでいます

処理の中止や正常終了などの処理分岐を利用しました

クロージャを一気に減らし、可読性を向上させています

同期処理で一連のマウスイベントをまとめてしまおう、という全体設計を引き継いでいます

MouseMoveイベントのハンドリングで唯一利用していた関数クロージャを無くしたことで、MouseMoveイベントのハンドリング中に発生したエラーもまとめてキャッチできるようになっています

for-await-ofで連続したイベントを同期処理に落とせるのは目から鱗でした

listen関数の発想は今回のRecursive Async Generatorにつながっています

実装されていなかった終了処理の実装を行いました

余談

今回は3種類のpromise wrappingを行いましたが、この三つはTargetEvent, CloseEvent, AbortEventの三つのPromiseを引数に受け取るAsyncGeneratorに容易に抽象化することが可能だと思います

abortEventはエラーを投げる

大規模化して多数のイベントの多くの組み合わせを利用する必要がある場合にご利用ください

なるほどかなり研究が進んでいたのか

これは今回のを使えばそこそこ簡単にできそう

イベントをArrayに保管しておいて随時利用するようにすればいい

処理の流れは基本的に今回のパターンをそのまま使えるはず

/icons/hr.icon

fetchとかをキャンセルできるっぽい

この例はmousedownを検知するPromiseをしてるっぽい

でも実はPromiseを外側からresolveする要領でrejectもできるんですよね。

なのでAbortControllerはいらないかも？

ちょっと考えたら以下の利点から採用したみがある

API提供側の視点：事前にリスナや処理構造を決められる

/icons/hr.icon

yuki_minoh.icon

2021/10/17 03:41 これで完成とします

解説を付しました

2021/10/16 04:51 動くようにはなった

最後の返り値がおかしい

issue

for await ofループを抜けた後のMouseUp eventをどう渡すか

memo

デザインパターンとして綺麗にまとめたい

頼みの綱はやっぱAsyncIteratorかな

あ、そうだ、分割代入で綺麗にいきそう

2021/10/15 09:54 経過を載せました

やりたかったことは全部表現しました

issue

reject catch問題

そもそもthen/catchチェーンがasync/awaitと上手く噛み合ってないっぽい

memo

あとでAsyncIterator拡張を試す