JavaScript keyCodeの使い方｜キー取得【JavaScript入門】

この記事で分かること

keyCodeでキー情報を取得する仕組みと注意点
key・codeとの使い分け
入力欄でキー情報を表示する手順と結果
EnterキーとCtrl＋Enterを判定するコード例
日本語入力中やキーの長押しで気を付けたいこと

この記事は、2026年10月時点のMDN Web Docs「KeyboardEvent.keyCode」「KeyboardEvent.key」「KeyboardEvent.code」「KeyboardEvent.isComposing」などに基づいています。対象：特定のブラウザー・OSのバージョンは指定していません。

JavaScriptで押されたキーを判定したいとき、「keyCodeの数値をどう取得するのか」「今から使ってよいのか」と迷うことがあります。

補足：JavaScriptとは？
Webページに動きを加えるための書き方です。たとえば、キーを押したときに画面の表示を変える処理を書けます。

補足：keyCodeとは？
押されたキーを数値で表す、以前からある情報の名前です。従来の例ではEnterキーが13として扱われます。

この記事では、キー情報を取得する仕組みと、EnterキーやCtrl＋Enterを判定する例を紹介します。新しく作る処理では、目的に合わせてkeyまたはcodeを使い、keyCodeは主に古いコードを読むときに確認しましょう。

補足：keyとは？
押されたキーが表す文字や操作の名前を読むための情報です。たとえばEnterキーなら「Enter」として判定できます。

補足：codeとは？
キーボード上で押された位置を表す情報です。文字の意味より、どの場所のキーが押されたかを知りたい場合に使います。

結論：新しいキー判定ではkeyCodeよりkeyを使う

keyCodeは、キーに対応する数値を取得する古い方式です。現在は非推奨として扱われており、新しく作る処理では、押されたキーを表すkeyなどを使う方法が適しています。

目的に合わせて選びます。
Enterキーなど、押されたキーの意味で判定するなら key。キーボード上の位置で判定するなら code。古いコードに数値の keyCode がある場合は、その値がどこで使われているかを確認します。

キー情報は、キー操作のイベントから取得する

キーを押すと、キー操作が起きたことを知らせる「イベント」が発生します。イベントに含まれる情報を読むと、押されたキーなどを調べられます。

補足：イベントとは？
クリックやキー入力など、画面上で起きたことを知らせる合図です。

イベントに付いている値を「プロパティ」と呼びます。キー操作のイベントには、キーの名前や位置、古い方式の数値などを読むためのプロパティがあります。

補足：プロパティとは？
あるものに付いている情報や設定値です。人の名前や年齢のように、対象について知るための項目だと考えると分かりやすいです。

キーを押したときに発生するイベントには、keydownがあります。このイベントを受け取ると、キー情報を調べられます。

補足：keydownとは？
キーを押したときに起きる出来事の名前です。キーを離したときには、別の名前の出来事が使われます。

ここでいうキーとは、キーボードを押したときに入力される文字や操作のことです。たとえば、文字の「a」やEnterキーがあります。

次の図は、キー操作からキー情報を読み取る流れと、3つのプロパティの違いをまとめたものです。

キーを押すとイベントが発生し、keyCodeは数値、keyはキーの意味、codeはキーボード上の位置を表す情報として取得できます。

入力欄でキー情報を表示してみる

次の例は、入力欄でキーを押すと、キーの名前・位置・keyCodeの値をページ上に表示します。keyCodeは、古い方式の値を確認する目的でのみ使います。

試す前に、テキストを編集できるアプリと、Webページを見るブラウザーを用意してください。以下のコードは、HTMLの内容とJavaScriptの処理を1つにまとめたものです。

補足：ブラウザーとは？
Webページを見るためのアプリです。Google ChromeやSafariなどがあります。

補足：コードとは？
コンピューターに実行させる手順を書いたものです。この記事では、JavaScriptやHTMLで書いた命令を指します。

補足：HTMLとは？
Webページに見出しや入力欄などを置くための書き方です。ページの内容や部品を記述します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>キー情報の確認</title>
</head>
<body>
  <label for="key-input">キーを押してください</label>
  <input id="key-input" type="text">
  <p id="result">ここにキー情報が表示されます。</p>

  <script>
    const input = document.getElementById("key-input");
    const result = document.getElementById("result");

    input.addEventListener("keydown", function (event) {
      result.textContent =
        "key: " + event.key +
        " / code: " + event.code +
        " / keyCode: " + event.keyCode;
    });
  </script>
</body>
</html>

この例を試す手順は次のとおりです。

上のコードをすべて選んでコピーします。
テキストを編集できるアプリに貼り付けます。
ファイル名をkey-info.htmlとして保存します。末尾が.txtにならないようにしてください。
保存したファイルを、パソコンにあるブラウザーで開きます。
ページの入力欄を選び、Enterや文字キーを押します。
入力欄の下に表示される、キーの名前・位置・数値を確認します。

実行結果：Enterキーを押した場合に表示される例です。

key: Enter / code: Enter / keyCode: 13

Enterキーを判定するコードにする

キーの意味で判定する新しい処理では、event.keyの値を使います。次は、Enterキーが押されたときだけ表示を変える、単独で試せるHTMLファイルです。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Enterキーの判定</title>
</head>
<body>
  <label for="enter-input">入力欄でEnterキーを押してください</label>
  <input id="enter-input" type="text">
  <p id="enter-result">まだEnterキーは押されていません。</p>

  <script>
    const input = document.getElementById("enter-input");
    const result = document.getElementById("enter-result");

    input.addEventListener("keydown", function (event) {
      if (event.key === "Enter") {
        result.textContent = "Enterキーが押されました";
      }
    });
  </script>
</body>
</html>

この例を試す手順は次のとおりです。

上のコードをすべて選んでコピーします。
テキストを編集できるアプリに貼り付けます。
ファイル名をenter-key.htmlとして保存します。末尾が.txtにならないようにしてください。
保存したファイルを、パソコンにあるブラウザーで開きます。
入力欄を選び、Enterキーを押します。
表示が「Enterキーが押されました」に変わります。

実行結果：Enterキーを押すと、入力欄の下に次の文字が表示されます。

Enterキーが押されました

keyCode・key・codeの違いと使い分け

3つのプロパティは、同じキー操作について異なる情報を表します。押されたキーの意味が必要か、キーボード上の位置が必要かで選びます。

プロパティ	読み取る情報	使用例	選ぶ場面
`keyCode`	キーに対応する数値	Enterは従来の例で13	古いコードを読むとき
`key`	押されたキーの文字や操作名	「Enter」「a」「ArrowUp」	Enterキーなど、キーの意味で判定するとき
`code`	キーボード上のキーの位置を表す名前	「KeyA」「Digit1」	文字の意味より、キーの位置で判定したいとき

Enterキーが押されたときに処理を行うなら、keyで「Enter」と判定します。ゲーム操作などで、押されたキーの位置を基準にしたい場合は、codeが候補になります。

keyCodeの数値だけを見る方法は、新しく作る処理では避けましょう。数値だけでは何のキーを表すのかコードから分かりにくく、現在の推奨方法でもありません。

keyCodeの代表的な数値

古いコードを読むときに見かけることがある、代表的な数値を示します。これらは従来の例で使われてきた値であり、新しいキー判定にそのまま使うための一覧ではありません。

キー	従来のkeyCodeの例
Enter	13
Esc	27
Space	32
←	37
↑	38
→	39
↓	40

注意：keyCodeは非推奨の古い方式です。すべてのキーや入力環境で、数値が同じように使えると決めつけないでください。

ショートカットを作るときの考え方

ショートカットは、キーの名前と、Ctrlキーなどが同時に押されているかを組み合わせて判定します。新しく作る場合は、数値のkeyCodeではなく、keyと修飾キーの情報を使います。

補足：ショートカットとは？
キーを組み合わせて、特定の操作を行う方法です。たとえば、複数のキーを同時に押して処理を実行します。

補足：修飾キーとは？
ほかのキーと一緒に押して操作を変えるキーです。Ctrl、Shift、Alt、Metaなどがあります。

次の例では、Ctrlキーを押しながらEnterキーを押すと、ページ上の表示が変わります。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>CtrlとEnterの判定</title>
</head>
<body>
  <p>ページ上でCtrlキーを押しながらEnterキーを押してください。</p>
  <p id="shortcut-result">まだショートカットは押されていません。</p>

  <script>
    const result = document.getElementById("shortcut-result");

    document.addEventListener("keydown", function (event) {
      if (event.ctrlKey && event.key === "Enter") {
        event.preventDefault();
        result.textContent = "Ctrl＋Enterが押されました";
      }
    });
  </script>
</body>
</html>

このコードを試す手順は次のとおりです。

上のコードをすべて選んでコピーします。
テキストを編集できるアプリに貼り付けます。
ファイル名をctrl-enter.htmlとして保存します。末尾が.txtにならないようにしてください。
保存したファイルを、パソコンにあるブラウザーで開きます。
ページを選んだ状態で、Ctrlキーを押しながらEnterキーを押します。
表示が「Ctrl＋Enterが押されました」に変わります。

実行結果：CtrlキーとEnterキーを組み合わせて押すと、ページに次の文字が表示されます。

Ctrl＋Enterが押されました

ブラウザーやOSがすでに使っている組み合わせと重なると、利用者の操作を妨げることがあります。公開するページでは、既存の操作と重ならない組み合わせを選びましょう。

補足：OSとは？
パソコンやスマートフォンを動かす基本のソフトウェアです。WindowsやmacOSなどがあります。

想定したキー判定が動かないときの確認方法

表示されるキー情報が想定と違うときは、判定に使っている値と、実際に発生した出来事を一つずつ確認します。

判定に使う値を確認する

keyCodeで判定している古いコードは、まず該当する条件を探します。Enterを13として比較しているなら、書き換える場合はkeyで「Enter」と比較する方法を検討します。

// 古い方式の例
if (event.keyCode === 13) {
  // Enterキーの処理
}

// 新しく書く場合の例
if (event.key === "Enter") {
  // Enterキーの処理
}

既存コードをすぐに置き換えられない場合は、どの画面や処理がその値を使っているかを確認してから変更します。この短い例は書き方を示すもので、単独で実行するコードではありません。

イベントが受け取れているかを確認する

キーを押しても処理が動かない場合は、入力欄を選んでからキーを押しているか、キー操作を受け取る処理がその場所に設定されているかを確認します。処理を設定した場所と、実際にキーを押した場所が異なると、想定した処理に届かないことがあります。

日本語入力中は、キー入力と文字入力を分けて考える

日本語入力では、キーを押す操作と、変換候補から文字を確定する操作が関係します。そのため、キー操作の情報だけで、確定した文字を正しく処理できるとは限りません。

変換中かどうかを表すisComposingなどの情報を使うと、文字を変換している途中かを判定できます。

補足：isComposingとは？
文字を変換している途中かどうかを示す情報です。変換中の操作を、通常のキー操作と区別したい場合に確認します。

確定した文字列を処理したい場合は、キーの名前を調べる処理とは分けて考えます。入力欄の内容が変わったときに起きる出来事などを使う方法があります。

補足：文字列とは？
プログラムで文字として扱う値です。この例では、表示する説明文やキーの名前をつなげています。

確認に使える公式資料

keyCodeの現在の扱いや、key・codeの意味を詳しく確認する場合は、次のMDN Web Docsを参照してください。

補足：MDN Web Docsとは？
Webページの作り方や機能について、説明や資料を公開しているWebサイトです。

資料の内容や対応状況は更新されることがあります。ブラウザー・OSの個別バージョンによる違いは、この記事では扱っていません。

keyCodeに関するよくある質問

キーを長押しすると、イベントは何度も発生しますか？

キーを押し続けると、最初の押下の後にキーの繰り返しを知らせるイベントが発生する場合があります。繰り返しを避けたい処理では、イベントのrepeat情報を確認します。

ショートカットでブラウザーの標準操作を止めてもよいですか？

標準操作を止めると、利用者が普段使う操作を妨げることがあります。必要な場面だけに限定し、ブラウザーやOSの操作と重ならない組み合わせを選びましょう。

キーを押しても処理が動かないとき、まず何を見ればよいですか？

処理を設定した場所にフォーカスがあるか、キー操作を受け取る処理が設定されているかを確認します。ショートカットの場合は、修飾キーとキー名の両方が条件に合っているかも見直してください。

スマートフォンでもキーボードのショートカットを使えますか？

使える操作は、端末や入力方法によって異なります。キー操作だけに頼らず、画面上のボタンなど別の操作方法も用意しましょう。

まとめ

keyCodeは、キーを数値で表す古い方式です。
新しいキー判定では、キーの意味ならkey、位置ならcodeを使います。
Enterキーはevent.keyが「Enter」かどうかで判定できます。
Ctrl＋Enterなどのショートカットは、キー名と修飾キーを組み合わせて判定します。
日本語入力や長押しでは、キー操作と文字入力を分けて考えます。

まずは入力欄の例で、キー操作から情報を取得する流れを学びましょう。キーイベントが起きるタイミングを学ぶと、判定の仕組みをさらに理解しやすくなります。

次に読むべき記事

キーを押したとき、離したときにそれぞれ何が起きるかを学ぶと、キー判定をどのタイミングで行うか判断しやすくなります。

【JavaScript入門】onkeydown・onkeypress・onkeyupの使い方｜キー操作イベントの発生タイミングを徹底解説