JavaScriptでキーボードの矢印イベントを処理する方法

以下に、シンプルで簡単な方法といくつかのコード例を示します。

1. キーボードイベントのリスナーを追加する方法:

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 37) {
    // 左矢印キーが押された場合の処理
  } else if (event.keyCode === 38) {
    // 上矢印キーが押された場合の処理
  } else if (event.keyCode === 39) {
    // 右矢印キーが押された場合の処理
  } else if (event.keyCode === 40) {
    // 下矢印キーが押された場合の処理
  }
});

上記のコードでは、keydown イベントをリスンし、event.keyCode を使用して押されたキーのコードを取得しています。矢印キーのコードは、左矢印(←)が37、上矢印(↑)が38、右矢印(→)が39、下矢印(↓)が40です。

2. キーボードイベントのリスナーをアローファンクションで書く方法:

document.addEventListener('keydown', (event) => {
  switch (event.keyCode) {
    case 37:
      // 左矢印キーが押された場合の処理
      break;
    case 38:
      // 上矢印キーが押された場合の処理
      break;
    case 39:
      // 右矢印キーが押された場合の処理
      break;
    case 40:
      // 下矢印キーが押された場合の処理
      break;
    default:
      break;
  }
});

上記のコードでは、switch 文を使用してキーのコードをチェックし、対応する処理を実行しています。