JavaScript - キーボードイベント

こんにちは、未来のJavaScript魔法使いたち！今日は、キーボードイベントの興味深い世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、私はこの冒険をステップバイステップで案内します。まずは、お気に入りの飲み物を手に取り、リラックスして、一緒にこのキーボードの旅を楽しんでみましょう！

一般的なキーボードイベント

コードを書く前に、JavaScriptで最も一般的なキーボードイベントに慣れ親しんでみましょう。これらのイベントは、コンピュータがキーボードをどのように聞くかを考えるものです：

イベント名	説明
keydown	キーが押されたときに発火
keypress	キーが押されたときに発火（文字キーのみ）
keyup	キーが放されたときに発火

これらのイベントは、コンピュータの耳のように、あなたのキー押しを常に聞いています。クールですね？

キーボードイベントのプロパティ

次に、これらのイベントが持つプロパティについて話しましょう。キーボードイベントが発生すると、いくつかの便利な情報が一緒にやってきます：

プロパティ	説明
key	押されたキーの値
keyCode	押されたキーのUnicode値（非推奨）
which	押されたキーのUnicode値（非推奨）
code	キーボード上の物理的なキー

これらのプロパティは、押されたキーに関する重要な詳細を運ぶ小さなメッセンジャーです。

例：keydownイベント

まずは最初の例です。押されたキーをリスンし、表示するシンプルなプログラムを作成します。

<h1>どのキーを押してください</h1>
<p id="output"></p>

<script>
document.addEventListener('keydown', function(event) {
document.getElementById('output').innerHTML = 'You pressed: ' + event.key;
});
</script>

この例では、コンピュータに「どのキーが押されたかを聞いて、それが押されたときにどのキーだったかを表示して」と言っています。addEventListenerメソッドは、キー押しを監視するスパイを設定することに似ています。

例：keypressイベント

次に、「keypress」イベントを試みましょう。このイベントは文字キーのみに対応しています！

<h1>何かをタイプしてください</h1>
<p id="output"></p>

<script>
document.addEventListener('keypress', function(event) {
var current = document.getElementById('output').innerHTML;
document.getElementById('output').innerHTML = current + event.key;
});
</script>

このスクリプトは、タイプライターのようです。文字キーを押すたびに、既存のテキストにその文字を追加します。

例：keyupイベント

次に、「keyup」イベントに進みましょう。今回は、正しいキーを押すことで勝つ簡単なゲームを作成します。

<h1>'s'キーを押して勝て！</h1>
<p id="output"></p>

<script>
document.addEventListener('keyup', function(event) {
if (event.key === 's') {
document.getElementById('output').innerHTML = 'You win! ?';
} else {
document.getElementById('output').innerHTML = 'Try again!';
}
});
</script>

このゲームでは、プレイヤーが「s」キーを放すのを待っています。シンプルな「Simon Says」ゲームのキーボード版です！

例：addEventListenerメソッドを使わない方法

次に、古い方法でイベントを処理する方法を見てみましょう。addEventListenerは現代的なアプローチですが、古いコードではこの方法に出会うかもしれません：

<h1>どのキーを押してください</h1>
<p id="output"></p>

<script>
document.onkeydown = function(event) {
document.getElementById('output').innerHTML = 'Key pressed: ' + event.key;
};
</script>

この方法は、onkeydownプロパティに直接関数を割り当てます。ドアに「誰かがノックしたら、これをやる」と書かれたサインを立てるのに似ています。

すべてを合わせる

これらのイベントを個別に見てきたので、すべてを合わせたより複雑な例を作成しましょう：

<h1>Keyboard Event Tester</h1>
<p>どのキーを押すとイベントが発火します！</p>
<table id="eventTable">
<tr>
<th>イベントタイプ</th>
<th>キー</th>
<th>コード</th>
</tr>
</table>

<script>
function addEventToTable(eventType, event) {
var table = document.getElementById('eventTable');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = eventType;
cell2.innerHTML = event.key;
cell3.innerHTML = event.code;
}

document.addEventListener('keydown', function(event) {
addEventToTable('keydown', event);
});

document.addEventListener('keypress', function(event) {
addEventToTable('keypress', event);
});

document.addEventListener('keyup', function(event) {
addEventToTable('keyup', event);
});
</script>

この例では、テーブルが作成され、キーを押すたびにイベントが記録されます。キーボードイベントのデイリーです！

そして、みんな！JavaScriptのキーボードイベントの世界を旅しました。練習は完璧を生みますので、これらの例を変更し、壊し、修正して、本当に学びましょう。

最後に、ちょっとした楽しい事実：コンピュータのキーボードのレイアウト、QWERTY配列はもともとタイプライターの速度を遅くするために設計されました。金属のアームが詰まらないように作られました。それでも、私たちはこの同じレイアウトを使って、ウェブアプリケーションで雷速のインタラクションを作成しています！

codingを続け、学びを続け、そして最も重要なのは、楽しみを続けましょう！次回まで、あなたの近所の親切なコンピュータ教師がお別れです。Happy coding!

Credits: Image by storyset