JavaScriptには、scrollTo()メソッドやscrollBy()メソッドなど、目的のところまでスクロールする関数があります。これらの関数と一緒に使われることが多いのがbehaviorプロパティに"smooth"を設定して、目的地まで滑らかにアニメーションさせる方法です。たとえば目次をクリックしたら該当の章までスムーズにスクロールさせるなど、使ったことがある方も多いと思います。 スムーズスクロールの課題として一番大きなものは、スクロールの完了後に行う処理が書きづらいことです。Chrome・Edge 150から使えるプログラマティック・スクロール・プロミスでは、今までscrollendイベントの監視やsetTimeout()メソッドなどで検知していたスクロール完了を、Promiseを使って制御できるようになります。 スクロール完了をPromiseであつかう Promiseは非同期の

ハンバーガーメニューは、スマートフォン向けウェブサイトでよく使われるナビゲーションUIです。ヘッダーの［≡］ボタンを押すと、リンクの一覧が、現在のページの上に重なって表示されます。 横三本線のボタンが、パン（バンズ）とお肉（パティ）を挟む🍔のように見えることから、慣習的に「ハンバーガーメニュー」と呼ばれています。 新旧さまざまな作り方がありますが、今はHTMLの<dialog>タグで作るのがオススメです！　2020年代以降に登場した新しめのCSSと組み合わせることで、スマートに作れます。 古い作り方を避けたい理由 ハンバーガーメニューは2000年代後半のスマートフォンが出始めた頃よりウェブサイトで流行ってきました。旧式の作り方にどんな課題があったのかを振り返りましょう。もしかしたら「知らずに使っていた😨」といったケースもあるかもしれません。 はりぼてのdivタグ ハンバーガーメニューの

fetchのキャンセルだけじゃない！　AbortSignalで実現するクリーンなJS非同期処理 イベント監視やリクエストのクリーンアップはウェブ開発で軽視されがちな処理のひとつです。一般にフロントエンドではページを閉じれば全てブラウザーが後片付けをしてくれるので、こうした処理はもれやすく、気づいていても対処されないこともままあります。しかし、長時間操作しても不整合を起こさずに軽快な操作性を維持したり、サーバーの負荷を軽減したりするためには、クリーンアップを正しく行う知識が不可欠です。 JavaScriptにはAbortSignalとAbortControllerという仕組みがあり、処理の中断や監視の解除といったクリーンアップの処理を統一的に行えます。AbortSignalは元々Fetch APIの処理を中断する方法の議論から生まれたものですが、ウェブ開発のさまざまな場面で使える汎用的な仕組

ICSはフロントエンド専門のウェブ制作会社で、オウンドメディアとして技術情報発信サイト「ICS MEDIA」を運用しています。このサイトは開設から12年目をむかえました。年末恒例となりますが、今年の記事のアクセス数を公開します。 今年はCSSの進化が目立ちました。今年はどの記事がもっとも読まれたのでしょうか？　今年執筆した記事で上位10記事をピックアップします。 1位 : text-boxの使い方 CSSでテキストの上下余白が調整可能に！text-box-trimの使い方 19,761 PV text-box-trim / text-box-edgeを取り上げ、テキスト要素の上下スペース（いわゆるハーフ・レディング）の扱いを整理しながら、実装にどう役立つかを具体例つきで解説しています。多くの方々が普段のウェブ制作で困っていたことであり、解決方法が得られたことで大きな反響がありました。 読者

WebGPUは、ウェブ上で動作する新世代のグラフィックスAPIです。従来のWebGLに代わるものとして設計されており、より低レベルで効率的にGPUへアクセスできるようになっています。たとえば記事『WebGPUがついに利用可能に』で紹介したように、WebGLより高いパフォーマンスが期待できます。 Three.jsはウェブで3D表現を作るためのJavaScriptライブラリです。2010年代のWebGL黎明期からThree.jsが多くのウェブサイトで使われており、3Dの代表的なライブラリとも言えます。 Three.jsでは、WebGPU対応が進んでいます。WebGPU対応のレンダラー「WebGPURenderer」が存在し、従来のWebGLRendererとほぼ同じ使い勝手で利用できます。Three.js利用者は低レベルコードを書くことなく、WebGPUの利点を活かせるようになっています。We

ウェブ開発に関するHTML、CSS、JavaScriptの新機能は次々と登場します。このような新機能を紹介したブログ記事やSNSを見たことがあるかもしれません。新機能は、開発コストやユーザーエクスペリエンスを向上させるために重要ですが、ブラウザ側の対応状況により、すぐには導入できない場合もあります。本記事では、ウェブの新機能を実践投入するまでのプロセスとそのタイムラインについて考察します。 結論：新機能を取り入れる際の対応ブラウザの指針 まずは結論として、新機能を導入する際は次の3つの指針で判断していくと良いと考えます。 最新機能を取り入れつつメジャーなゾーンをカバーする：Chrome・Edgeの最新3バージョン、Safariの最新2世代のメジャーバージョン 最新機能を取り入れつつも、より幅広い対応を考える：上記に加えFirefoxの最新3バージョンとSafariの最新3世代のメジャーバー

パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 ウェブサイトの高速化はあらゆるウェブ制作者の悲願です。1ミリ秒でも早くコンテンツを届けるために、エンジニアたちは血と汗と涙を流します。しかし、ウェブサイトの高速化は、ウェブサイトの構成要素を最適化するだけでは実現できません。 大きな課題として次の2つが挙げられます。 コンテンツの転送量が大きく、表示までに時間がかかる 物理的なクライアント/サーバー間の距離が遠く、転送に時間がかかる これらの課題を解決するため、様々な技術が発展してきました。今回はその中でもSSR（サーバーサイドレンダリング）と、CDN（コンテンツデリバリーネットワーク）に注目します。 本記事ではSSRとCDNの概念について解説し、実際にCloudflareというCDNからコンテンツを配信する方法を紹介します。フレ