ドットインストールのJavaScript講座で紹介されているタイピングゲームをVue.jsで実装しようとした時に1つ困ったことがありました。
window.addEventListner('keydown', (e) => { console.log(e.key); }
この部分、Vue.jsではどうやって実装するんだ???ということです。
これはwindow全体でキーの入力を受け付ける状態になっているので、タイピングゲームがスタートするとそのままの状態でキーの入力や正誤判定ができるようになります。
ですが、Vue.jsの場合、基本的にHTMLの各要素にイベントを設定して、その要素に対して何かイベントが発生すると、その処理をVue.js側で行うという形になりますよね。
例えば、こんな感じです。
<body> <p id="app" v-on:click="func1">ppp</p> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var vue = new Vue({ el:"#app", methods:{ func1(){ console.log("clicked!"); } } }); </script> </body>
p要素にclickイベントが発生した時にfunc1が呼ばれる。
みたいな。
今回は、window全体でキーの入力を受付けたいので、どこにもイベントは設定できないし。。。
って思ってたら、ありました、いい方法が。
このサイトで紹介れさていました。
createdでJavascriptと同じように window.addEventLister… を定義して、keydownが発生した時に実行するメソッドをmethodsのところで自分で定義するやり方です!
実際のソースコード は以下のようになります。
<body> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> var vm = new Vue({ created:function(){ window.addEventListener('keydown', this.inputKey); }, methods:{ inputKey(event){ console.log("inputKey!"); console.log(event.key); } } }); </script> </body>
このように書くことで、windowのどこに入力してもkeydownのイベントが発生してキーの入力を受け付けることができるようになります。
ちょっと大事なところを復習しておきますね。
まずは、createdのところです。
createdはインスタンスが生成された後に実行したいコードを書いておく場所です。
こういうのをフック関数なんて呼んだりします。
公式のマニュアルはこちら
あと、ライフサイクルについてはこの記事で詳しく解説されているので、読んでみることををオススメします!
次は、addEventListerのところですね。
addEventListerメソッドは以下のように書きます。
DOM要素.addEventLister(①イベントの種類、②イベントリスナー);
イベントの種類にはclickやloadやsubmit、今回のようにkeydownや他にもたくさんあります。
動きとしては、①のイベントが発生したら②のイベントリスナーが呼び出されるという動きになります。
今回のソースコード だと、
“keydown”イベントが発生したら、”this.inputKey”が呼び出される
という動きになりますね。で、その”inputKey”をメソッドで登録しておくと。
この記事が少しでも理解の役に立てば嬉しいです!😄