print-color-adjustで印刷時の色調整を制御する
print-color-adjustプロパティを使用して、ブラウザが印刷時に行う色やコントラストの調整を制御する方法を学びます。
【TSKaigi】初めて登壇しました！
<dialog>要素を閉じるように要求するrequestClose
HTMLDialogElementのrequestCloseメソッドは<dialog>要素を閉じるように要求します。「要求」とは、closeメソッドのように即座に閉じるのではなく、猶予を与えてから閉じさせます。閉じる処理を条件付きで制御することで、対話中の状態の保持が可能になり、より良いUXの提供が可能になります。
React19で変化したuseReducerの型から学ぶTypeScriptの型推論
@types/reactのバージョン19ではuseReducerの型の変更が行われました。これまではreducer関数から状態の型を推論していましたが、バージョン19からはreducer関数と初期値から状態の型を推論する形に変更されました。この記事では、この変更を元にTypeScriptにおける型の推論方法について提案します。
withキーワードを使用したJSONモジュールのインポート
文字列に潜む特殊文字を構文として解釈されないように置き換えるRegExp.escape
RegExpオブジェクトを生成するときに正規表現のテキストをそのままの文字として扱いたい時があります。これまでは手動でエスケープする必要がありましたが、RegExp.escape()を使うことで構文として解釈されないような文字列に変換し、文字通りの並びとして検索できます。RegExp.escapeを使ってエスケープ漏れとは縁のない生活を送りましょう。
Iteratorに対してmapやfilterのようなヘルパー関数を作用させる
Baseline 2025でIterator Helpersが導入され、Iteratorオブジェクトにmapやfilterなどの便利な操作が直接適用可能になりました。これにより、配列への変換が不要になり、コードの可読性向上と遅延評価によるパフォーマンス改善が期待できます。
CSS グラデーションの新仕様：単色カラーストップの導入
16bit浮動小数点が使える！Float16Array
Float16ArrayがBaselineに追加されたことで、16bitの浮動小数点を扱えるようになりました。機械学習やグラフィックス用途などで威力を発揮する新しいTypedArrayについて解説します。
Atomicsで共有メモリ上のデータを安全に取り扱う
AtomicsはSharedArrayBufferなどで定義された共有メモリ上のデータを安全に操作するための仕組みで、不可分操作や待機・通知による制御を提供します。新たに追加されたAtomics.pauseにより、スピンロック中のリソース最適化も可能になりました。
任意のデータをコピー&ペーストするClipboard API
Clipboard APIは、navigator.clipboardを通じてクリップボードへの読み書きを非同期で行えるAPIです。テキストや画像のコピー・貼り付けに対応し、ClipboardItemを使えばMIMEタイプ別のデータ操作も可能です。
画面のスリープを防ぐScreen Wake Lock API
2025年のBaselineにScreen Wake Lock APIが追加されました。Screen Wake Lock APIは、デバイスの画面がスリープ状態に入るのを防ぐためのAPIです。この機能により処理が行われていない状態でも継続的に画面を表示する体験を実現できるようになりました。
Popover APIを使ってJavaScriptなしで要素の側に異なる要素を表示する
Popover APIは、ツールチップやドロップダウンメニューをJavaScriptなしで実装できるAPIで、2025年のBaselineに追加されました。表示するコンテンツにpopover属性を渡し、その要素をpopovertargetで制御します。シンプルなHTMLとCSSで手軽に機能に富んだポップオーバーを作成する方法を学びます。
Intl.DurationFormatで期間をlocaleに基づいて表現する
Intl.DurationFormatはlocaleに応じた形式で期間を表現するIntlの新機能で、Baseline 2025で利用可能です。formatメソッドで文字列として期間を取得でき、formatToPartsメソッドでは各部分をオブジェクトの配列として取得できます。言語による期間の表現の違いを標準に従って簡単扱いましょう。
contenteditableな要素でテキストだけを編集可能にする
Baseline 2025でcontenteditableにplaintext-onlyを渡せるようになりました。plaintext-onlyを指定すると、要素内での編集が可能になりつつリッチテキスト（太字やリンクなど）のスタイルが適用されないようになります。従来から存在するtrueを指定した時の挙動を振り返って違いを確認します。
関数の同期・非同期を気にせず処理するPromise.tryとは
Promise.tryは、同期・非同期関数を区別せず手続きを進めさせるBaseline 2025で追加されたメソッドです。同期・非同期が混在する処理に有効で、キャッシュを利用する関数などで一貫したPromiseの形で結果を扱えます。同期・非同期が混在する関数の複雑さとは別れを告げましょう。
色彩検定UC級に合格しました！
色覚タイプとその分類
色の見え方が多数に比べ大きく異なる「色覚特性」を先天的に持つ人は日本人男性全体の約5%存在します。この記事では色覚特性とその分類について紹介し、当サイトが提供するシミュレーションの利用法について説明します。
色のコントラスト比は重要だけどどうやって求めるんだっけ？
WCAG 2.1では背景色とテキスト色のコントラスト比についての達成基準が定められています。コントラスト比とは何でしょうか？コントラスト比の計算はツールを用いることが多いので、その計算方法を理解せずに検査している方は少なくないです。この記事ではコントラスト比の計算方法を理解して、そこから読み取れる重要な情報を紐解きます。
Reactの新しいルーティングライブラリ、TanStackRouterを学ぶ
Reactのルーティングには主にNextjs等のフレームワークやReact Routeが利用されます。この記事では新たなルーティング手法の選択肢としてTanStack Routerを紹介します。TanStack Routerでは最初に挙げた選択肢の使い心地を踏襲しつつ、ルーティングやサーチパラメータの型安全性や他にない便利な機能を提供します。