デスクトップ向けのブラウザーとスマートフォン向けのブラウザーどちらにも対応する場合、クリックとタップの両方のイベントリスナーをセットすることが良くあります。もちろん、デスクトップであればクリックのイベ...
Continue reading...JavaScript
【JavaScript】Safari だけじゃないオーディオ再生の制約と再生開始遅延の解決方法
オーディオの自動再生に大きな制約があるといえば、以前は iOS Safari に限った話でした。しかし、現在は PC も含め、あらゆるブラウザーでオーディオの自動再生に大きな制約があります。もし再生で...
Continue reading...【JavaScript】配列のソートを極める – sort() から localeCompare() まで
配列のソートが必要になることは多いのですが、コードの書き方を意外に忘れてしまいます。また、実は非常に不効率なソートを行っている可能性もあります。今回は、sort() メソッドの基本的な使い方から、lo...
Continue reading...【JavaScript】配列から要素を検索する 6 つの方法
JavaScript で配列から特定の条件を満たす要素が存在するかをチェックしたり、該当の要素を抜き出すといった操作は頻繁に行われます。JavaScript には、配列から要素を発見するためのメソッド...
Continue reading...【JavaScript】express ライクな URL ルーティング URLPattern
[2022-10-26 更新] URL ルーティングといえば主にサーバーサイドの話ですが、node の express といったフレームワークではおなじみでしょう。この express のような UR...
Continue reading...【JavaScript】画面の色を抜き出す Eye Dropper API
先日 Chrome 95 がリリースされました。いつもながら、様々な機能が追加されたわけですが、その中に Eye Dropper API という気になる JavaScript API がありましたので...
Continue reading...【JavaScript】画像の本来のサイズを取得する naturalWidth と naturalHeight プロパティ
img 要素の画像がどれくらいのサイズでレンダリングされているのかを JavaScript から取得することは多いと思いますが、ときには画像ファイルの本来の幅と高さを知りたい場合もあるでしょう。ここで...
Continue reading...【JavaScript】console.log() だけじゃない、便利機能満載の Console オブジェクト
JavaScript のデバッグに大活躍の Console オブジェクトですが、普段は console.log() を最も使うのではないでしょうか。Console オブジェクトには console.l...
Continue reading...【JavaScript】sleep/wait する方法
記事タイトルの通り、JavaScript という非同期な世界で sleep する方法を考えてみます。もちろん、寝たいわけではなくて、待たせたいわけですよ。なので、wait させたい、とも言えますね。 ...
Continue reading...【JavaScript】現在日時をエレガントに出力する方法
JavaScript でウェブアプリ開発をしていて避けられないのが日時の扱いでしょう。とりわけ日時を画面に表示する処理で、まいどまいど同じようなコードを書くのが面倒でしかたないと感じるのは私だけではな...
Continue reading...