00:00:00TanStackが、JavaScriptの世界を改善すべく、また新たなパッケージをリリースしました。
00:00:03今回彼らが手を入れたのは「ホットキー」です。そんなの簡単そうだし、
00:00:07最近ならAIが書いてくれるだろうと思うかもしれませんが、考え直してください。TanStack Hotkeysは、
00:00:11複数のキーボードレイアウトやOS、ホットキーの競合など、
00:00:16AIが見落としがちなエッジケースや、スコープの競合など、山ほどある課題を解決してくれます。
00:00:20さらに、キーシーケンスや録音機能も備えつつ、型安全でフレームワークを選びません。
00:00:26ホットキーが必要なら、これを使うかAIエージェントにこれを使えと言えば間違いありません。
00:00:30TanStack製なので開発体験（DX）も抜群です。それでは、さっそく
00:00:35実際に動いているところを見てみましょう。
00:00:41非常にシンプルなので、すぐにコードの解説に入ります。
00:00:45今回はReactアプリで実装しているので、TanStack React Hotkeysパッケージを使用していますが、
00:00:49バニラJavaScript用のパッケージもありますし、
00:00:52他のフレームワーク用も近日公開予定です。現在はアルファ版なので多少のバグはあるかもしれませんが、
00:00:56私のユースケースではすべて完璧に動作しました。まずは、
00:01:01最も基本的な「useHotkey」フックから見ていきましょう。下の方で、
00:01:05パッケージからインポートしているのがわかります。やるべきことは、ホットキーの定義と、
00:01:09そのキーが押された時に実行する関数を定義するだけです。今回は、
00:01:13ホットキーを押すとコマンドパレットが開くという、よくある例を用意しました。
00:01:17何を押して何が起きたか分かりやすいように、トースト通知も表示されるようにしています。
00:01:20見ての通り、このフックは非常にシンプルで、期待通りの動きをします。
00:01:24しかし、TanStackの真髄は開発体験と型安全性にあります。ここでもそれが発揮されています。
00:01:28まず、ホットキーの定義からして凄いです。
00:01:32このパッケージでホットキーを扱う場所はすべて型安全になります。これは驚異的です。
00:01:37入力可能なすべてのキーと、その組み合わせを把握しています。
00:01:41例えば、これを「meta + s」に変更すると、これはmacOSでは「Command + S」になります。
00:01:46アプリに「保存」のホットキーを設定する場合など、これが有効な組み合わせであることを認識します。
00:01:50もしタイポすれば、型エラーが出て、無効なホットキーであることを教えてくれます。
00:01:54もう一つの便利な点は、ホットキーの定義方法です。現在、
00:01:58「meta + k」に設定しており、macOSでは「Command + K」として
00:02:02正しく動作していますが、このままだとWindowsなど、
00:02:06metaキーが存在しない他のプラットフォームでは動作しなくなります。
00:02:11そこで「meta」の代わりに「modifier」キーを使うことができます。
00:02:15こうすることで、macOSでは自動的にCommandキーに、
00:02:19それ以外のプラットフォームではControlキーに設定され、即座にクロスプラットフォーム対応が完了します。
00:02:24ホットキーの定義方法について最後にもう一つ。
00:02:27文字列での定義が好みでなければ、オブジェクト形式で定義することも可能です。
00:02:31これは先ほどの「Command + K」や「Control + K」と同じ意味になります。
00:02:35修飾キー以外のキーを指定し、「modifier」をtrueにするか、他の修飾キーを個別に指定するだけです。
00:02:38定義方法の話はこれくらいにして、
00:02:42次はフックの引数にある、実行される関数について見ていきましょう。
00:02:46中身は自由に書けますが、非常にシンプルです。
00:02:50必要であれば生のキーボードイベントにアクセスできますし、
00:02:54コンテキストも取得できます。この場合、コンテキストからは、
00:02:58押されたホットキーの文字列や、
00:03:02先ほど見たようなオブジェクト形式の定義情報を取得できます。そして最後に、
00:03:05「useHotkey」には他にも見せたい機能がたくさんあります。第3引数には、
00:03:09ホットキーの動作を制御するオプションを渡せます。そのほとんどは、
00:03:13名前から推測できるでしょう。プログラムでオン・オフを切り替える「enabled」、
00:03:17「keydown」か「keyup」かを選ぶ「eventType」などがあります。
00:03:21「requireReset」は、現状ではfalseに設定されているため、
00:03:25「Command + K」を押しっぱなしにすると、繰り返しトリガーされます。
00:03:29しかし、これをtrueに設定すると、一度キーを離さない限り、
00:03:33再度トリガーされることはありません。今押し続けていますが、一度しか反応しません。
00:03:37次に「ignoreInputs」です。これは、インプットフィールドの中にいる時に
00:03:41「Command + K」を押しても、現状では完全に無視され、ホットキーは反応しません。
00:03:45もし入力中でもホットキーを有効にしたい場合は、これをfalseに設定します。
00:03:49そして最後にご紹介するオプションが「target」です。
00:03:53これを使えば、ホットキーにスコープ（有効範囲）を持たせることができます。
00:03:57デフォルトではドキュメント全体になっているので、
00:04:00ページのどこで「Command + K」を押してもコマンドパレットが起動します。
00:04:04これを特定の要素やReactのrefに変更することができます。例えば、
00:04:09「badgeRef」に変更してみます。ページ上をクリックして「Command + K」を押しても反応しませんが、
00:04:13下の「Command K」要素、つまりバッジにフォーカスを当てれば、
00:04:17そこからトリガーできるようになります。これでスコープ付きのホットキーができました。
00:04:21私がなぜこのパッケージを気に入っているか、既にお分かりいただけたでしょう。細部へのこだわり、
00:04:25優れた開発体験、そして完璧な型安全性。まだ1つのフックしか紹介していません。
00:04:30他にも見ていきましょう。次は「useHotkeySequences」フックです。
00:04:34これは複数のキーを連続して入力するシーケンスを可能にし、Vimスタイルのナビゲーションなどが作れます。
00:04:38使い方は「useHotkey」と似ていて、非常に直感的です。
00:04:43キーシーケンスを定義し、それが入力された時に実行する関数を書くだけです。
00:04:47ここでもオプションが指定できます。「timeout」は、
00:04:51次のキー入力をシーケンスの一部として認識するまでの許容時間です。
00:04:54今「gg」と設定していますが、これはリストの先頭にジャンプする設定です。
00:04:59ここで「gg」と押すと、その通りになります。また、
00:05:04「sub」と押すと一番下に飛ぶように設定しました。ちなみに、
00:05:09「sub」は「subscribe」の略なので、ぜひ登録をお願いします。次はもっとシンプルなフックです。
00:05:12まずは「useKeyHold」。追跡したいキーを指定するだけで、
00:05:16そのキーが押し下げられているかどうかを真偽値（boolean）で返してくれます。
00:05:20いくつかモニターしてみましょう。ShiftとAltを押し下げると、
00:05:24その真偽値に基づいてページの状態が変わるのがわかります。
00:05:28また、下の方で現在押されているキーを一覧表示していますが、
00:05:32これは2つ目のフック「useHeldKeys」によるものです。これは単純に、
00:05:36現在押されているキーを配列で返します。「sub」と押せば、配列に表示されます。
00:05:40便利なユーティリティ関数の前に紹介する最後のフックは、
00:05:43「useHotkeyRecorder」です。これを使うと、キーボードショートカットをカスタマイズする
00:05:47ユーザーインターフェースを簡単に作れます。とても優れたヘルパーフックです。
00:05:52使い方はとても簡単です。この「useHotkeyRecorder」からは、
00:05:56録音中かどうか、録音されたキー、録音開始・キャンセルの関数などが取得できます。
00:06:00フックのオプション内では、
00:06:05ホットキーが正常に記録された時の処理を登録できます。私の場合、
00:06:09パレットを開くホットキーを、ユーザーが決定したキーに更新するようにしています。
00:06:14これらをボタンと連携させれば、このようなUIが作れます。今は「Command + K」で
00:06:17パレットが開きますが、「Record」を押すと録音状態になります。
00:06:21ここで「Command + Backspace」と入力すると、それが新しいホットキーになります。
00:06:26実際には、これをデータベースに保存してユーザー設定として永続化させることになるでしょう。
00:06:29本当に素晴らしいヘルパーフックです。これまで見てきた他のフックと同様に、
00:06:33使い方は非常にシンプルで、デフォルト設定も気が利いています。
00:06:37例えばmacOSでCommandキーを使って記録しても、
00:06:42自動的に「modifier」キーに変換されるため、WindowsやLinuxに移ってもControlキーとして動作します。
00:06:46フック以外にも、このパッケージについてお見せしたいことがいくつかあります。
00:06:49まずは、表示形式の調整を助けてくれる関数です。
00:06:53「formatForDisplay」という関数が「tanstack/hotkeys」から提供されています。
00:06:57「modifier + backspace」のような指定を渡すと、自動的にユーザーのプラットフォームに合わせた
00:07:02アイコン付きの形式に変換してくれます。ここでは「⌘ Backspace」と表示されていますね。
00:07:06Windowsなら「Ctrl Backspace」になります。また「formatWithLabels」という
00:07:10関数もあり、これはほぼ同じですが、修飾キーをアイコンではなく
00:07:14正しいラベル（文字列）に変換します。この場合は「Command Backspace」となり、
00:07:18Windowsなら「Control Backspace」になります。そして最後に、
00:07:22私がTanStackを愛してやまない理由の一つ、DevToolsについてです。このパッケージも例外ではありません。
00:07:27DevToolsを開くと、ページに登録されているホットキーや
00:07:30シーケンスが一目でわかります。状態やトリガーされた回数、
00:07:33「keydown」か「keyup」のどちらで反応するかも確認できます。さらに、
00:07:37ドキュメント全体を監視しているのか、特定の要素なのかもわかります。
00:07:41詳細を開けば、設定されたオプションを確認したり、手動で実行（トリガー）させたりもできます。
00:07:45さらに上部では、現在押し下げられているキーが表示されます。
00:07:49設定時にキーの名前がわからなければ、ここで実際に押してみれば
00:07:52正確な値を確認できます。何度も繰り返しているようですが、
00:07:56TanStackは本当に開発体験というものを理解しています。AIコーディングの時代になっても、
00:08:00こうしたツールが提供されるのは非常に嬉しいことです。ホットキーの実装が必要なら、
00:08:05ぜひチェックしてみてください。感想をコメント欄で教えてくださいね。
00:08:08チャンネル登録も忘れずに。それでは、また次の動画でお会いしましょう！