JavaScriptキーを押すだけで
世界が動くJavaScriptのろいろな処理を
キーボードに登録して、
操作を簡単に。

いちいちマウスでクリックするのは面倒。

• キーボードでも可能な操作はキーボードでやろう

  たとえば、フォームの入力時にキーボードで色々操作して、最後に送信って時に、いちいち送信ボタンをクリックするの、ちょっと面倒ですね。
  他にも画像ビュアーで、今見ている画像の次の画像を表示させたいときに、いちいち矢印ボタンをクリックするの...これも面倒。
  そこで、こういう面倒な事はみ～んなキーボードに登録して、ちゃっちゃっと操作できるようなUIにしましょう。

キーボードのどのキーが押されたかを判定する

• 最初にやること

  まず個々の処理を個別にキーボードに登録するには、どのキーが押されたのかを判定する必要があります。
  下記の様なコードで使いたいキーのプロパティを知ることが可能です。
  このコードの場合、eがキーボードオブジェクトで、e.keyなどがイベントプロパティとなります。
  このプロパティ値を調べることでキーボードを登録することが可能になります。
  下記のコードを実際に書いて試してみてください。

  document.addEventListener("keydown", (e) => {
  console.log(`
  e.key: ${e.key}
  e.code: ${e.code}
  `);
  });

• event.codeとevent.keyを比較する。キープロパティを調べるプログラム

  キーを登録しているかいないかを判定する、event.codeを使ったプログラム：https://labo.studio-happyvalley.com/keyboad_event/keyboad_event3/
  キーを登録しているかいないかを判定する、event.keyを使ったプログラム：https://labo.studio-happyvalley.com/keyboad_event/keyboad_event4/

どのキーが押されたか判定するKeyboardEventプロパティには、通常次の二つが使われます。

• 二つのプロパティ

  上のサンプルコードでも使いましたが、キーの判定用に使うキーボードイベント・プロパティにはKeyboardEvent.keyとKeyboardEvent.codeの二つがあり、目的別に使用するのがいいです。
  それぞれを簡単に説明します。

• KeyboardEvent.key:

  ユーザーが押したキーの文字（"a", "Enter", "Shift" など）を返します。
  キーボードレイアウトや修飾キー（Shiftなど）の影響を受けます。例えば、Shift + 'a' を押すと "A" を返します。
  表示可能な文字だけでなく、"Tab", "Enter", "ArrowUp" などの特殊なキーも文字列で返します。

• KeyboardEvent.code:

  キーの物理的な位置（キーボード上の位置）を表す文字列を返します。
  キーボードレイアウトや修飾キーの影響を受けません。例えば、US配列の 'A' キーとJIS配列の 'A' キーは、物理的に同じ位置であれば常に "KeyA" を返します。
  また、Shift + 'a' を押すと "Shift", "KeyA" の二つを返します。
  KeyboardEvent.key と異なり、左右のShiftキーやAltキーはそれぞれ "ShiftLeft", "ShiftRight", "AltLeft", "AltRight" のように区別されます

• 通常の使用法ならKeyboardEvent.codeがお勧め

  修飾キーとの併用を考慮するとKeyboardEvent.codeの方が効率的でシンプルな判定方法が可能です。
  KeyboardEvent.keyだと、シフト+Aを押した時、シフトとAキーがバラバラに判定されます。
  ただし、Enterキーとの併用の場合はKeyboardEvent.keyの方が良いです。
  理由は最下段の「●Shift + Enterなど、Enterキーとの併用はちょっと特殊」をご覧ください。

好きなキーに好きな処理を登録する。

• イベントプロパティ別に処理を指定

  使いたいキーのプロパティが分かれば、キーに何らかの処理を登録することが可能になります。
  たとえば、下記は右矢印キーを押すとコンソールログに表示されます。
  やりたい処理を記述すれば、をれが実行されます。
  

  document.addEventListener("keydown", (e) => {
  	if (e.key === “ArrowRight”) {
  		console.log("右矢印が押された！");
  	}
  });

複数のキーを登録する場合はオブジェクト化するのがスマート

• オブジェクトにし、見やすくします。

  だらだらとif文を連ねるのはスマートじゃないのでオブジェクト化します。
  キーと対応する処理が見やすくなり効率があがります。
  上でも使ったプログラムです。
  
  キーを登録しているかいないかを判定する、event.codeを使ったプログラム：https://labo.studio-happyvalley.com/keyboad_event/keyboad_event3/
  キーを登録しているかいないかを判定する、event.keyを使ったプログラム：https://labo.studio-happyvalley.com/keyboad_event/keyboad_event4/
  
  下はこれを簡略化したコードです。

  document.addEventListener("keydown", (e) => {
  
  	const keyFnc= {
  		ArrowRight:  () => console.log(${e.key} が押された),
  		ArrowLeft:  () =>  console.log(${e.key} が押された),
  	};
  	keyFnc[e.key]();
  });

登録していないキーが押された場合

• ただし、ここで問題が…。

  オブジェクト化するとコードがスマートになり、見やすくなりますが、登録していないキーを押すとエラーになります。
  これを防ぐために、キーがない場合のデフォルト処理を入れます。

  document.addEventListener("keydown", (e) => {
  
  	const keyFnc = {
  		ArrowRight: () => console.log(`${e.key} が押された（右矢印）`),
  		ArrowLeft: () => console.log(`${e.key} が押された（左矢印）`),
  		default: () => console.log(`${e.key} は対応していません`),
  	};
  
  	(keyFnc[e.key] || keyFnc.default)();
  });
  
  //これで登録していないキーが押されてもエラーを出さず、おまけにそのキーのプロパティも知ることができます。

修飾キーと組み合わせるキーの場合の判定方法

• 修飾キー専用の判定プロパティ
  

  コントロールやシフト、オプションなど修飾キーそれぞれを判定するプロパティがあります。
  これを使ってどの修飾キーが押されたかを判定することが可能です。
  "Alt"、"Control"、"Shift"、"Meta"、"CapsLock"、"NumLock"、"ScrollLock"、"AltGraph"
  などの修飾キー個別のプロパティがあります。
  フォームのtextareaでの入力中にShift+Enterなどの組み合わせで送信などを登録するのが一般的です。
  （Enterは改行に使うので）

  document.addEventListener("keydown", (e) => {
  	if (e.key === "a" && e.ctrlKey) {
  		console.log("Ctrl + A が押された！");
  	}
  });

修飾キーが押されているかの真偽判定

• そもそも修飾キーが押されているかの判定プロパティ

  KeyboardEvent.getModifierState() メソッドは、指定された修飾キーの現在の状態を返します。
  修飾キーが有効な場合（すなわち修飾キーが押されているかロックされている場合）は true、そうでなければ false になります。
  下記の様に指定した修飾キーの状態を調べ押されている場合はtrueを返します。
  

  document.addEventListener("keydown", (e) => {
  	if (e.getModifierState("CapsLock")) {
  		console.log("Caps Lockがオンです");
  	}
  });
  
  //他にも下記の様なプロパティがあります。
  
  "Alt"、"Control"、"Shift"、"Meta"、"CapsLock"、"NumLock"、"ScrollLock"、"AltGraph"
  

e.key と e.code の違いと使い方

• ふたつの比較

  それぞれの特徴を比較しました
  
  特徴e.keye.code実際に入力される文字（常に同じ）キーボードの物理位置Shiftなどで変化する？言語配列に依存する？

Shift + Enterなど、Enterキーとの併用はちょっと特殊

• Enter併用はevent.keyの方が使いやすい

  通常はe.codeの方が使いやすいですが、メールなどでよく使う「Shift + Enter」 や 「Ctrl + Enter」 は、e.keyの方が使いやすいです。
  理由のひとつに、e.codeは場所によって「Enter」 や「NumpadEnter」 とプロパティ名が違うため
  判定が複雑になりますが、e.keyはどの場所のEnterを押しても「Enter」になるためです。
  
  修飾キー判定プロパティ：https://labo.studio-happyvalley.com/keyboad_event/option2/

  document.addEventListener("keydown", (e) => {
  	if (e.key === "Enter") {
  		if (e.ctrlKey) {
  			console.log("Ctrl + Enter が押されました（送信）");
  		} else if (e.shiftKey) {
  			console.log("Shift + Enter が押されました（改行）");
  		} else {
  			console.log("Enter 単独が押されました（通常確定）");
  		}
  	}
  });