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

【JavaScript】キーボードの上下キーで変数をカウントアップ・カウントダウンする方法

JavaScriptでは、keydownイベントを利用することで、キーボードの上矢印キー・下矢印キーが押されたタイミングを検出し、変数の値を自由に増減させることができます。本記事では、上矢印キー(↑)で値をカウントアップし、下矢印キー(↓)でカウントダウンするサンプルコードを紹介します。

実装のポイント

キー入力の判定には、イベントオブジェクトのkeyCodeプロパティを使用します。

  • 38:上矢印キー(↑)
  • 40:下矢印キー(↓)

それぞれのキーが押されたときに、インクリメント演算子(++a)やデクリメント演算子(--a)で変数の値を更新し、画面に表示します。

サンプルコード

<!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;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>キーボードの上下キーで変数の値を変更する</h1>
<div style="color: green;" class="result"></div>
<h3>上矢印キーまたは下矢印キーを押して値を増減させてください</h3>
<script>
    let resEle = document.querySelector(".result");
    let a = 0;
    resEle.innerHTML = a;
    document.body.addEventListener("keydown", (event) => {
        if (event.keyCode === 38) {
            resEle.innerHTML = ++a;
        }
        else if (event.keyCode === 40) {
            resEle.innerHTML = --a;
        }
    });
</script>
</body>
</html>

コードの解説

  1. document.querySelector(".result")で、数値を表示する要素を取得します。
  2. 変数aを初期値0として定義し、初期表示を行います。
  3. document.body.addEventListener("keydown", ...)で、ページ全体のキー押下を監視します。
  4. event.keyCode === 38(上矢印キー)のときは++aで値を1増やし、event.keyCode === 40(下矢印キー)のときは--aで1減らします。
  5. resEle.innerHTMLに更新後の値を代入することで、画面上の表示がリアルタイムに切り替わります。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

【JavaScript】キーボードの上下キーで変数をカウントアップ・カウントダウンする方法

上矢印キーを数回押すと、値が順にカウントアップしていきます。

【JavaScript】キーボードの上下キーで変数をカウントアップ・カウントダウンする方法

続いて下矢印キーを数回押すと、値がカウントダウンされます。

【JavaScript】キーボードの上下キーで変数をカウントアップ・カウントダウンする方法

補足:event.keyの活用

keyCodeは非推奨(deprecated)となりつつあるため、より新しいコードではevent.keyを使った以下のような判定もおすすめです。

document.body.addEventListener("keydown", (event) => {
    if (event.key === "ArrowUp") {
        resEle.innerHTML = ++a;
    } else if (event.key === "ArrowDown") {
        resEle.innerHTML = --a;
    }
});

このように、キーボード操作と組み合わせることで、ゲームやスライダーUIなど、インタラクティブなWebアプリケーションを簡単に構築できます。

  1. JavaScriptで文字列からグローバル変数を動的に取得する方法

    JavaScriptでは、windowオブジェクトのプロパティとしてグローバル変数にアクセスできるため、変数名を表す文字列を組み合わせることで、グローバル変数を動的に取得することが可能です。取得した値は alert() を使って画面に表示できます。 基本構文 alert(window[変数名の一部 + 変数名の残り + otherVariableName]); このように、window[...] の括弧内に文字列連結や変数を使った式を記述することで、実行時に変数名が決まるケースにも柔軟に対応できます。 サンプルコード <!DOCTYPE html> <html lang=&q

  2. JavaScriptでHTMLテーブルの行数を取得する方法

    JavaScriptでHTMLテーブルの行数を取得したい場面はよくあります。例えば、テーブルに表示されているデータの件数を確認したり、動的に行を追加・削除した後の状態を把握したりするケースです。サンプルとなるHTMLテーブルまず、以下のようなHTMLテーブルを用意します。<table id=tblDemo border=1> <thead> <tr> <th>名前</th> <th>年齢</th> </tr> </thead> <tbody> <tr><td