配列の値すべてが条件を満たしているか、配列の値のいずれか 1 つでも条件を満たしているか、といった処理はときどき遭遇します。しかし、頻繁に遭遇しないせいか、すぐに忘れてしまうのが Array.ever...
Continue reading...ninja
【JavaScript】オブジェクトのプロパティの存在をチェックする 4 つの方法と特性の違い
オブジェクトの中に特定のプロパティが存在するかをチェックする方法はいくつかあります。しかし、どの方法を使うか迷うことはないでしょうか。今回はそれらの方法を一通り整理し、それぞれの特性についてまとめて...
Continue reading...【JavaScript】とても便利なてんてんてん「…」スプレッド構文
最近は JavaScript コードのサンプルで「…」が配列の中で使われているのをよく見ます。中には関数の引数の指定で見ることもあります。私が初めて見たときには何かの省略記号かな?なんて思...
Continue reading...【CSS】独自プロパティを作る CSS Properties and Values API (Houdini)
CSS といえばブラウザーが用意したプロパティを使って書くものですが、W3C で策定している「CSS Properties and Values API」を使うことで、独自の CSS プロパティを作る...
Continue reading...【CSS】CSS 変数 (CSS カスタムプロパティ) でサイト制作と運用が楽になる
CSS を書いていると、同じ値を何度も書いていることに気づきます。とりわけ色の値では顕著ではないでしょうか。プログラマーであれば同じ値を何度も使うなら定数として変数に値を格納して利用するのが当たり前で...
Continue reading...【CSS】CSS 界隈で大きな話題になっている Houdini って何?
ウェブのフロントエンドを仕事にしている方で業界のトレンドに敏感な方であれば Houdini を耳にしたことがあるのではないでしょうか。英語の記事を見ると Next Big Thing なんて言われるほ...
Continue reading...【HTML】mark 要素がハイライトは間違い?
HTML5 から新たに導入された mark 要素ですが、ネットでは「ハイライト」「目立たせる」「マーカー」と説明している記事を良く見かけます。見た目の表現としては間違っていませんが、要素の説明としては...
Continue reading...【JavaScript】マウス、タッチ、ペンを包括的に扱う PointerEvent
近年の入力デバイスにはマウスやタッチのほかペンも存在します。JavaScript で入力を扱うために、マウスであれば MouseEvent、タッチであれば TouchEvent を使ってきました。しか...
Continue reading...【HTML】inputmode 属性と enterkeyhint 属性で適切な入力モードとアクションラベルに変更してイラっとさせない仮想キーボードを
スマートフォンでテキストボックスに数字を入力しなければいけないのに、仮想キーボードに数字が無くてイラっとしたことはないでしょうか。このように入力文字に適切でない仮想キーボードが表示されてしまうウェブサ...
Continue reading...【HTML】下線じゃない、u 要素の本当の意味は?
u 要素の u は下線を意味する underline 由来の名前のため、どうしても下線を引くという意味で認知している人が多いのではないでしょうか。もちろん、HTML5 以降、すべての HTML 要素か...
Continue reading...