JavaScript入門講座|キーボード入力ついて学ぼう

JavaScript
うさタブ
うさタブ

今回はJavaScriptでのキーボードのキー入力を勉強するッピ!

ユウキ
ユウキ

キー入力??

うさタブ
うさタブ

キーボードのキーが押されているか? を判定するプログラムの事ッピ!

今回はこのキー入力についてじっくり勉強して行くッピよ~

この記事で学べること
  • キーが押された時に反応するプログラム設定
  • どのキーが押されているか取得する
  • 装飾キーが押されているか判定する

キー入力ついて学ぼう

必要なもの

うさタブ
うさタブ
メモ帳
  • メモ帳
  • ブラウザ

が必要ッピ!

元になるコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>






</script>
<!-- ここまで! -->

</body>
</html>
うさタブ
うさタブ

このコードを元に勉強して行くッピ!

うさタブ
うさタブ

まずは実際にどうやってキーを取得するか勉強してみるッピ!

<script>
document.addEventListener('keydown',
    event => {
  let keys = event.key;
           alert(`${keys}`+'が押されました');
    });
</script>

と入力してみるッピよ~

ユウキ
ユウキ

お! 何か出てきたぞ

うさタブ
うさタブ

試しに他のキーも押してみるッピ!

アイカ
アイカ

すっげえ! 押したキーが出てくるんだな~

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->

<script>
document.addEventListener('keydown',
    event => {
  let keys = event.key;
           alert(`${keys}`+'が押されました');
    });
</script>

<!-- ここまで! -->

</body>
</html>
うさタブ
うさタブ

ちなみに実際のサンプルはこんな感じッピ!

↓の入力フォームをクリックして、何かキーを押してみるッピよ~

うさタブ
うさタブ

次からはこのプログラムがどうなってるか詳しく解説するッピ!

ユーザーの行動に反応するaddEventListener

うさタブ
うさタブ

まずユーザーの行動に反応する

.addEventListener

について勉強していくっぴ!

うさタブ
うさタブ

このaddEventListenerは、

  • 特定の場所にマウスがクリックされたか?
  • キーボードで何かキーが押されたか?
  • 入力フォームに何か変化があったか?

などでアクションを起こすことができる命令文ッピ!

うさタブ
うさタブ

アロー関数を使って

要素.addEventListener(変化の対象, () => {

  //ここに命令文

 });

と入力することでプログラムを設定できるッピよ~

うさタブ
うさタブ

この他にも

要素.addEventListener(変化の対象, function() {

   //命令文

 }, false);

というふうに記述することもできるッピ!

ユウキ
ユウキ

この要素変化の対象って?

うさタブ
うさタブ

要素

<body>や<input><p>

などのWEBページのどの部分か?ということッピ!

何も入力せずDocumentだけということも多いッピ!

うさタブ
うさタブ

変化の対象

マウスやキーボード

の事ッピ!

うさタブ
うさタブ

まずはこの変化の対象・・・キーボードについて見ていくッピよ~

変化の対象(キーボード変化について)

うさタブ
うさタブ

まずは変化の対象にはどのようなものがあるか見に行くッピよ~

変化の対象発動条件
keydownキーが押されたとき
keyupキーが押され、離されたとき
keypressキーが押され続けているとき
clickマウスでクリックされたとき
change入力フォームに変更があったとき
scrollWEBページやボックスがスクロールされたとき
loadWEBページが読み込まれとき
ユウキ
ユウキ

ずいぶん色んなのがあるんだな~

うさタブ
うさタブ

今回はこの中でもキー入力について・・・

  • keydown …… キーが押されたとき
  • keypress …… キーが押し続けられたとき
  • keyup …… キーが離れたとき

をつかうプログラムについての勉強ッピよ~

入力されたキーを判定させる

うさタブ
うさタブ

次は入力したキーを判定する命令文を紹介するッピ!

ユウキ
ユウキ

キー判定

ってなんだ??

うさタブ
うさタブ

キー判定というのは、

ユウキくんやWEBサイトを訪れたユーザーが、

キーボードを押したときどんなふうにキーを読み込むか?という判定機のことッピ!

キーの取得方法取得部分
event.code入力したキーそのもの
event.key入力したあと実際に反映されるキー
(Shiftキーなどで大文字になったキーも含む)
event.keyCodeキーコードを取得する
ユウキ
ユウキ

どんなふうに・・・? キーを??

よみ・・・こむ・・・?

うさタブ
うさタブ

実際に見てみないとわかりにくいッピね・・・

<script>
document.addEventListener('keydown',
    event => {
  	 let keys0 = event.key;
  	 let keys1 = event.code;
  	 let keys2 = event.keyCode;
     alert(`${keys0}` +"/"+ `${keys1}` +"/"+ `${keys2}` +"/"+ 'が押されました');
    });
</script>

と入力してみるッピよ~

ユウキ
ユウキ

なんかイッパイ出てきた!

ユウキ
ユウキ

でもこれ、結局

何がなんだかわからないな・・・

ユウキ
ユウキ

このkeyA/65ってどういう意味?

aを押したからAが出てくるのはわかるけど・・・

この【65】が意味不明だし

うさタブ
うさタブ

それはキーコードッピ!

もともとはこのキーコードの数字を元にして、どのキーを押したか判別してたッピ!

実際のキーキーコード
A65
B66
F1112
F2113
Enter13
Shift16
Ctrl17
096
197
キーコードの割当
うさタブ
うさタブ

今はあんまり使われないから覚えなくても大丈夫ッピよ~

ユウキ
ユウキ

そうなのか

うさタブ
うさタブ

先ほどのコードをわかりやすく説明すると

document動作してください.addEventListener以下の条件に当てはまるとき(‘keydownキーが押されたとき‘,
 
eventこのように => {
   let
keys0変数keys0によって = event.key反映キーを取得します; // 入力したあと実際に反映されるキー
   let
keys1変数keys1によって = event.code物理キーを取得します; //入力したキーそのもの
   let
keys2変数keys2によって = event.keyCodeキーコード番号を取得; // キーコードの数字取得する
   
alert警告ウィンドウを表示(${keys0}反映キーを表示 +”/”+ ${keys1}物理キーを表示 +”/”+ ${keys2}キーコードを表示 +”/”+ ‘が押されました’);
  });

という意味になるッピ!

うさタブ
うさタブ
  • event.key //反映キー
  • event.code //物理キー

この2つさえ覚えておけば大丈夫ッピよ~

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->


<script>
document.addEventListener('keydown',
    event => {
  	let keys0 = event.key;
  	let keys1 = event.code;
  	let keys2 = event.keyCode;
           alert(`${keys0}` +"/"+ `${keys1}` +"/"+ `${keys2}` +"/"+ 'が押されました');
    });
</script>

<!-- ここまで! -->

</body>
</html>

装飾キーの判別と分岐

ユウキ
ユウキ

なあうさタブ

これなんだけどさ・・・

<script>
document.addEventListener('keydown',
    event => {
  let keys = event.key;
          if (event.key == 'a' && event.key == 'Alt') {
           alert("Altキーとaが押されました")
        }
    });
</script>
ユウキ
ユウキ

試しにaキーとAltキーを押したときだけ

反応するようにしたかったんだけどさ

ユウキ
ユウキ

まったく上手くいかないんだよな~

どうすれば良いんだろう??

うさタブ
うさタブ

それは【装飾キー】を設定してないからッピね~

if文で選択するときは独自の装飾キー判別してあげる必要があるッピ!

ユウキ
ユウキ

装飾キー??

うさタブ
うさタブ

具体的なコードをつかうとこんな感じッピ!

<script>
document.addEventListener('keydown',
    event => {
  let keys = event.key;
          if (event.key == 'a' && event.altKey) {
           alert("Altキーとaが押されました")
        }
    });
</script>
キーの取得方法取得部位
event.ctrlKeyCtrlを押されているか確認する
event.shiftKeyShiftを押されているか確認する
event.altKeyAltを押されているか確認する
event.metaKeyWindowsなどのキーを押されているか確認する
ユウキ
ユウキ

おおお! すげえ!

ちゃんと aキーとAltキーを押したときだけ 反応してる!

うさタブ
うさタブ

ムフフ、これがプログラミングのチカラッピ!

ユウキ
ユウキ

今日もありがとな、うさタブ!

ここまでのコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->

<script>
document.addEventListener('keydown',
    event => {
  let keys = event.key;
          if (event.key == 'a' && event.altKey) {
           alert("Altキーとaが押されました")
        }
    });
</script>

<!-- ここまで! -->

</body>
</html>
学習のまとめ
  • キーが押された時反応するkeydown
  • キーが押され続けているとき反応するkeypress(shiftやalt等は反応しません)
  • キーが離れたとき反応するkeyup
  • どのキーが押されているか取得するevent.key
  • 物理キーを取得するevent.code
  • キーコードを取得するevent.keyCode
  • Ctrlを押されているか確認するevent.ctrlKey
  • Shiftを押されているか確認するevent.shiftKey
  • Altを押されているか確認するevent.altKey
  • Windowsなどのキーを押されているか確認するevent.metaKey
  • キー入力を無効化するreturn false

うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJS基礎プログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました