JSライブラリを1日1つ紹介する
1日1つJSのライブラリを調べます。
① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する
本日は、debounce-promiseのドキュメントを読んで実際に業務で使っているところを調べました。
調べてみた
このライブラリを知るためには、まずdebounceというものを知る必要がありそうです。
JavaScriptの文脈のdebounceは、こちらのサイトが大変参考になりました。
このとき handleInputChange() はキーボード入力が
行われる度 に実行されます。サンプルコードのように単純な処理であれば問題ありませんが
バリデーションを実施したり文字加工などの中間処理を行うと
処理コストが高くなります。(実装にも依存するが) ブラウザの動作がもたつく、ユーザーの
入力を阻害するなどの UX を低下させる結果をもたらします。
そういえば前職で私が書いたクソコードによって、入力するときにonChangeを拾いすぎてデバッグが大変だったり処理がめっちゃ重くなるという経験をしました。。。
当時は何も知らなくて「しょうがないかな〜」くらいに思ってたんですけど、こんな便利なものがあったんですね👀
ドキュメントのAPIによると、以下のコードは
function refresh() {
return fetch('/my/api/something')
}
const debounced = debounce(refresh, 100)↑ 100ms待ってからrefreshするよ〜という意味みたいです。
わからなかったところ
ドキュメントや、調べている過程でPromiseというものが出てきました。
ざっとみた感じ、もしかしてこのライブラリがなくてももうJavaScriptにdebounced関数と同じことができる標準ライブラリが追加されたのでしょうか...？
ちょっと時間がなくて読めていないですが、休日によく調べてみたいと思います！
3行以内でまとめる
debounce-promiseを導入すると、
- debounce関数が使えるようになる！
- 入力の受付処理など、ユーザーが入力し終わるまでの間通信を止めることができ、無駄な通信を削減できる。
フィードバック
- 100ms 以内にもう1回入力を感知したら、先に感知してた方のイベントをキャンセルしてくれるライブラリってことですね、便利
- 100ms 待ってそれ以上の入力が無かったら登録した関数を実行する
以上です！
