この記事で分かること
keyCodeの役割と基本的な使い方- 押されたキーを数値で判定する方法
- ショートカットキーや入力制御への応用
event.key/event.codeとの違い- 実務で使えるサンプルコード
event.keyCode は、キーボードで押されたキーのコード（キーコード）を取得するためのプロパティです。
「どのキーが押されたか」を判定したいときに利用されます。
現在は event.key や event.code の使用が推奨されていますが、
既存の JavaScript コードでは keyCode が多く使われているため、理解しておく価値があります。
keyCode とは？
keyCode は、押されたキーを数値で表したものです。
たとえば、Enter キーは 13、A キーは 65 など、キーごとに固有の番号が割り当てられています。
使用例：押されたキーのコードを表示する
<body onkeydown="alert(event.keyCode)">
→ キーを押すたびに、そのキーのコードがダイアログで表示されます。
keyCode の主な用途
- 特定のキーが押されたか判定する
- ショートカットキーの実装（例：Ctrl + S）
- Enter キーでフォーム送信を制御する
- 矢印キーでカーソル移動や UI 操作を行う
実際のサンプル：キーコードをリアルタイム表示
<input type="text"
onkeydown="console.log('keyCode:', event.keyCode)">
→ 入力欄でキーを押すたびに、キーコードがコンソールに表示されます。
keyCode の代表例
| キー | keyCode |
|---|---|
| Enter | 13 |
| Esc | 27 |
| Space | 32 |
| ← | 37 |
| ↑ | 38 |
| → | 39 |
| ↓ | 40 |
keyCode と key / code の違い
| プロパティ | 内容 | 例 |
|---|---|---|
keyCode |
キーを数値で表す（非推奨） | 13（Enter） |
key |
押されたキーの文字を返す | “Enter” / “a” / “ArrowUp” |
code |
物理キーの位置を返す | “KeyA” / “Digit1” |
→ 新規実装では event.key の使用が推奨されますが、
既存コードの保守では keyCode の理解が必須です。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- キー入力やイベント処理を基礎から理解したい
keyCode は「どのキーが押されたか」を判定するための基礎知識で、
ショートカット実装や入力制御など実務で頻出します。
書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
イベント処理の基礎が丁寧に解説されており、keyCode の理解にもつながります。
この本で解決できること：
- イベントの仕組みを視覚的に理解できる
- キー入力と UI の連動が分かる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
keyCode を使ったキー判定やショートカット実装など、実務的なコード理解が深まります。
この本で解決できること：
- イベントの動作原理を体系的に理解できる
- 実務で使えるキー入力処理が書けるようになる
- 現代的な JavaScript の書き方が身につく
動画で理解を深めたい方へ（Udemy講座）
keyCode は「押されたキーを判定する」ための重要な知識で、
ショートカットキーや入力制御など UI 実装に直結します。
動画で実際の動きを確認できる Udemy は、こうしたイベント理解に非常に向いています。
初心者のためのJavaScript 完全入門
関数・条件分岐・イベントなど、JavaScriptの基礎を体系的に学べる人気講座です。
keyCode を使ったキー判定の基礎も丁寧に扱われており、初心者でも理解しやすい内容です。
この講座で解決できること：
- キー操作イベントの動きを視覚的に理解できる
- Enter キー判定やショートカット処理の基礎が分かる
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、keyCode を使った高度な入力制御を学びたい方に最適です。
この講座で解決できること：
- 実務レベルのショートカットキー実装を理解できる
keydown／keyupとkeyCodeを組み合わせた UI 制御が身につく- 現代的なイベント処理をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- キー判定の仕組みが曖昧なまま進んでしまう
- ショートカットキーの実装方法が分からない
- リアルタイム入力制御の設計が難しい
- コードレビューを受ける機会がない
スクールでは、プロの講師が学習ロードマップを作成し、
keyCode を使ったキー判定・ショートカット実装・入力制御など、
実務で必須のスキルを丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
keyCode に関するよくある質問（FAQ）
keyCode は今でも使える？
非推奨ですが、多くの既存コードで使われているため動作はします。
新しく実装する場合は何を使うべき？
event.key を使うのが最も推奨されます。
日本語入力（IME）ではどうなる？
IME 変換中は keyCode の値が安定しない場合があります。確定後の処理は keyup が安定です。
ショートカットキーは keyCode で作れる？
可能です。Ctrl や Shift などの修飾キーと組み合わせて判定します。
まとめ
event.keyCodeは押されたキーのコードを取得するプロパティ- キー判定・ショートカット実装などに便利
- 現在は
event.keyの使用が推奨される - 既存コードの保守では
keyCodeの理解が重要
