【JavaScript】commandキーが押されたことを認識する方法

「このキーが押されたらこの処理を実行する」というプログラムはインタラクティブなWebアプリケーションを作る際には必須になってきます。

例えば、Ctrl+〇〇キーというようなショートカットキーを用意して、利用してくれる方々にとって快適で効率的な操作ができるようにすることは大切なことです。

しかしながら、Mac使っている利用者に対してもショートカットキーを用意しようと考えると、次のような問題に直面することがあるかもしれません。

あれ、commadキーが押されたことってどうやって認識するんだ？

今回は、JavaScriptを使ってcommandキーが押されたことを認識する方法をご紹介します。

event.metaKeyを使ってcommandキーが押されたことを認識する
commandキーと他のキーを同時に押したことを認識する
commandキーを含めた3つのキーが押されたことを認識する
WindowsだとWindowsキーが押されたことを認識してしまう

event.metaKeyを使ってcommandキーが押されたことを認識する

こちらがcommandキーが押された時に、特定の処理を実行するためのコードの例です。

document.addEventListener('keydown', function (event) {
  if (event.metaKey) {
    //commandキーが押されてた時に実行したい処理をここに書きます。
  } 
})

ポイントは event.metaKey の部分です。event.metaKeyというプロパティは、commandキーが押されている時にtrueとなり、押されていないときはfalseになります。

commandキーと他のキーを同時に押したことを認識する

commandキーはそれ単体で利用するというよりは、他のキーと組み合わせて使うときが多いですよね。

例えば、「commandキー+Aキー」、「commandキー+Bキー」というようなショートカットキーをイメージしていただけるとわかりやすいと思います。

comanndキーと他のキーを同時に押した時に特定の処理を実行する方法を説明するために、ここでは command+A が押されたときに処理を実行させるコードを紹介します。

document.addEventListener('keydown', function (event) {
  if (event.metaKey && event.code === 'KeyA') {
    //command+Aが押されたときに実行させたい処理をここに書きます。
  }
})

この書き方以外にも、2つのif文に分けて書く書き方でも、同じようにcommand+Aが押された場合に処理を実行させることができます。

document.addEventListener('keydown', function (event) {
  if (event.metaKey) {
    if (event.code==='KeyA') {
      //command+Aが押されたときに実行させたい処理をここに書きます。
    }
  } 
})

迷う方は1つのif文の条件式に書いてしまう書き方がおすすめです。if文入れ子構造が複雑になることを防ぐことができますし、見た目もなんかスッキリしている感じがするためです。

commandキーを含めた3つのキーが押されたことを認識する

commandキーを使ったショートカットキーを設定するときは、3つのキーを組み合わせたものを設定したい機会もかなりあります。

というもの、command+○○キーという組み合わせは、Webブラウザにデフォルトで設定されているショートカットキーと重複してしまうことが多いためです。

ここでは、例として command+option+N という組み合わせでキーが押されたときに特定の処理を実行させるコードを紹介します。

document.addEventListener('keydown', function (event) {
  if (event.metaKey && event.altKey  && event.code === 'KeyN') {
    //command+option+Nが押されたときに実行させたい処理をここに書きます。
  }
})

2つのキーが押されたことを認識するときと同じように、複数のif文に分けて書く方法もあります。

document.addEventListener('keydown', function (event) {
  if (event.metaKey) {
    if (event.altKey) {
      if (event.code === 'KeyN') {
        //command+option+Nが押されたときに実行させたい処理をここに書きます。
      }
    }
  }
})

こちらもお好きな書き方を選んで使ってください。