ゲーマーによるゲーマーのためのdebounceとthrottle解説 🔮🧙🔥

はじめに

プログラミングの世界でよく出てくるdebounceとthrottle。
これらは連続して発生するイベントを制御する手法ですが、ゲームのスキルシステムと非常によく似た動作をします。

Debounce = スキルの詠唱時間 🔮

debounceは、RPGゲームでよくある「詠唱スキル」のような動作をします。

// 詠唱魔法のイメージ
const castFireball = debounce(() => {
  console.log("ファイアボール発動！🔥");
}, 500); // 0.5秒の詠唱時間

• 0.5秒の詠唱時間
• 詠唱スキルの特徴
  • 詠唱中に他のアクションを取ると、詠唱がキャンセルされて最初からやり直し
  • 詠唱完了まで待たないと発動しない
  • 最後の入力から指定時間が経過した後に1回だけ発動

例えば、ファイアボールという魔法があり、0.5秒の詠唱時間があるとします。

詠唱開始 → 0.3秒後に移動 → 詠唱キャンセル
再度詠唱開始 → 0.5秒間何もしない → ファイアボール発動！

Throttle = スキルのクールタイム ⏱️

throttleは、アクションゲームでおなじみの「クールタイムのあるスキル」のような動作をします。

// クールタイムのあるスキルのイメージ
const useSlash = throttle(() => {
  console.log("斬撃スキル発動！⚔️");
}, 1000); // 1秒のクールタイム

• 1秒のクールタイム
• クールタイムスキルの特徴
  • 即座に発動する
  • 発動後は一定時間、再使用不可
  • クールタイム中の入力は無視される

例えば、斬撃というスキルがあり、1秒のクールタイムがあるとします。

スキル使用 → 即座に発動！
クールタイム中（1秒間）は何回ボタンを押しても発動しない
クールタイム終了後 → 再度使用可能

実際のコード例

// debounce（詠唱スキル）の実装例
const castSpell = debounce((spellName: string) => {
  console.log(`${spellName}の詠唱完了！`);
}, 500);

// throttle（クールタイムスキル）の実装例
const useSkill = throttle((skillName: string) => {
  console.log(`${skillName}を発動！`);
}, 1000);

// 使用例
castSpell("メテオ");    // 0.5秒後に発動
useSkill("突進攻撃");   // 即座に発動、その後1秒間は使用不可

まとめ

• Debounce（詠唱スキル）: 最後の入力から一定時間待って発動
• Throttle（クールタイムスキル）: 即座に発動し、一定時間は再使用不可

このように、ゲームのスキルシステムと対応させて考えると、debounceとthrottleの違いがより直感的に理解できますね！