https://b.hatena.ne.jp/ics-media/JavaScript/ JavaScriptに関するics-mediaのはてなブックマーク (7) https://ics.media/entry/260702/ 従来から存在したscrollBy'()やscrollIntoView()がPromiseを返すようになったという変更。こういうウェブの機能変更は珍しい出来事です。 ics-media 2026-07-02T23:41:48Z HTML JavaScript 30 <blockquote cite="https://ics.media/entry/260702/" title="スクロール完了をawaitで待てる！ 進化したJSのスクロール関数 - ICS MEDIA"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F260702%2F" alt="" /> <a href="https://ics.media/entry/260702/">スクロール完了をawaitで待てる！ 進化したJSのスクロール関数 - ICS MEDIA</a></cite><p><a href="https://ics.media/entry/260702/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3121f7d6651c9d9fe1f9b126ec18e1ef062226d3/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fics.media%2Fentry%2F260702%2Fimages%2Feyecatch.png" alt="スクロール完了をawaitで待てる！ 進化したJSのスクロール関数 - ICS MEDIA" title="スクロール完了をawaitで待てる！ 進化したJSのスクロール関数 - ICS MEDIA" class="entry-image" /></a></p><p>JavaScriptには、scrollTo()メソッドやscrollBy()メソッドなど、目的のところまでスクロールする関数があります。これらの関数と一緒に使われることが多いのがbehaviorプロパティに&quot;smooth&quot;を設定して、目的地まで滑らかにアニメーションさせる方法です。たとえば目次をクリックしたら該当の章までスムーズにスクロール...</p><p><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/260702/"><img src="https://b.hatena.ne.jp/entry/image/https://ics.media/entry/260702/" alt="はてなブックマーク - スクロール完了をawaitで待てる！ 進化したJSのスクロール関数 - ICS MEDIA" title="はてなブックマーク - スクロール完了をawaitで待てる！ 進化したJSのスクロール関数 - ICS MEDIA" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/260702/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://ics.media/entry/260527/ ics-media 2026-05-27T13:35:04Z html css JavaScript 56 <blockquote cite="https://ics.media/entry/260527/" title="dialogタグで面倒が減る！ 見直したいハンバーガーメニューの作り方 - ICS MEDIA"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F260527%2F" alt="" /> <a href="https://ics.media/entry/260527/">dialogタグで面倒が減る！ 見直したいハンバーガーメニューの作り方 - ICS MEDIA</a></cite><p><a href="https://ics.media/entry/260527/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5c5c114672921af7986e943c9e47f41840ba554e/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fics.media%2Fentry%2F260527%2Fimages%2Feyecatch.png" alt="dialogタグで面倒が減る！ 見直したいハンバーガーメニューの作り方 - ICS MEDIA" title="dialogタグで面倒が減る！ 見直したいハンバーガーメニューの作り方 - ICS MEDIA" class="entry-image" /></a></p><p>ハンバーガーメニューは、スマートフォン向けウェブサイトでよく使われるナビゲーションUIです。ヘッダーの［≡］ボタンを押すと、リンクの一覧が、現在のページの上に重なって表示されます。 横三本線のボタンが、パン（バンズ）とお肉（パティ）を挟む🍔のように見えることから、慣習的に「ハンバーガーメニュー」と呼...</p><p><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/260527/"><img src="https://b.hatena.ne.jp/entry/image/https://ics.media/entry/260527/" alt="はてなブックマーク - dialogタグで面倒が減る！ 見直したいハンバーガーメニューの作り方 - ICS MEDIA" title="はてなブックマーク - dialogタグで面倒が減る！ 見直したいハンバーガーメニューの作り方 - ICS MEDIA" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/260527/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://ics.media/entry/260423/ fetchなど中断のためにAbortSignalを使う事は知られていると思いますが、addEventListenerなどの型付けにも役立つことや、自作機能に組み込む方法を紹介します。 ics-media 2026-04-24T09:05:14Z JavaScript ECMAScript 29 <blockquote cite="https://ics.media/entry/260423/" title="fetchのキャンセルだけじゃない！　AbortSignalで実現するクリーンなJS非同期処理 - ICS MEDIA"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F260423%2F" alt="" /> <a href="https://ics.media/entry/260423/">fetchのキャンセルだけじゃない！　AbortSignalで実現するクリーンなJS非同期処理 - ICS MEDIA</a></cite><p><a href="https://ics.media/entry/260423/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ae04c23a20766e3c03f2f4097d5ae3c2ef7f5c52/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fics.media%2Fentry%2F260423%2Fimages%2Feyecatch.png" alt="fetchのキャンセルだけじゃない！　AbortSignalで実現するクリーンなJS非同期処理 - ICS MEDIA" title="fetchのキャンセルだけじゃない！　AbortSignalで実現するクリーンなJS非同期処理 - ICS MEDIA" class="entry-image" /></a></p><p>fetchのキャンセルだけじゃない！　AbortSignalで実現するクリーンなJS非同期処理 イベント監視やリクエストのクリーンアップはウェブ開発で軽視されがちな処理のひとつです。一般にフロントエンドではページを閉じれば全てブラウザーが後片付けをしてくれるので、こうした処理はもれやすく、気づいていても対処されない...</p><p><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/260423/"><img src="https://b.hatena.ne.jp/entry/image/https://ics.media/entry/260423/" alt="はてなブックマーク - fetchのキャンセルだけじゃない！　AbortSignalで実現するクリーンなJS非同期処理 - ICS MEDIA" title="はてなブックマーク - fetchのキャンセルだけじゃない！　AbortSignalで実現するクリーンなJS非同期処理 - ICS MEDIA" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/260423/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://ics.media/entry/251229/ 今年のフロントエンドでアクセス数の多かった記事をまとめました。 ics-media 2025-12-29T04:10:55Z CSS HTML JavaScript WebGL WebGPU TypeScript ECMAScript Chrome Safari 39 <blockquote cite="https://ics.media/entry/251229/" title="これがフロントエンドで話題になった記事！ ICS MEDIAの2025年 - ICS MEDIA"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F251229%2F" alt="" /> <a href="https://ics.media/entry/251229/">これがフロントエンドで話題になった記事！ ICS MEDIAの2025年 - ICS MEDIA</a></cite><p><a href="https://ics.media/entry/251229/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3234c48c503e04b51a31a1264f6340bffcda2944/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fics.media%2Fentry%2F251229%2Fimages%2Feyecatch.jpg" alt="これがフロントエンドで話題になった記事！ ICS MEDIAの2025年 - ICS MEDIA" title="これがフロントエンドで話題になった記事！ ICS MEDIAの2025年 - ICS MEDIA" class="entry-image" /></a></p><p>ICSはフロントエンド専門のウェブ制作会社で、オウンドメディアとして技術情報発信サイト「ICS MEDIA」を運用しています。このサイトは開設から12年目をむかえました。年末恒例となりますが、今年の記事のアクセス数を公開します。 今年はCSSの進化が目立ちました。今年はどの記事がもっとも読まれたのでしょうか？　今...</p><p><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/251229/"><img src="https://b.hatena.ne.jp/entry/image/https://ics.media/entry/251229/" alt="はてなブックマーク - これがフロントエンドで話題になった記事！ ICS MEDIAの2025年 - ICS MEDIA" title="はてなブックマーク - これがフロントエンドで話題になった記事！ ICS MEDIAの2025年 - ICS MEDIA" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/251229/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://ics.media/entry/250501/ ics-media 2025-05-01T04:39:33Z JavaScript WebGPU Three.js 54 <blockquote cite="https://ics.media/entry/250501/" title="WebGPU対応のThree.jsのはじめ方 - ICS MEDIA"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F250501%2F" alt="" /> <a href="https://ics.media/entry/250501/">WebGPU対応のThree.jsのはじめ方 - ICS MEDIA</a></cite><p><a href="https://ics.media/entry/250501/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4ba09b4d7f24f5383930917949f13ddb3ee5a4ab/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fics.media%2Fentry%2F250501%2Fimages%2Feyecatch.png" alt="WebGPU対応のThree.jsのはじめ方 - ICS MEDIA" title="WebGPU対応のThree.jsのはじめ方 - ICS MEDIA" class="entry-image" /></a></p><p>WebGPUは、ウェブ上で動作する新世代のグラフィックスAPIです。従来のWebGLに代わるものとして設計されており、より低レベルで効率的にGPUへアクセスできるようになっています。たとえば記事『WebGPUがついに利用可能に』で紹介したように、WebGLより高いパフォーマンスが期待できます。 Three.jsはウェブで3D表現を作る...</p><p><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/250501/"><img src="https://b.hatena.ne.jp/entry/image/https://ics.media/entry/250501/" alt="はてなブックマーク - WebGPU対応のThree.jsのはじめ方 - ICS MEDIA" title="はてなブックマーク - WebGPU対応のThree.jsのはじめ方 - ICS MEDIA" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/250501/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://ics.media/entry/250422/ ウェブ技術の投入できるタイミングについて、国内のブラウザシェアをまとめました。Firefoxに限らず、ユーザーの望むブラウザや環境で閲覧できるというのはアクセシビリティの観点からも大事なことです。 ics-media 2025-04-23T01:00:12Z html css JavaScript W3C WHATWG 44 <blockquote cite="https://ics.media/entry/250422/" title="ウェブの新機能はいつまで待てば実践投入できるか - ICS MEDIA"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F250422%2F" alt="" /> <a href="https://ics.media/entry/250422/">ウェブの新機能はいつまで待てば実践投入できるか - ICS MEDIA</a></cite><p><a href="https://ics.media/entry/250422/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/cf92353e6faeb121f2f0bc43bf0be9d73526035f/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fics.media%2Fentry%2F250422%2Fimages%2Feyecatch.png" alt="ウェブの新機能はいつまで待てば実践投入できるか - ICS MEDIA" title="ウェブの新機能はいつまで待てば実践投入できるか - ICS MEDIA" class="entry-image" /></a></p><p>ウェブ開発に関するHTML、CSS、JavaScriptの新機能は次々と登場します。このような新機能を紹介したブログ記事やSNSを見たことがあるかもしれません。新機能は、開発コストやユーザーエクスペリエンスを向上させるために重要ですが、ブラウザ側の対応状況により、すぐには導入できない場合もあります。本記事では、ウェ...</p><p><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/250422/"><img src="https://b.hatena.ne.jp/entry/image/https://ics.media/entry/250422/" alt="はてなブックマーク - ウェブの新機能はいつまで待てば実践投入できるか - ICS MEDIA" title="はてなブックマーク - ウェブの新機能はいつまで待てば実践投入できるか - ICS MEDIA" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/250422/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://ics.media/entry/230706/ SSRとCDNの概念について解説し、実際にCloudflareというCDNからコンテンツを配信する方法を紹介します ics-media 2023-07-07T01:26:24Z JavaScript 44 <blockquote cite="https://ics.media/entry/230706/" title="パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 - ICS MEDIA"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fics.media%2Fentry%2F230706%2F" alt="" /> <a href="https://ics.media/entry/230706/">パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 - ICS MEDIA</a></cite><p><a href="https://ics.media/entry/230706/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6b9a0131531599a427f6b87612cce621dd16f99b/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fics.media%2Fentry%2F230706%2Fimages%2Feyecatch.png" alt="パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 - ICS MEDIA" title="パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 - ICS MEDIA" class="entry-image" /></a></p><p>パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 ウェブサイトの高速化はあらゆるウェブ制作者の悲願です。1ミリ秒でも早くコンテンツを届けるために、エンジニアたちは血と汗と涙を流します。しかし、ウェブサイトの高速化は、ウェブサイトの構成要素を最適化するだけでは実...</p><p><a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/230706/"><img src="https://b.hatena.ne.jp/entry/image/https://ics.media/entry/230706/" alt="はてなブックマーク - パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 - ICS MEDIA" title="はてなブックマーク - パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 - ICS MEDIA" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/ics.media/entry/230706/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>