JavaScript初心者が陥りそう？な問題。まぁ僕だけかもしれませんが…

今日はJavaScript(以下JS)によるテトリス制作で僕が詰まった箇所についての紹介にします。早く書いておかないと全部忘れてしまいそうだから。すでに記憶が朧気だし(という書き出しで三週間前に書いた記事になります)。たぶん僕のように独学で学んでいるプログラミング初心者の方にありがちなミスだと思うのですが、画像を使用する場合は読み込まれるタイミングを気にする必要があります。

普段ブログ記事などで画像を貼り付ける場合は画像に何か処理を加えたりしないので、loading属性で遅延読み込みを指定するくらいで他に何も気にする必要がありません。ブラウザが良い感じに処理してくれます。しかしJSなどで動的に処理を加えて使用したい場合などは、画像が読み込まれるタイミングを意識していないと思わぬ不具合が出ます。僕が一番最初に嵌ったのはその部分です。何故か上手く表示されないなぁ…と。まぁそこは調べればすぐに原因が判明します。要は画像が読み込まれた後に処理をすれば良いのでonloadなどを指定してあげれば解決します。読み込み完了してから処理開始、と。ただ僕の場合は複数の画像が読み込まれたタイミングで処理をしたい…という部分があったのでそこは少し苦労しました。一応↓みたいな感じで処理しました。

for(let i=0; i<imgUrl.length;i++){
 imgRoad[i] = new Image();
 imgRoad[i].src = imgUrl[i];
 imgRoad[i].addEventListener("load",()=>{
     imgLoadCount++;
     if(imgLoadCount == imgUrl.length) gameStart();//画像が全て読み込まれていたら実行
     },{once:true});
}

適当にカウント用の変数を用意しておく。そして画像が読み込み完了したらそこにカウントするようにイベント設定しておきます。あとは全て読み込み完了していた場合に処理を実行するように書き込んでおくだけ。他に何か良いやり方があるのかもしれませんし、そもそもこのやり方が正しい保証もないです。ただ僕の場合はこれで動いてくれたのでまぁ良いか…と。

他に何かあったかなぁ…。あぁそういえばあれがあった。たぶんブログサービスとかを利用しているひとなら問題ないですが、一から自分でhtmlコードを書いていたりする初心者のひとがハマりそうな問題。僕がレスポンシブ対応をするためにメディアクエリの使用を試みたときに起こったのですが、何故かコードが反映されませんでした。最初は書き間違いかと思い色々試行錯誤していたのですが、途中で全く反映されていないことに気づいて頭の中は疑問符でいっぱいに。普段ブログで使用しているときは問題ないのになぁ…と。結論としては↓のコードが抜けていました。

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0">

ブログのテンプレートには最初から記載されていたので全く気にしていませんでした。ちゃんとviewportの設定をしてあげないとメディアクエリは動いてくれません。レスポンシブ対応には必須のコードなので、一からコードを書く方は記載忘れにご注意を。設定は↑のコードみたいな感じが一般的だと思います。まぁそこはお好みで。ちなみにこのコードの有る無しでメディアクエリ以外にも影響がある箇所があります。それはタッチデバイスにおけるクリックイベントの反応速度。

いやぁ…デベロッパーツールで動作確認しているときに何かクリック時の処理が遅いなぁ？とは思っていたのです。実際に300msほどの遅延が発生するようです。タッチイベントに書き換えれば良いかな？と考えていたのですが、どうやらvieport設定さえしておけばクリック時の遅延も解消される模様。タッチイベントだとスクロール操作とかとの兼ね合いで設定を気を付けておかないとエラーが出たりして面倒なので、基本的にはクリックイベントで対応できるところはそうした方が良いのかも？と思いました。記載するコード量も減りますし。

結論

vieport設定を忘れるな