まず覚える表現
debounce a function
関数をdebounceする
debounce
連続した入力をまとめて処理する プログラミングで、短時間に何度も起こる操作をすぐに全部実行せず、少し待って最後の操作だけを処理すること。検索ボックス、ボタン、スクロール処理などでよく使います。
機械的な接点の揺れを取り除く 電子回路で、ボタンやスイッチを押したときに発生する細かいオン・オフの揺れを、1回の入力として扱えるようにすること。
debounce処理、入力抑制処理 短時間に何度も発生するイベントを制御し、一定時間待ってから処理する仕組みや方法を指します。
学習ポイント
注意する形
誤 We should delay the API forever.
We should debounce the API call.
debounceは永遠に遅らせることではなく、短い待ち時間を置いて不要な連続実行を防ぐことです。
覚え方
跳ね返りを落ち着かせる
bounceは「跳ねる」。de-は「取り除く」のイメージ。ボタンや入力が何度も跳ねるように反応するのを落ち着かせる、と覚えると分かりやすいです。
意味
-
連続した入力をまとめて処理する
動詞プログラミングで、短時間に何度も起こる操作をすぐに全部実行せず、少し待って最後の操作だけを処理すること。検索ボックス、ボタン、スクロール処理などでよく使います。
We should debounce the search input to reduce unnecessary API calls.
不要なAPI呼び出しを減らすために、検索入力をdebounceするべきです。
-
機械的な接点の揺れを取り除く
動詞電子回路で、ボタンやスイッチを押したときに発生する細かいオン・オフの揺れを、1回の入力として扱えるようにすること。
The circuit debounces the button signal before sending it to the controller.
その回路は、ボタン信号をコントローラーに送る前に接点の揺れを取り除きます。
-
debounce処理、入力抑制処理
名詞短時間に何度も発生するイベントを制御し、一定時間待ってから処理する仕組みや方法を指します。
A debounce prevents the function from running on every keystroke.
debounce処理により、キー入力のたびに関数が実行されるのを防げます。
例文
-
The developer debounced the resize event to improve performance.
その開発者はパフォーマンスを改善するために、リサイズイベントをdebounceしました。
-
The app waits 300 milliseconds before searching, so the input is debounced.
そのアプリは検索前に300ミリ秒待つため、入力がdebounceされています。
-
Please add a debounce to this button handler to avoid duplicate requests.
重複したリクエストを避けるために、このボタン処理にdebounceを追加してください。
-
Without debounce, one button press may be detected as several presses.
debounceがないと、1回のボタン押下が複数回の押下として検出されることがあります。
使い方
-
throttleとの違い
debounceは「最後の操作から一定時間たったら実行する」イメージです。throttleは「一定時間ごとに最大1回だけ実行する」イメージです。検索入力にはdebounce、スクロール監視にはthrottleが使われることが多いです。
-
日本語ではそのまま使われることが多い
日本語の開発現場では「デバウンスする」「debounce処理を入れる」のように、英語のまま使われることがよくあります。
よくある間違い
-
誤: We should delay the API forever.
正: We should debounce the API call.
debounceは永遠に遅らせることではなく、短い待ち時間を置いて不要な連続実行を防ぐことです。
-
誤: The function is debouncing every second while the user keeps typing.
正: The function runs after the user stops typing for one second.
debounceは通常、操作が止まってから実行されます。一定間隔で繰り返し実行する意味ならthrottleの方が近いです。
コロケーション
-
debounce a function
関数をdebounceする
You can debounce a function to stop it from running too often.
関数が頻繁に実行されすぎないように、debounceできます。
-
debounce input
入力をdebounceする
Debounce input when users type in a search box.
ユーザーが検索ボックスに入力するときは、入力をdebounceしましょう。
-
debounce delay
debounceの待ち時間
A debounce delay of 300 milliseconds feels responsive.
300ミリ秒のdebounce待ち時間なら、反応がよく感じられます。
-
debounce time
debounce時間
The debounce time is too long, so the search feels slow.
debounce時間が長すぎるので、検索が遅く感じられます。
語形変化
-
debounced
動詞 / debounceされた、連続入力をまとめて処理した
過去形・過去分詞形です。
-
debouncing
動詞 / debounceしている、連続入力を抑制している
現在分詞・動名詞形です。
覚え方
- image
跳ね返りを落ち着かせる
bounceは「跳ねる」。de-は「取り除く」のイメージ。ボタンや入力が何度も跳ねるように反応するのを落ち着かせる、と覚えると分かりやすいです。
- phrase
最後まで待ってから実行
debounceは「連打されても、最後の入力のあと少し待って1回だけ実行する」と覚えると、プログラミングで使いやすくなります。
ミニストーリー
Mika built a search box for her team’s website. At first, the app sent a request after every letter. The server became slow. She added a debounce, so the app waited until the user stopped typing. The search became faster, smoother, and easier to use.
ミカはチームのウェブサイト用に検索ボックスを作りました。最初は、1文字入力するたびにアプリがリクエストを送っていました。サーバーは遅くなりました。そこで彼女はdebounceを追加し、ユーザーが入力を止めるまでアプリが待つようにしました。検索はより速く、なめらかで、使いやすくなりました。
内容について
意味、例文、使い方などで気づいた点があれば送れます。