JavaScriptのキーボードイベント、キー判定にどれつかう？

# 概要

ブラウザｘJavaScriptで扱うキーボードイベント、キー判定にどのプロパティを使うかのまとめ　です

## ざっくりいうと　event.key　または　event.code のどちらかを使うべし

- 「●●が押されたら」のような判定をしたいときは **event.key** または **event.code** のどちらかで判定する。
- キー判定には、いろんなプロパティがあって、どれ使ったらいいの？と悩むことがある
- 以前ふつうにつかっていた **event.keyCode**等は<font color=red>**deprecated**</font>になっている

<table>
 <tr>
  <td>キー取得方法</td>
  <td>ステータス</td>
  <td>概要</td>
  <td>参考</td>
 </tr>
 <tr>
  <td>event.key</td>
  <td><font color=blue><b>オススメ</b></font><br>(正確にはWD)</td>
  <td>キー属性値≒入力された文字　を取得する<br> ・例えば、フルキーボードの5でもNumPadの5でもevent.keyで取得されるのは"5" <br>・ロケールやシステムレベルキーマップの影響を受ける</td>
  <td><a href="https://www.w3.org/TR/uievents-key/#key-attribute-value">W3C</a></td>
 </tr>
 <tr>
  <td>event.code</td>
  <td><font color=blue><b>オススメ</b></font><br>(正確にはWD)</td>
  <td>物理キーを取得する。<br> ・5を押した場合、フルキーボードの5(Digit5)とNumPadの5(NumPad5)は区別される <br>・上位のキーマップの影響は受けない。<br>・IEは対象外

<a href="https://www.w3.org/TR/uievents-code/#keyboard-key-codes"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170905/6846bf63-bc4d-608a-0585-be399053b2fa.png">Key Codes for Standard Keyboards</a>

</td>
  <td><a href="https://w3c.github.io/uievents/#dom-keyboardevent-code">W3C</a></td>
 </tr>
 <tr>
  <td>event.keyCode</td>
  <td><font color=red>Deprecated<br>(今後は使わん)</font></td>
  <td>キーコードを数値で取得する <br>・ロケールやシステムレベルキーマップの影響を受ける</td>
  <td><a href="https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/keyCode">MDN</a></td>
 </tr>
 <tr>
  <td>event.which</td>
  <td><font color=red>Deprecated<br>(今後は使わん)</font></td>
  <td>キーコードを数値で取得する<br> ・event.keyCodeと同じ</td>
  <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which">MDN</a></td>
 </tr>
 <tr>
  <td>event.keyIdentifier</td>
  <td><font color=red>Deprecated<br>(今後は使わん)</font></td>
  <td>"key identifier"文字列を取得する<br> ・標準ではない→同様の機能をもつevent.keyを使う</td>
  <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyIdentifier">MDN</a></td>
 </tr>
 <tr>
  <td>event.charCode</td>
  <td><font color=red>Deprecated<br>(今後は使わん)</font></td>
  <td>キーコード値(unicode)を取得する <br>・標準ではない</td>
  <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/charCode">MDN</a></td>
 </tr>
</table>

修飾キー

<table>
 <tr>
  <td>キー状態取得方法</td>
  <td>型</td>
  <td>概要</td>
 </tr>
 <tr>
  <td>event.ctrlKey</td>
  <td>boolean</td>
  <td>ctrl(command)キーが押されているか否か</td>
 </tr>
 <tr>
  <td>event.shiftKey</td>
  <td>boolean</td>
  <td>shiftキーが押されているか否か</td>
 </tr>
 <tr>
  <td>event.altKey</td>
  <td>boolean</td>
  <td>altキーが押されているか否か</td>
 </tr>
 <tr>
  <td>event.metaKey</td>
  <td>boolean</td>
  <td>metaキーが押されているか否か</td>
 </tr>
</table>

## サンプルコード

Ctrl+Vを検出するサンプル

```javascript
document.body.addEventListener('keydown',
    event => {
        if (event.key === 'v' && event.ctrlKey) {
           alert("Ctrl+Vが押されました")
        }
    });
```

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="riversun" data-slug-hash="qBdOLjw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="qBdOLjw">
  <span>See the Pen <a href="https://codepen.io/riversun/pen/qBdOLjw">
  qBdOLjw</a> by Tom Misawa (<a href="https://codepen.io/riversun">@riversun</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>