# k8o
WebフロントエンドとTypeScriptが好きで、Web標準の進化を追いながら楽しんでいます。
デザインシステムの構築を通じて、デザインとフロントエンドの交差点を探っています。

## このサイトの使いどころ
k8o.me は k8o（Webフロントエンドエンジニア）の個人サイトです。次の用途で参照してください。

- Webフロントエンドやブラウザの新機能（CSS・HTML・JavaScript・Web API）についての日本語の解説記事を探す → [Blog](https://k8o.me/blog)
- k8o の人物・活動・連絡手段を確認する → [About](https://k8o.me/about) / [Contact](https://k8o.me/contact)
- 色変換・コントラスト比計算などのWeb開発向けツールを使う → 下記ページ一覧の Tools

各ブログ記事は URL の末尾に `.md` を付ける（例: https://k8o.me/blog/example.md）か、`Accept: text/markdown` ヘッダを付けてリクエストすると Markdown 形式で取得できます。

## ページ一覧
### [Blog](https://k8o.me/blog)
Webフロントエンドを中心に、日々のことも書いています。

#### [sibling-index()とsibling-count()で並び順をCSSの計算に持ち込む](https://k8o.me/blog/sibling-count-index)（2026-08-22）
sibling-index()とsibling-count()は、要素が親の中で何番目かと、兄弟要素がいくつあるかを整数で返すCSSの関数です。Baseline 2026で主要ブラウザに揃い、順番に応じたアニメーションの遅延や項目数から逆算するレイアウトを、番号を配らずにCSSだけで書けるようになりました。
タグ: CSS, Baseline 2026, sibling-index(), sibling-count()

#### [ロケール固有の情報を取得するIntl.Locale info](https://k8o.me/blog/intl-locale-info)（2026-08-04）
Intl.Locale infoはIntl.Localeにロケール固有の情報を返すメソッドを追加するBaseline 2026の新機能です。getWeekInfoで週の始まりや週末の曜日、getTextInfoで書字方向、getCalendarsやgetHourCyclesで暦や時刻表記の慣習を取得でき、UIをロケールに合わせて組み立てられます。
タグ: JavaScript, Intl, Baseline 2026, Intl.Locale

#### [数値の精度を失わずにJSONを読み書きするJSON source text access](https://k8o.me/blog/json-raw)（2026-07-30）
JavaScriptの数値は倍精度の浮動小数点数なので、JSON.parseで巨大な数値を読むと精度が失われます。Baseline 2025のJSON source text accessを使うと、reviverのcontext.sourceで元のJSONテキストを読み取り、JSON.rawJSONで指定したテキストをそのまま書き出せるので、BigIntと組み合わせて欠損のないJSONの読み書きができます。
タグ: JavaScript, Baseline 2025, JSON, JSON source text access

#### [pnpm本体に入ったリリース管理をCIにつなぐpnpm-release-actionを作った](https://k8o.me/blog/pnpm-release-action)（2026-07-23）
pnpm 11.13で本体に入ったリリース管理は、コミットやリリースPR、タグ、GitHub Releaseをどう作るかをユーザーに委ねています。この部分を担うGitHub Actionとしてpnpm-release-actionを公開しました。リリースPRとpublishの2つのモードによるループと、その設計方針を紹介します。
タグ: npm, GitHub Actions, Changesets, pnpm

#### [field-sizingでフォームコントロールを内容に合わせて伸縮させる](https://k8o.me/blog/field-sizing)（2026-06-27）
field-sizingはinputやtextarea、selectといったフォームコントロールのサイズを入力内容にフィットさせるCSSプロパティです。Baseline 2026で主要ブラウザに揃い、JavaScriptで高さを自動調整する処理をCSSだけで置き換えられるようになりました。
タグ: CSS, Baseline 2026, field-sizing

#### [Container style queriesでカスタムプロパティの値からスタイルを切り替える](https://k8o.me/blog/container-style-queries)（2026-05-26）
Container style queriesは@container style()で祖先要素のカスタムプロパティの値を条件にスタイルを切り替えるCSSの仕組みです。Baseline 2026で揃ったので、テーマやコンテキストごとのスタイル分岐を子要素側で完結できるようになりました。
タグ: CSS, Baseline 2026, Container Queries, Container Style Queries

#### [:open疑似クラスで開いている要素をまとめてスタイリングする](https://k8o.me/blog/open-pseudo)（2026-05-23）
:openはdialog、details、select、ピッカー付きのinputといった開閉できる要素が開いている間にマッチするCSS疑似クラスです。Baseline 2026で揃ったので、dialog[open]やdetails[open]といった要素別の属性セレクタを横断して一本化できます。
タグ: CSS, Baseline 2026, :open

#### [ToggleEvent.sourceでポップオーバーを開いた要素を特定する](https://k8o.me/blog/toggleevent-source)（2026-05-23）
ToggleEvent.sourceはBaseline 2026で追加された、toggle / beforetoggleイベントに発火元の要素を載せて渡すプロパティです。同じポップオーバーを複数のボタンから開くケースで、どのボタンから開かれたかをリスナー側で素直に判定できます。
タグ: HTML, Popover API, Baseline 2026, toggleevent-source

#### [baseline-shiftでSVGテキストのベースラインをずらす](https://k8o.me/blog/baseline-shift)（2026-05-23）
baseline-shiftはCSS Inline 3で定義されたCSSプロパティで、SVGテキスト要素のベースラインを親要素から相対的にずらすために使います。SVGの同名属性の後継として位置付けられ、Baseline 2026で主要ブラウザに揃いました。
タグ: CSS, Baseline 2026, baseline-shift

#### [WebAssemblyのBranch Hintingで分岐予測を助ける](https://k8o.me/blog/wasm-branch-hinting)（2026-05-23）
Branch HintingはWebAssemblyのbr_ifやifの分岐に対してどちらに進みやすいかをメタデータとしてカスタムセクションに埋め込み、エンジンの最適化を助ける仕組みです。Baseline 2026で揃ったので、ホットパスのチューニングに使える選択肢になりました。
タグ: Baseline 2026, WebAssembly, wasm-branch-hinting

#### [image-rendering: crisp-edgesでドット絵を拡大しても滲ませない](https://k8o.me/blog/crisp-edges)（2026-05-16）
image-rendering: crisp-edgesは、画像を拡大表示するときに最近傍法など色を補間しないアルゴリズムを使うCSS値です。Baseline 2026でChromiumも対応し、ドット絵やQRコード、図版を拡大しても境界がぼやけずに表示できます。
タグ: CSS, Baseline 2026, image-rendering

#### [text-decoration-skip-ink: allでunderlineをすべてのグリフの周りで途切れさせる](https://k8o.me/blog/text-decoration-skip-ink-all)（2026-05-16）
text-decoration-skip-ink: allは、underlineやoverlineがグリフを横切る箇所を必ず途切れさせるCSSの値です。CJKに対しては線を途切れさせない実装が多いautoとの挙動の差を、Baseline 2026で揃った3つ目の値allと合わせて見ていきます。
タグ: CSS, Baseline 2026, text-decoration-skip-ink

#### [SharedWorkerでブラウジングコンテキスト間にWorkerを共有する](https://k8o.me/blog/shared-worker)（2026-05-15）
SharedWorkerは、同一オリジンの複数のタブやiframeから接続できるWorkerです。タブ間で永続接続や状態を共有でき、type: moduleでES Modulesも使えるようになりました。Baseline 2026で全モダンブラウザでサポートされたSharedWorkerの基本と使い分けを解説します。
タグ: JavaScript, Baseline 2026, shared-worker

#### [CSP violation reportsでContent Security Policyの違反を検知する](https://k8o.me/blog/csp-violation-reports)（2026-05-15）
Content Security Policyに違反するリソースの読み込みやスクリプトの実行は、CSP violation reportsとして収集できます。report-toディレクティブによるサーバー送信とsecuritypolicyviolationイベントによるクライアントサイド検知、2つの方法でCSPの違反を可視化する方法を解説します。
タグ: Baseline 2026, CSP, Reporting API, csp-violation-reports

#### [contrast-color()で背景色に応じた読みやすい文字色を自動で割り当てる](https://k8o.me/blog/contrast-color)（2026-05-03）
contrast-color()は背景色に対してコントラストの高い色（黒または白）を返すCSS関数です。Baseline 2026に到達し、テーマカラーやユーザー入力で背景色が動的に変わる場面でも、文字色をCSS側で導出して読みやすさを担保できます。
タグ: color contrast, color, CSS, Baseline 2026, contrast-color

#### [Math.sumPrecise()で浮動小数点数の合計を正確に計算する](https://k8o.me/blog/math-sum-precise)（2026-04-25）
Baseline 2026で追加されたMath.sumPrecise()は、数値のiterableを受け取り、中間結果の丸め誤差を抑えて合計を計算する静的メソッドです。reduceやforループで合計の順序によって結果が変わってしまう浮動小数点数の問題を抑えられます。
タグ: JavaScript, Baseline 2026, Math.sumPrecise()

#### [Hono JSXで@storybook/react-viteと同じ使い心地を得るためのStorybookフレームワーク storybook-framework-hono-vite を作った](https://k8o.me/blog/storybook-framework-hono-vite)（2026-04-22）
Hono JSXで書いたコンポーネントを@storybook/react-viteと同じ感覚でStorybookに組み込みたくて、storybook-framework-hono-viteを作りました。既存の@storybook/html-viteを流用する方式では毎storyにボイラープレートが必要で、interactionの検証やライフサイクル連動に限界があります。独自のStorybookフレームワークを作った背景と、提供しているものをまとめます。
タグ: storybook, test, Hono, Hono JSX, Vite, Vitest

#### [WebTransportでHTTP/3上の双方向通信を実現する](https://k8o.me/blog/webtransport)（2026-04-07）
WebTransportはHTTP/3（QUIC）上で動作する双方向通信APIです。1本のコネクション上に独立した複数のストリームを開けたり、再送のない軽量なデータグラムを送受信したりと、WebSocketにはない低遅延な通信が実現できます。Baseline 2026で主要ブラウザすべてで利用可能になりました。
タグ: JavaScript, Baseline 2026, WebTransport

#### [ChromaticにStorybookをPublishすることで広がる恩恵](https://k8o.me/blog/chromatic-storybook-publish)（2026-04-07）
ChromaticにStorybookをPublishすると、静的なホスティングにとどまらず、MCPサーバーとしてAIエージェントにコンポーネント情報を提供したり、Storybook Compositionで別リポジトリのStorybookを統合したりできます。このサイトでの実例を交えて紹介します。
タグ: storybook, Chromatic, MCP

#### [Iterator.concat()で複数のIterableを1つのIteratorにまとめる](https://k8o.me/blog/iterator-concat)（2026-04-06）
Iterator.concat()は複数のIterableを受け取り、それらの値を順番に返す新しいIteratorを生成する静的メソッドです。ジェネレータ関数やスプレッド構文による配列変換を使わずに、宣言的かつ遅延評価でIterableを結合できます。
タグ: JavaScript, Iterator Helpers, Baseline 2026, Iterator.concat()

#### [Readable Byte Streamsでバイナリデータを効率的に読み取る](https://k8o.me/blog/readable-byte-streams)（2026-04-05）
Readable Byte Streamsは、ReadableStreamのバイトストリーム拡張で、内部キューを経由せずバッファへ直接書き込む経路を提供します。BYOBリーダーによるバッファの持ち込みや、autoAllocateChunkSizeによるデフォルトリーダーとの互換性を解説します。
タグ: JavaScript, Baseline 2026, Streams API

#### [Reporting APIでブラウザのレポートを収集する](https://k8o.me/blog/reporting)（2026-04-05）
Reporting APIは、CSP違反や非推奨機能の使用、音声の自動再生ブロックのようなブラウザによる介入など、さまざまな問題のレポートを収集する仕組みです。Reporting-Endpointsヘッダーによるサーバーへの送信と、ReportingObserverによるクライアントサイドでの検知の2つのアプローチを解説します。
タグ: JavaScript, Baseline 2026, Reporting API

#### [text-indentのeach-lineとhangingキーワードでインデントを制御する](https://k8o.me/blog/text-indent-keywords)（2026-03-27）
CSSのtext-indentプロパティにeach-lineとhangingキーワードが追加され、Baseline 2026で主要ブラウザすべてで利用可能になりました。改行後のインデントやぶら下げインデントを標準的な方法で実現できます。
タグ: CSS, Baseline 2026, text-indent, text-indent: each-line, text-indent: hanging

#### [CSS shape()で柔軟な図形を定義する](https://k8o.me/blog/shape-function)（2026-03-08）
CSS shape()関数は、path()では使えなかったパーセンテージやcalc()、CSS変数を活用した図形定義を可能にします。line、curve、smooth、arcなどのshape-commandの使い方とpath()との違いを解説します。
タグ: CSS, Baseline 2026, shape()

#### [Trusted TypesでDOM XSSを大幅に軽減する](https://k8o.me/blog/trusted-types)（2026-03-08）
Trusted Typesは、innerHTMLやeval()などのシンクに対して型付きオブジェクトの使用を強制し、DOM XSSを大幅に軽減するブラウザAPIです。CSPヘッダーによる強制やポリシーの作成を中心に解説します。
タグ: JavaScript, Baseline 2026, Trusted Types, CSP

#### [Navigation APIの全体像とSPAルーティングのこれから](https://k8o.me/blog/navigation)（2026-03-03）
Baseline 2026で追加されたNavigation APIの主要な機能を紹介します。navigateイベントによるナビゲーションの一元管理、intercept()による宣言的なSPAルーティング、履歴エントリの操作など、SPAに必要な機能が統合的に提供されています。
タグ: JavaScript, Baseline 2026, Navigation API

#### [MapのgetOrInsert、getOrInsertComputedで冗長なコードを減らす](https://k8o.me/blog/getorinsert)（2026-03-02）
Baseline 2026で追加されたMap.prototype.getOrInsertとgetOrInsertComputedを紹介します。キーが存在しない場合にデフォルト値を挿入して返す新しいメソッドで、グループ化やカウントなどの定番パターンを簡潔に書けます。
タグ: JavaScript, Baseline 2026, Map, getOrInsert, getOrInsertComputed

#### [zstd（Zstandard）でウェブ通信を効率よく圧縮する](https://k8o.me/blog/zstd)（2026-03-02）
zstd（Zstandard）はMetaが開発した可逆圧縮アルゴリズムです。高い圧縮率と高速な展開速度を持ち、Baseline 2026でブラウザの通信でも利用できるようになりました。
タグ: Baseline 2026, zstd

#### [Service WorkerでES Modulesを使う](https://k8o.me/blog/js-modules-service-workers)（2026-01-25）
Service Workerの登録時にtype: moduleオプションを指定することで、ES Modulesの静的インポートが使えるようになりました。ウェブアプリとService Workerでコードを共有できるようになります。
タグ: JavaScript, Baseline 2026, Service Workers

#### [:active-view-transition-type()で遷移タイプごとに異なるアニメーションを適用する](https://k8o.me/blog/active-view-transition)（2026-01-24）
startViewTransitionのtypesオプションで指定したタイプに応じて異なるスタイルを適用できる:active-view-transition-type()疑似クラスについて解説します。
タグ: CSS, view-transitions, Baseline 2026, :active-view-transition-type

#### [rcap, rch, rex, ric単位でルート要素に基づいたサイズを指定する](https://k8o.me/blog/root-font-units)（2026-01-20）
rcap, rch, rex, ricはルート要素のフォントの特性に基づいたCSSの長さ単位です。cap, ch, ex, icのルート要素を基準にした単位として、ページ全体で一貫したサイズ指定が可能になります。
タグ: CSS, Baseline 2026, rcap, rch, rex, ric

#### [Invoker Commands APIでJavaScriptなしでボタンから他の要素を操作する](https://k8o.me/blog/invoker-commands)（2026-01-13）
Invoker Commands APIを使うと、commandforとcommand属性だけでDialogやPopoverを操作できます。commandイベントを利用することで、独自のカスタムコマンドを定義することも可能です。
タグ: Baseline 2025, HTML, Invoker Commands API

#### [font-family: mathで数式に適切なフォントを適用する](https://k8o.me/blog/font-family-math)（2026-01-12）
font-family: mathは数学的表現に特化した一般フォントファミリーです。上付き・下付き文字、複数行にまたがる括弧、数式の入れ子構造などを適切に表示できます。Baseline 2026で主要ブラウザすべてで利用可能になりました。
タグ: CSS, font-family: math, Baseline 2026

#### [document.caretPositionFromPointで座標からキャレット位置を取得する](https://k8o.me/blog/document-caretpositionfrompoint)（2025-12-30）
document.caretPositionFromPointは、指定した座標にあるキャレット位置を取得するためのAPIです。マウスクリックやタッチイベントの座標から、テキスト内の挿入位置を特定できます。
タグ: JavaScript, Baseline 2025, document.caretPositionFromPoint()

#### [Largest Contentful Paint APIで最大コンテンツの描画時間を計測する](https://k8o.me/blog/largest-contentful-paint)（2025-12-30）
Largest Contentful Paint APIはビューポート内で最も大きなコンテンツ要素が描画されるまでの時間を計測するためのAPIです。Web VitalsのLCP指標の計測に使用され、ページの読み込み体験を評価する重要な機能です。
タグ: JavaScript, Baseline 2025, Performance API, LCP

#### [Performance Event Timing APIで操作の待ち時間を計測する](https://k8o.me/blog/event-timing)（2025-12-30）
Performance Event Timing APIはユーザーの操作によって発生したイベントの待ち時間を計測するためのAPIです。クリックやキーボード等の操作で発生したイベントの処理時間を計測し、INP（Interaction to Next Paint）の計測に利用されます。
タグ: JavaScript, Baseline 2025, Performance API, PerformanceEventTiming

#### [scrollbar-colorでスクロールバーの色を変更する](https://k8o.me/blog/scrollbar-color)（2025-12-20）
scrollbar-colorはスクロールバーのトラックとつまみの色をカスタマイズできるCSSプロパティです。Baseline 2025で主要ブラウザすべてで利用可能になりました。標準化されたシンプルな記述でスクロールバーをスタイリングできます。
タグ: Baseline 2025, CSS, scroll, scrollbar-color

#### [scrollendイベントでスクロール終了を検知する](https://k8o.me/blog/scrollend)（2025-12-20）
scrollendイベントはスクロール操作が完了したときに発火するイベントです。Baseline 2025で主要ブラウザすべてで利用可能になりました。従来のscrollイベントとsetTimeoutを組み合わせた方法と比べて、正確なタイミングでスクロール終了を検知できるようになりました。
タグ: JavaScript, Baseline 2025, scroll, scrollend

#### [@scopeでCSSスタイルの適用範囲を制御する](https://k8o.me/blog/scope)（2025-12-20）
@scopeはCSSスタイルの適用範囲を特定のDOM部分木に限定できるアットルールです。Baseline 2025で利用可能になりました。スコープルートとスコープリミットを使ったドーナツスコープや、スコープの近接性によるスタイル優先順位の決定など、強力な機能を持っています。
タグ: Baseline 2025, CSS, @scope

#### [Atomics.waitAsyncで非同期に共有メモリ上のデータを待機する](https://k8o.me/blog/atomics-wait-async)（2025-11-15）
Baseline 2025にAtomics.waitAsyncが追加されました。Atomics.waitの非同期版のメソッドで、メインスレッドで共有メモリ上のデータを待機したい場合に便利です。
タグ: JavaScript, Baseline 2025, Atomics, Atomic.waitAsync

#### [input要素でディレクトリを扱うwebkitdirectory属性](https://k8o.me/blog/input-file-webkitdirectory)（2025-11-08）
input要素のwebkitdirectory属性がBaseline 2025に追加されました。webkitdirectory属性を利用することで、input要素のtype="file"でディレクトリを選択できるようになります。
タグ: Baseline 2025, HTML, input-file-webkitdirectory

#### [UIが遷移するアニメーションを簡単にするView Transition API](https://k8o.me/blog/view-transitions)（2025-11-08）
View Transition APIがBaseline 2025に追加され、Web上のUI遷移を簡単にアニメーション化可能になりました。異なるページ間の遷移や同一ページ内のDOM更新時に、要素の位置やスタイルの変化をアニメーション化できます。CSSによるスタイル制御も豊富に用意されており、柔軟なカスタマイズが可能です。
タグ: JavaScript, Baseline 2025, CSS, view-transitions, view-transition-class

#### [details要素に命を吹き込む::details-content擬似要素の登場](https://k8o.me/blog/details-content)（2025-10-26）
details要素のコンテンツ部分にスタイルを適用できる::details-content擬似要素がBaseline 2025に加わりました。details要素を用いたスタイリングの守備範囲が広がっただけではなく、アニメーションの適用も容易になりました。
タグ: Baseline 2025, CSS, details-content, <details>

#### [WebRTC Encoded TransformでWebRTCの一連の処理にメスを入れる](https://k8o.me/blog/webrtc-encoded-transform)（2025-10-25）
WebRTC Encoded Transformは、WebRTCの送信・受信パイプラインにカスタム変換処理を挿入できる機能です。RTCRtpScriptTransformを使用してWorkerスレッドでエンコード済みフレームを直接操作し、E2EEやカスタムエフェクトを実装できます。
タグ: JavaScript, Baseline 2025, webrtc, webrtc-encoded-transform

#### [parseHtmlUnsafeでHTMLをDocumentに変換する](https://k8o.me/blog/parse-html-unsafe)（2025-10-11）
タグ: JavaScript, Baseline 2025, HTML, parseHTMLUnsafe

#### [要素のレイアウトとレンダリングを必要なタイミングまでスキップさせるCSSのcontent-visibilityプロパティ](https://k8o.me/blog/content-visibility)（2025-09-21）
CSSのcontent-visibilityプロパティは、要素のレンダリングを制御しパフォーマンスを向上させる機能です。auto値を指定することで、ビューポート外の要素のレイアウト処理を必要なタイミングまでスキップできます。
タグ: Baseline 2025, CSS, content-visibility

#### [リソースへのリクエスト前にドメイン名を解決するdns-prefetch](https://k8o.me/blog/link-rel-dns-prefetch)（2025-09-21）
linkタグのrel属性にdns-prefetchを付与すると、リソースへのリクエストの前に対象のドメイン名のDNSルックアップを行うよう指示できます。これにより、実際にそのドメインからリソースを取得する際の待機時間が短縮され、ページのパフォーマンスが向上します。
タグ: Baseline 2025, HTML, <link rel="dns-prefetch">

#### [URLのパターンマッチを簡単にするURLPattern API](https://k8o.me/blog/urlpattern)（2025-09-21）
URLPattern APIは、URLのパターンマッチを簡単に行うためのAPIです。従来のRegExpによる実装と比べて、より直感的かつ正確にパス変数の抽出やURLの照合ができます。
タグ: JavaScript, Baseline 2025, 正規表現, URLPattern

#### [Uint8Arrayとbase64、Hex（16進数）の相互変換](https://k8o.me/blog/uint8array-base64-hex)（2025-09-21）
Uint8Arrayとbase64、Hex（16進数）の相互変換を行うメソッドがBaseline 2025で追加されました。fromBase64やtoHexなどメソッドが標準で扱えるようになり、複雑な変換処理を自作せず安全かつ簡潔に実装できます。
タグ: JavaScript, Baseline 2025, Uint8Array to/from base64 and hex

#### [Shadow DOM境界を跨いだ選択範囲の処理を可能にするgetComposedRanges](https://k8o.me/blog/composed-ranges)（2025-08-25）
getComposedRangesは、Shadow DOM境界を跨いだ選択範囲を取得できるSelectionオブジェクトのメソッドです。ShadowRootを指定することで、カプセル化された要素も正確に選択範囲として扱えます。
タグ: JavaScript, Baseline 2025, getComposedRanges

#### [OIDCを利用したnpmパッケージの公開が可能になったので、Changeset×GitHub Actionsで試してみる](https://k8o.me/blog/npm-trusted-publishing-for-npm-packages)（2025-08-14）
npmパッケージの公開で利用可能になったOIDC認証を、ChangesetsとGitHub Actionsを組み合わせて実装する方法を紹介します。従来のAccess Tokenによる認証と比べて、定期的な更新作業が不要になり効率的な開発環境を構築できます。設定も簡単なので、npmパッケージを公開する方にはぜひおすすめしたい認証方法です。
タグ: npm, oidc, packages, GitHub Actions, Changesets

#### [sb.mockでStorybookで利用するモジュールをモックしよう！](https://k8o.me/blog/sb-mock)（2025-08-04）
Storybook v9.1.0で新たに導入されたsb.mock機能により、モジュールのモックがこれまで以上に簡単に行えるようになりました。sb.mockはStorybookを活用したテストの取り組みやすさを大幅に向上させる画期的な新機能です。ぜひ活用してみてください。
タグ: React, storybook, test, mock

#### [スペルミス・文法エラーの装飾をCSSで制御する](https://k8o.me/blog/spelling-grammar-error)（2025-06-29）
Baseline 2025入りしたtext-decoration-lineのspelling-error・grammar-error値を使うと、ブラウザ標準のエラー表示と同じ装飾を任意のテキストに与えられます。あわせて、検出された本物のエラーをスタイリングする::spelling-error・::grammar-error擬似要素も紹介します
タグ: Baseline 2025, CSS, spelling-grammar-error

#### [CSS Custom Highlight APIで任意の範囲のテキストをハイライトする](https://k8o.me/blog/highlight)（2025-06-29）
CSS Custom Highlight APIはDOMを変更せずに任意のテキスト範囲をハイライトする機能です。JavaScriptでRangeオブジェクトを定義し、Highlightオブジェクトとして登録後、CSSの::highlight擬似要素でスタイリングして特定の範囲をハイライトします。
タグ: JavaScript, CSS, highlight, Baseline 2026

#### [CSSのabs()とsign()関数で数値の符号を使ったスタイリングを行う](https://k8o.me/blog/abs-sign)（2025-06-26）
数値の符号を扱うCSS 値関数abs()とsign()がChrome138・Edge138でBaseline 2025に追加されました。absは絶対値の取得、signは符号の判定ができる便利な関数です。
タグ: Baseline 2025, CSS, abs, sign

#### [複数のSuspenseの表示を制御するSuspenseList](https://k8o.me/blog/suspense-list)（2025-06-21）
React18の実験的機能SuspenseListを使って複数のSuspenseの読み込み順序と表示パターンを制御する方法を解説します。レイアウトシフトの削減とUX向上を実現するコンポーネントです。
タグ: React, suspense, suspense-list

#### [print-color-adjustで印刷時の色調整を制御する](https://k8o.me/blog/print-color-adjust)（2025-06-07）
print-color-adjustプロパティをexactに設定することで、印刷時にブラウザが自動的に色やコントラストを調整するのを防ぐことができます。印刷時にデザインに意図が伝わらない場合に利用できる有用な機能の一つです。
タグ: Baseline 2025, CSS, print-color-adjust

#### [【TSKaigi】初めて登壇しました！](https://k8o.me/blog/for-the-first-time-in-forever)（2025-05-31）
初めてカンファレンスに参加・登壇してきました。参加したのはTSKaigi 2025で、多くの素晴らしい体験ができました。登壇したトークの内容や、参加しての感想を共有します。
タグ: TypeScript, daily, TSKaigi

#### [<dialog>要素を閉じるように要求するrequestClose](https://k8o.me/blog/requestclose)（2025-05-28）
HTMLDialogElementのrequestCloseメソッドは<dialog>要素を閉じるように要求します。「要求」とは、closeメソッドのように即座にcloseイベントを発行して閉じるのではなく、cancelイベントを介して閉じることを意味します。これにより、ダイアログを閉じる前に任意の処理を挟むことが可能になります。
タグ: JavaScript, Baseline 2025, dialog, requestclose

#### [React19で変化したuseReducerの型から学ぶTypeScriptの型推論](https://k8o.me/blog/react19-usereducer-ts-type-inference)（2025-05-24）
@types/reactのバージョン19ではuseReducerの型の変更が行われました。これまではreducer関数から状態の型を推論していましたが、バージョン19からはreducer関数と初期値から状態の型を推論する形に変更されました。この記事では、この変更を元にTypeScriptにおける型の推論方法について提案します。
タグ: TypeScript, React, TSKaigi, useReducer, @types/react

#### [withキーワードを使用したJSONモジュールのインポート](https://k8o.me/blog/json-modules)（2025-05-21）
ESMでwithキーワードを利用してJSONをインポートする方法について解説します。Import Attributeという属性を利用して、JSONモジュールを安全にJavaScriptから利用できるようになりました。
タグ: JavaScript, Baseline 2025, json-modules, with, import

#### [文字列に潜む特殊文字を構文として解釈されないように置き換えるRegExp.escape](https://k8o.me/blog/regexp-escape)（2025-05-15）
RegExpオブジェクトを生成するときに正規表現のテキストをそのままの文字として扱いたい時があります。これまでは手動でエスケープする必要がありましたが、RegExp.escapeを使うことで構文として解釈されないような文字列に変換し、文字通りの並びとして検索できます。RegExp.escapeを使ってエスケープ漏れとは縁のない生活を送りましょう。
タグ: JavaScript, Baseline 2025, 正規表現, RegExp, RegExp.escape

#### [CSS グラデーションの新仕様：単色カラーストップの導入](https://k8o.me/blog/single-color-gradients)（2025-04-21）
タグ: color, Baseline 2025, CSS Gradients, CSS

#### [Iteratorに対してmapやfilterのようなヘルパー関数を作用させる](https://k8o.me/blog/iterator-methods)（2025-04-21）
Baseline 2025でIterator Helpersが導入され、Iteratorオブジェクトにmapやfilterなどの便利な操作を作用できるようになりました。これにより、配列への変換が不要になり、コードの可読性向上と遅延評価によるパフォーマンス改善が期待できます。
タグ: JavaScript, Baseline 2025, Iterator Helpers

#### [16bit浮動小数点が使える！Float16Array](https://k8o.me/blog/float16array)（2025-04-13）
Float16ArrayがBaselineに追加されたことで、16bitの浮動小数点を扱えるようになりました。機械学習やグラフィックス用途などで威力を発揮する新しいTypedArrayについて解説します。
タグ: JavaScript, Baseline 2025, Float16Array

#### [Atomicsで共有メモリ上のデータを安全に取り扱う](https://k8o.me/blog/atomics-pause)（2025-04-13）
AtomicsはSharedArrayBufferなどで定義された共有メモリ上のデータを安全に操作するための仕組みで、不可分操作や待機・通知による制御を提供します。新たに追加されたAtomics.pauseにより、スピンロック中のリソース最適化も可能になりました。
タグ: JavaScript, Baseline 2025, Atomics, Atomics.pause

#### [任意のデータをコピー&ペーストするClipboard API](https://k8o.me/blog/async-clipboard)（2025-04-06）
Clipboard APIは、navigator.clipboardを通じてクリップボードへの読み書きを非同期で行うAPIです。テキストや画像のコピー・貼り付けに対応し、ClipboardItemを使えばMIMEタイプ別のデータ操作も可能です。
タグ: JavaScript, Baseline 2025, Baseline 2024, Clipboard API, ClipboardItem, ClipboardItem supports

#### [画面のスリープを防ぐScreen Wake Lock API](https://k8o.me/blog/screen-wake-lock)（2025-04-04）
Baseline 2025にScreen Wake Lock APIが追加されました。Screen Wake Lock APIは、デバイスの画面がスリープ状態に入るのを防ぐためのAPIです。この機能により処理が行われていない状態でも継続的に画面を表示する体験を実現可能になりました。
タグ: JavaScript, Baseline 2025, Screen Wake Lock

#### [Popover APIを使ってJavaScriptなしでツールチップやドロップダウンメニューを実装する](https://k8o.me/blog/popover)（2025-03-17）
Popover APIは、ツールチップやドロップダウンメニューをJavaScriptなしで実装できるAPIで、Baseline 2025に追加されました。表示するコンテンツにpopover属性を渡し、その要素をpopovertargetで制御します。シンプルなHTMLとCSSで手軽に機能に富んだポップオーバーを作成する方法を学びます。
タグ: JavaScript, Baseline 2025, Popover API

#### [Intl.DurationFormatで期間をlocaleに基づいて表現する](https://k8o.me/blog/intl-duration-format)（2025-03-14）
Intl.DurationFormatはlocaleに応じた形式で期間を表現するIntlの新機能で、Baseline 2025で利用可能です。formatメソッドで文字列として期間を取得でき、formatToPartsメソッドでは各部分をオブジェクトの配列として取得できます。言語による期間の表現の違いを標準に従って簡単扱いましょう。
タグ: JavaScript, Baseline 2025, Intl, Intl.DurationFormat

#### [contenteditableな要素でテキストだけを編集可能にする](https://k8o.me/blog/contenteditable-plaintextonly)（2025-03-14）
Baseline 2025でcontenteditableにplaintext-onlyを渡せるようになりました。plaintext-onlyを指定すると、要素内での編集が可能な状態でリッチテキスト（太字やリンクなど）のスタイルが適用されないようになります。従来から存在するtrueを指定した時の挙動を復習してから挙動の違いを確認します。
タグ: Baseline 2025, contenteditable, HTML, グローバル属性

#### [関数の同期・非同期を気にせず処理するPromise.tryとは](https://k8o.me/blog/promise-try)（2025-03-08）
Promise.tryは、同期・非同期関数を区別せず手続きを進めさせるBaseline 2025で追加されたメソッドです。同期・非同期が混在する処理に有効で、キャッシュを利用する関数などで一貫したPromiseの形で結果を扱えます。同期・非同期が混在する関数の複雑さとは別れを告げましょう。
タグ: JavaScript, Baseline 2025, Promise, Promise.try

#### [色彩検定UC級に合格しました！](https://k8o.me/blog/color-certification-uc)（2024-12-18）
タグ: color, daily

#### [色覚タイプとその分類](https://k8o.me/blog/color-perception)（2024-10-14）
色の見え方が多数に比べ大きく異なる「色覚特性」を先天的に持つ人は日本人男性全体の約5%存在します。この記事では色覚特性とその分類について紹介します。
タグ: a11y, color

#### [色のコントラスト比は重要だけどどうやって求めるんだっけ？](https://k8o.me/blog/color-contrast)（2024-02-12）
WCAG 2.1では背景色とテキスト色のコントラスト比についての達成基準が定められています。コントラスト比とは何でしょうか？コントラスト比の計算はツールを用いることが多いので、その計算方法を理解せずに検査している方は少なくないです。この記事ではコントラスト比の計算方法を理解して、そこから読み取れる重要な情報を紐解きます。
タグ: color contrast, a11y, WCAG, W3C, color

#### [Reactの新しいルーティングライブラリ、TanStackRouterを学ぶ](https://k8o.me/blog/tanstack-router-introduction)（2023-07-13）
Reactのルーティングには主にNextjs等のフレームワークやReact Routeが利用されます。この記事では新たなルーティング手法の選択肢としてTanStack Routerを紹介します。TanStack Routerでは最初に挙げた選択肢の使い心地を踏襲しつつ、ルーティングやサーチパラメータの型安全性や他にない便利な機能を提供します。
タグ: TypeScript, React, TanStack Router

#### [特定のケースではsatisfies演算子で型が絞り込まれてしまう？？？](https://k8o.me/blog/typescript-satisfies-narrowing)（2023-07-10）
TypeScript 4.9で追加されたsatisfies演算子の予期しない挙動について解説します。リテラル型のユニオンで制約を課された場合に型が絞り込まれる理由と、その仕組みを詳しく説明します。
タグ: TypeScript, satisfies

#### [Reactコンポーネントでchildrenに対してpropsを渡す](https://k8o.me/blog/react-children-props)（2023-05-20）
Reactで子コンポーネントにpropsを渡す2つの方法を紹介します。レガシーなcloneElement APIと、推奨されるrender propパターンの違いを解説し、ツールチップの実装例を通じて実践的な使い方を学びます。
タグ: React, cloneElement, render props

### [Talks](https://k8o.me/talks)
過去の登壇テーマや資料へのリンクをまとめています。

#### React19で変化したuseReducerの型から学ぶTypeScriptの型推論
TSKaigi 2025（2025-05-24）
[イベント](https://2025.tskaigi.org/talks/k35o)

### [Playgrounds](https://k8o.me/playgrounds)
ブログ記事や興味のある技術の試作品を集めています。

#### [:active-view-transition-type()疑似クラス](https://k8o.me/playgrounds/active-view-transition)
View Transitionの遷移タイプに応じて、異なるアニメーションを適用します。

#### [Clipboard API](https://k8o.me/playgrounds/async-clipboard)
ブラウザのクリップボードに任意のデータをコピー・ペーストできるAPIです。

#### [baseline-shift](https://k8o.me/playgrounds/baseline-shift)
インラインレベル要素のベースラインを親要素から相対的にずらすCSSプロパティです。SVGとHTMLをまたいで同じプロパティで扱えます。

#### [CaretPositionFromPoint](https://k8o.me/playgrounds/caret-position-from-point)
座標からキャレット位置を取得するAPIです。

#### [Selectionオブジェクト](https://k8o.me/playgrounds/composed-ranges)
ユーザーが選択したテキストの範囲やキャレットの位置を扱うSelectionオブジェクトの紹介です。

#### [Container style queries](https://k8o.me/playgrounds/container-style-queries)
@container style()で祖先要素のカスタムプロパティの値を条件にスタイルを切り替えるCSSの仕組みです。テーマやコンテキストごとのスタイル分岐を子要素側で完結できます。

#### [content-visibility](https://k8o.me/playgrounds/content-visibility)
要素のレンダリングを制御しパフォーマンスを向上させるCSSプロパティです。

#### [contrast-color](https://k8o.me/playgrounds/contrast-color)
背景色に対してコントラストの高い色（黒または白）を自動で返すCSS関数です。

#### [image-rendering: crisp-edges](https://k8o.me/playgrounds/crisp-edges)
画像を拡大表示するときに色を補間せず境界をはっきり保つCSS値です。ドット絵やピクセルアートを滲ませずに拡大できます。

#### [::details-content擬似要素](https://k8o.me/playgrounds/details-content)
details要素の開閉時にスムーズなアニメーションをCSSだけで実装できる擬似要素です。

#### [Event Timing](https://k8o.me/playgrounds/event-timing)
ユーザー操作によって発生したイベントの待ち時間を計測するAPIです。

#### [field-sizing](https://k8o.me/playgrounds/field-sizing)
field-sizing: contentでフォームコントロールを入力内容に合わせて伸縮させられます。

#### [font-family: math](https://k8o.me/playgrounds/font-family-math)
数学的表現に特化したgeneric font familyで、数式を適切に表示します。

#### [input要素のwebkitdirectory属性](https://k8o.me/playgrounds/input-file-webkitdirectory)
ディレクトリ選択を可能にするwebkitdirectory属性の使用例です。

#### [Intl.Locale info](https://k8o.me/playgrounds/intl-locale-info)
Intl.Localeのメソッドで、週の形や書字方向、暦などロケール固有の情報を取得できます。

#### [Invoker Commands API](https://k8o.me/playgrounds/invoker-commands)
commandforとcommand属性でDialogやPopoverを操作する

#### [Largest Contentful Paint](https://k8o.me/playgrounds/largest-contentful-paint)
ビューポート内で最も大きなコンテンツ要素が描画されるまでの時間を計測するAPIです。

#### [:open](https://k8o.me/playgrounds/open-pseudo)
dialog、details、select、ピッカー付きのinputが開いている間にマッチするCSS疑似クラスです。要素別の属性セレクタを横断して一本化できます。

#### [Popover API](https://k8o.me/playgrounds/popover)
JavaScriptなしでツールチップやドロップダウンメニューを実装できるAPIです。

#### [Dialog requestClose](https://k8o.me/playgrounds/requestclose)
ダイアログのrequestClose()メソッドとcancelイベントで、閉じる操作の検知と拒否ができます。

#### [CSS print-color-adjust](https://k8o.me/playgrounds/print-color-adjust)
印刷時の色の調整を制御するCSSプロパティです。

#### [rcap, rch, rex, ric](https://k8o.me/playgrounds/root-font-units)
ルート要素のフォントの特性に基づいたCSSの長さ単位です。

#### [@scope](https://k8o.me/playgrounds/scope)
CSSスタイルの適用範囲を特定のDOM部分木に限定できるアットルールです。

#### [Screen Wake Lock API](https://k8o.me/playgrounds/screen-wake-lock)
デバイスのスクリーンが自動的にスリープ状態になることを防ぐAPIです。

#### [scrollbar-color](https://k8o.me/playgrounds/scrollbar-color)
スクロールバーの色をカスタマイズするCSSプロパティです。

#### [scrollend](https://k8o.me/playgrounds/scrollend)
スクロール操作が完了したときに発火するイベントです。

#### [SharedWorker](https://k8o.me/playgrounds/shared-worker)
同一オリジンの複数タブから共有できるWorkerです。タブをまたいで状態を共有できます。

#### [sibling-index() / sibling-count()](https://k8o.me/playgrounds/sibling-count-index)
要素の並び順と兄弟要素の総数を<integer>として返すCSSの関数です。並び順に応じたアニメーションの遅延や、項目数から逆算するレイアウトをCSSだけで書けます。

#### [React SuspenseList](https://k8o.me/playgrounds/suspense-list)
複数のSuspenseコンポーネントの表示順序や読み込みタイミングを制御します。

#### [CSS abs()とsign()関数](https://k8o.me/playgrounds/abs-sign)
数値の絶対値と符号を取得するCSS関数です。

#### [CSS Custom Highlight API](https://k8o.me/playgrounds/highlight)
DOMを変更せずに任意のテキスト範囲をハイライトできるAPIです。

#### [shape()](https://k8o.me/playgrounds/shape-function)
CSSの単位や関数をフル活用したレスポンシブな図形を定義する関数です。

#### [CSS spelling-error & grammar-error](https://k8o.me/playgrounds/spelling-grammar-error)
ブラウザが検出したスペルミスや文法エラーのスタイリングを制御します。

#### [text-decoration-skip-ink: all](https://k8o.me/playgrounds/text-decoration-skip-ink-all)
allの値で下線・上線がすべてのグリフのインクと交差する箇所で必ず途切れます。CJK文字でも下線が突き刺さらず、読みやすくなります。

#### [text-indent: each-line / hanging](https://k8o.me/playgrounds/text-indent-keywords)
text-indentプロパティのeach-lineとhangingキーワードでインデントを柔軟に制御できます。

#### [ToggleEvent.source](https://k8o.me/playgrounds/toggleevent-source)
toggle / beforetoggleイベントに発火元の要素を載せて渡すプロパティです。複数トリガーから共有のポップオーバーを開くケースで、どのボタンから開かれたかを判定できます。

#### [View Transition API](https://k8o.me/playgrounds/view-transitions)
DOMの更新にアニメーションを適用するAPIです。

### [Artifacts](https://k8o.me/artifacts)
dotfilesやskills、自作ツールなどの制作物をまとめています。

### [Readings](https://k8o.me/reading-list)
気になっている記事を集めて、あとから探せるようにしています。

### [Browser Support](https://k8o.me/browser-support)
Webプラットフォーム機能のブラウザ対応状況を追跡します。

### [カラーコード職人](https://k8o.me/color-converter)
HEX・RGB・HSL・OKLCHなどCSSの色形式を相互に変換します。

### [コントラストチェッカー](https://k8o.me/contrast-checker)
2色のコントラスト比とAPCAのLc値を計算し、WCAGの基準で評価します。

### [カラーHexクイズ](https://k8o.me/color-quiz)
色からHexコードを当てたり、Hexコードから色を選ぶクイズです。

### [かどまるラボ](https://k8o.me/radius-maker)
border-radiusを視覚的に操作してCSSを生成します。

### [いろばしご](https://k8o.me/palette-maker)
OKLCHの明度スケールで11段階のカラーパレットを生成し、コントラストを検証します。

### [もじカウント](https://k8o.me/moji-count)
テキストの文字数をリアルタイムに数えます。

### [HTMLいれ子マップ](https://k8o.me/html-nest)
HTMLタグを選ぶと、親に置ける要素と中に入れられる子要素が浮かび上がります。

### [fluida](https://fluida.k8o.me)
絵の具を流して模様を描く、フルイドアートのお絵かきWebアプリです。

## サイト情報
- [About](https://k8o.me/about) — k8o とこのサイトについて
- [Contact](https://k8o.me/contact) — 連絡手段
- [Privacy](https://k8o.me/privacy) — プライバシーポリシー

## 開発者向けリソース
- [GitHub: k35o/k8o](https://github.com/k35o/k8o) — このサイトのソースコード
- [@k8ordo/ui](https://www.npmjs.com/package/@k8ordo/ui) — k8o が開発するデザインシステム（npm: `@k8ordo/ui`）
- [@k8o/create](https://www.npmjs.com/package/@k8o/create) — Vite+ プロジェクトジェネレータ（npm: `@k8o/create`）