JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで押された矢印キーを検出する方法【初心者向けサンプルコード付き】

JavaScriptで押された矢印キー（方向キー）を検出するには、keydownイベントを利用します。キーボードのキーが押されるたびに発生するこのイベントのkeyCodeプロパティを参照することで、どの矢印キーが押されたのかを簡単に判別できます。

矢印キーに対応するkeyCodeの値は以下のとおりです。

  • 37：左矢印キー
  • 38：上矢印キー
  • 39：右矢印キー
  • 40：下矢印キー

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
   font-size: 18px;
   font-weight: 500;
}
</style>
</head>
<body>
<h1>押された矢印キーの検出</h1>
<div class="sample"></div>
<h3>
いずれかの矢印キーを押すと、押されたキーが画面に表示されます
</h3>
<script>
let fillEle = document.querySelector(".sample");
document.body.addEventListener("keydown", (event) => {
   switch (event.keyCode) {
      case 37:
         fillEle.innerHTML = "左キーが押されました";
      break;
      case 38:
         fillEle.innerHTML = "上キーが押されました";
      break;
      case 39:
         fillEle.innerHTML = "右キーが押されました";
      break;
      case 40:
         fillEle.innerHTML = "下キーが押されました";
      break;
   }
});
</script>
</body>
</html>

このコードでは、document.bodyに対してkeydownイベントリスナーを登録し、switch文でkeyCodeの値を判定しています。該当するケースに一致すると、class属性「sample」を持つ要素の中に、押されたキーの情報が出力されます。

実行結果

JavaScriptで押された矢印キーを検出する方法【初心者向けサンプルコード付き】

いずれかの矢印キーを押すと、以下のように押されたキーの種類が表示されます。

JavaScriptで押された矢印キーを検出する方法【初心者向けサンプルコード付き】

補足：より現代的な書き方について

なお、keyCodeは現在非推奨（deprecated）となっているため、最新のブラウザ環境ではevent.keyやevent.codeを使用する方法が推奨されています。例えば、「ArrowLeft」「ArrowRight」などの文字列と比較することで、同じように矢印キーを判定できます。

  1. JavaScriptの高階アロー関数とは？基本概念と実装例をわかりやすく解説

    JavaScriptでは、関数はオブジェクトとして扱われます。そのため、関数を別の関数に引数として渡したり、関数の戻り値として別の関数を返したりすることが可能です。このように、JavaScriptの関数は「第一級関数（ファーストクラス関数）」と呼ばれており、変数やオブジェクト、配列などに自由に格納できます。高階アロー関数（Higher Order Arrow Functions）は、関数を引数として受け取る、関数を返す、あるいはその両方を行うことができる関数のことです。高階アロー関数のサンプルコード以下は、JavaScriptで高階アロー関数を実装した例です。配列の各要素を2倍にする処理を、関

  2. JavaScriptで矢印キーの押下を検出する方法

    JavaScriptで矢印キーの押下を検出するには、onkeydownイベントを使用します。各キーには固有のキーコードが割り当てられており、矢印キーの場合は次の通りです。左矢印キーは「37」、上矢印キーは「38」、右矢印キーは「39」、下矢印キーは「40」です。押されたキーのkeyCodeをswitch文などで判定することで、どの矢印キーが押されたかを識別できます。サンプルコード以下に具体的な実装例を示します。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8&g