[2023-12-02 更新] JavaScript を使って巨大なファイルをダウンロードして、それをストレージに保存したいと考えたことはないでしょうか。これまで通り、fetch を使って一気に巨大フ...
Continue reading...ninja
【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...【JavaScript】ブラウザーでリソースをロックする Web Locks API
バックエンドではファイルなどのリソースのロック処理は当たり前のように行われていますが、これまでフロントエンドの世界ではほとんど気にすることもなかったのではないでしょうか。しかし、ウェブアプリケーション...
Continue reading...【JavaScript】すべてのウィンドウにメッセージを同報する BroadcastChannel
前回の記事で「クロスオリジンのウィンドウ間でメッセージを送受信する Cross-document messaging」を紹介しましたが、これは親ウィンドウと子ウィンドウの 1 対 1 の通信チャネルで...
Continue reading...【JavaScript】クロスオリジンのウィンドウ間でメッセージを送受信する Cross-document messaging
ウェブサイトやウェブアプリを開発していると、新たにブラウザーウィンドウやタブを開いて、元のタブと連携したいと考えたことはないでしょうか。または、HTML の iframe 要素を使って組み込んだコンテ...
Continue reading...