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】が意味不明だし

うさタブ
うさタブ

それはキーコードッピ!

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

うさタブ
うさタブ

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

ユウキ
ユウキ

そうなのか

うさタブ
うさタブ

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

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

うさタブ
うさタブ

上手くできたッピか?

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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