[2023-12-02 更新] ブラウザーがサーバーにリクエストのたびに送信している User-Agent 文字列は、ユーザーの PC やスマートフォンの環境を知る上では必要不可欠な情報でした。ところ...
Continue reading...webfrontend.ninja
【JavaScript】文字エンコーディングの橋渡しを行う Encoding API
[2023-12-02 更新] 近年ウェブの世界で文字エンコーディングといえば UTF-8 一択となりました。そのためウェブ開発、とりわけフロンドエンドにおいて文字コードを意識することはかなり減ったの...
Continue reading...【JavaScript】GZIP/ZLIB/DEFLATE データをダウンロードして Compression Streams API で解凍する
[2023-12-02 更新] データの圧縮や解凍といえば ZIP や 7Z などのファイルフォーマットを思い浮かべるのではないでしょうか。ファイルではありませんが、通信データの圧縮と解凍は HTTP...
Continue reading...【JavaScript】Streams API を使って fetch の逐次ダウンロード & ファイル保存
[2023-12-02 更新] JavaScript を使って巨大なファイルをダウンロードして、それをストレージに保存したいと考えたことはないでしょうか。これまで通り、fetch を使って一気に巨大フ...
Continue reading...【HTML】折り畳みウィジェットやアコーディオンを作る details 要素と summary 要素のマークアップからスタイリング
[2023-12-12 更新] Bootstrap などの CSS フレームワークではおなじみの Collapse (コラプス) ですが、いまでは HTML のマークアップだけでも実現できるのはご存じ...
Continue reading...【JavaScript】印刷のイベント – beforeprint / afterprint
誰しもウェブページを印刷することはあるのではないでしょうか。ウェブサイト制作において印刷を意識するとしたら、メディアクエリを使って印刷用のスタイルを用意することでしょうか。しかし、JavaScript...
Continue reading...【JavaScript】送信ボタンでフォームを送信したことにする requestSubmit()
JavaScript からフォームを送信する方法として form 要素の DOM オブジェクトの submit() メソッドが良く使われてきましたが、新たに requestSubmit() メソッドが...
Continue reading...【JavaScript】フォームのカレンダーやファイルピッカーを JavaScript から呼び出す showPicker()
フォームの date 型の input 要素をクリックするとカレンダーが表示されます。file 型の input 要素をクリックするとファイルピッカーが表示されます。しかし、ユーザーに別の場所をクリッ...
Continue reading...【JavaScript】初心者向けオブジェクトのコピー詳説：シャローコピー、ディープコピー、JSON、スプレッド構文、そして structuredClone()
みなさんはどのように JavaScript でオブジェクトをコピーしていますでしょうか。オブジェクトのコピーと言っても、シャローコピーとディープコピーがあります。この違いを認識せずにコピーすると、バグ...
Continue reading...【JavaScript】Web storage 詳説 – ストレージなのに 7 日で消える?
HTML5 という用語が流行りだしたころからブラウザーで利用可能な Web storage ですが、フロントエンドのエンジニアであれば何度も使ったことがあるでしょう。しかしこの Web storage...
Continue reading...