🏹

GitHub風のキーボードショートカットをお手軽に追加する

3 min read

はじめに

個人開発しているWEBサービスにキーボードショートカットを追加しました。その時に使ったnpmパッケージがお手軽で素晴らしかったので記事にすることにしました。

hotkey by GitHub

キーボードショートカットを実現するJSライブラリなどを探して、何を使うか検討していたところ、GitHub社が開発するnpmパッケージを見つけました。

https://github.com/github/hotkey

GitHubのサイトのHTMLソースを見ると、data-hotkey というhotkey由来の記述が発見できたので、GitHubのサービス内で実際に使っているようです。

仕組みとしては、HTMLの各要素(a,button,input,textareaなど)に data-hotkey="a" のようにdata要素を追加すると、「a」がキーボードショートカットとなります。ショートカット実行後に、その要素のonclick()関数実行や、inputフィールドにフォーカスが当たるという動作が発動します。

デモのHTMLソースを見ながら操作すると、仕組みが分かりやすいです。

hotkeyの公式デモはこちら

いいところ

導入が超簡単

リポジトリ内のReadMeを読んでいただければと思うのですが、たった数行の追加でキーボードショートカットが実現できてしまいます。とても簡単です。

Vue.jsにも簡単に追加できる

コード例は不要なレベルだと思いますが、一応Vue.js版のコード例を載せておきます。

App.vue
<template>
  <div>
    <router-link :to="/" data-hotkey="g h">home</router-link>
    <router-link :to="/stats" data-hotkey="g s">stats</router-link>
    <a @click="openDialogShortcuts" data-hotkey="Shift+?">help</a>
  </div>
</template>

<script>
import { install, uninstall } from "@github/hotkey";

export default {
  mounted() {
    for (const el of document.querySelectorAll("[data-hotkey]")) {
      install(el);
    }
  },
  beforeDestroy: function() {
    for (const el of document.querySelectorAll("[data-hotkey]")) {
      uninstall(el);
    }
  },
};
</script>

シーケンスショートカットが使える

GitHubには、gから始まるショートカットがあります。

https://docs.github.com/ja/github/getting-started-with-github/using-github/keyboard-shortcuts

「g」から始まる組み合わせのショートカットは、「g」を押して一旦離してから、もう1つのキーを押すことで動作します。例えば、「g」を押して離してから、「n」を押すと通知画面に遷移します。もちろん同時押しでも動作可能です。

こういう動作ができるショートカットを追加可能です。

この動作をサポートしていないライブラリもあるので、これがサポートされていることは長所の一つです。

万能ではない

spaceキーのショートカットが使えない

https://github.com/github/hotkey/issues/45

どうしてもspaceキーのショートカットが欲しかったので、色々試してみましたが、使えませんでした。

GitHubでも、全てのキーボードショートカットをhotkeyを使って実装しているわけではない

詳細はこちらで。

https://github.com/github/hotkey/issues/28

ちょっとした使い方のTips

  • 大文字のショートカットキーの場合は、「Shift+a」ではなく、「A」とする

https://github.com/github/hotkey/issues/33
  • 「?」をショートカットキーにしたい場合は、「Shift+?」で動作する

その他のキーボードショートカットのJSライブラリ

Hotkeys

https://github.com/jaywcjlove/hotkeys

どうしてもSpaceキーのショートカットを実装したかったので、このライブラリも合わせて使うことにしました。

シーケンスショートカットに対応していない

https://github.com/jaywcjlove/hotkeys/issues/26

Vue.jsでの使用方法

https://github.com/jaywcjlove/hotkeys/issues/115

Mousetrap

https://github.com/ccampbell/mousetrap

シーケンスショートカットに対応しているが、メンテが滞っている。採用は見送った。

Vue.js用のライブラリ

Vue2専用で、Vue3に上げるときに困りそうなので採用しなかった。

参考記事

最後に宣伝

今回の実装内容は、僕が個人開発している「オンライン・コワーキングスペース Sushi Work」に追加しています。

ポモドーロテクニックをしながら開発している方は、ぜひキーボードショートカットに対応したSushi Workをプロダクティビティ向上のお供にしていただければ幸いです🍣

https://sushiwork.com/

Discussion

ログインするとコメントできます