<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Blog]]></title><description><![CDATA[Webフロントエンドを中心に、日々のことも書いています。]]></description><link>https://k8o.me/blog</link><generator>RSS for Node</generator><lastBuildDate>Mon, 20 Apr 2026 11:05:13 GMT</lastBuildDate><atom:link href="https://k8o.me/blog/feed.xml" rel="self" type="application/rss+xml"/><language><![CDATA[ja]]></language><item><title><![CDATA[WebTransportでHTTP/3上の双方向通信を実現する]]></title><description><![CDATA[WebTransportはHTTP/3（QUIC）上で動作する双方向通信APIです。1本のコネクション上に独立した複数のストリームを開けたり、再送のない軽量なデータグラムを送受信したりと、WebSocketにはない低遅延な通信が実現できます。Baseline 2026で主要ブラウザすべてで利用可能になりました。]]></description><link>https://k8o.me/blog/webtransport</link><guid isPermaLink="true">https://k8o.me/blog/webtransport</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2026]]></category><category><![CDATA[WebTransport]]></category><pubDate>Tue, 07 Apr 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[ChromaticにStorybookをPublishすることで広がる恩恵]]></title><description><![CDATA[ChromaticにStorybookをPublishすると、静的なホスティングにとどまらず、MCPサーバーとしてAIエージェントにコンポーネント情報を提供したり、Storybook Compositionで別リポジトリのStorybookを統合したりできます。このサイトでの実例を交えて紹介します。]]></description><link>https://k8o.me/blog/chromatic-storybook-publish</link><guid isPermaLink="true">https://k8o.me/blog/chromatic-storybook-publish</guid><category><![CDATA[storybook]]></category><category><![CDATA[Chromatic]]></category><category><![CDATA[MCP]]></category><pubDate>Tue, 07 Apr 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[Iterator.concat()で複数のIterableを1つのIteratorにまとめる]]></title><description><![CDATA[Iterator.concat()は複数のIterableを受け取り、それらの値を順番に返す新しいIteratorを生成する静的メソッドです。ジェネレータ関数やスプレッド構文による配列変換を使わずに、宣言的かつ遅延評価でIterableを結合できます。]]></description><link>https://k8o.me/blog/iterator-concat</link><guid isPermaLink="true">https://k8o.me/blog/iterator-concat</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Iterator Helpers]]></category><category><![CDATA[Baseline 2026]]></category><category><![CDATA[Iterator.concat()]]></category><pubDate>Mon, 06 Apr 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[Readable Byte Streamsでバイナリデータを効率的に読み取る]]></title><description><![CDATA[Readable Byte Streamsは、ReadableStreamのバイトストリーム拡張で、内部キューを経由せずバッファへ直接書き込む経路を提供します。BYOBリーダーによるバッファの持ち込みや、autoAllocateChunkSizeによるデフォルトリーダーとの互換性を解説します。]]></description><link>https://k8o.me/blog/readable-byte-streams</link><guid isPermaLink="true">https://k8o.me/blog/readable-byte-streams</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2026]]></category><category><![CDATA[Streams API]]></category><pubDate>Sun, 05 Apr 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[Reporting APIでブラウザのレポートを収集する]]></title><description><![CDATA[Reporting APIは、CSP違反や非推奨機能の使用、音声の自動再生ブロックのようなブラウザによる介入など、さまざまな問題のレポートを収集する仕組みです。Reporting-Endpointsヘッダーによるサーバーへの送信と、ReportingObserverによるクライアントサイドでの検知の2つのアプローチを解説します。]]></description><link>https://k8o.me/blog/reporting</link><guid isPermaLink="true">https://k8o.me/blog/reporting</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2026]]></category><category><![CDATA[Reporting API]]></category><pubDate>Sun, 05 Apr 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[text-indentのeach-lineとhangingキーワードでインデントを制御する]]></title><description><![CDATA[CSSのtext-indentプロパティにeach-lineとhangingキーワードが追加され、Baseline 2026で主要ブラウザすべてで利用可能になりました。改行後のインデントやぶら下げインデントを標準的な方法で実現できます。]]></description><link>https://k8o.me/blog/text-indent-keywords</link><guid isPermaLink="true">https://k8o.me/blog/text-indent-keywords</guid><category><![CDATA[CSS]]></category><category><![CDATA[Baseline 2026]]></category><category><![CDATA[text-indent]]></category><category><![CDATA[text-indent: each-line]]></category><category><![CDATA[text-indent: hanging]]></category><pubDate>Fri, 27 Mar 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[CSS shape()で柔軟な図形を定義する]]></title><description><![CDATA[CSS shape()関数は、path()では使えなかったパーセンテージやcalc()、CSS変数を活用した図形定義を可能にします。line、curve、smooth、arcなどのshape-commandの使い方とpath()との違いを解説します。]]></description><link>https://k8o.me/blog/shape-function</link><guid isPermaLink="true">https://k8o.me/blog/shape-function</guid><category><![CDATA[CSS]]></category><category><![CDATA[Baseline 2026]]></category><category><![CDATA[shape()]]></category><pubDate>Sun, 08 Mar 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[Trusted TypesでDOM XSSを大幅に軽減する]]></title><description><![CDATA[Trusted Typesは、innerHTMLやeval()などのシンクに対して型付きオブジェクトの使用を強制し、DOM XSSを大幅に軽減するブラウザAPIです。CSPヘッダーによる強制やポリシーの作成を中心に解説します。]]></description><link>https://k8o.me/blog/trusted-types</link><guid isPermaLink="true">https://k8o.me/blog/trusted-types</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2026]]></category><category><![CDATA[Trusted Types]]></category><category><![CDATA[CSP]]></category><pubDate>Sun, 08 Mar 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[Navigation APIの全体像とSPAルーティングのこれから]]></title><description><![CDATA[Baseline 2026で追加されたNavigation APIの主要な機能を紹介します。navigateイベントによるナビゲーションの一元管理、intercept()による宣言的なSPAルーティング、履歴エントリの操作など、SPAに必要な機能が統合的に提供されています。]]></description><link>https://k8o.me/blog/navigation</link><guid isPermaLink="true">https://k8o.me/blog/navigation</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2026]]></category><category><![CDATA[Navigation API]]></category><pubDate>Tue, 03 Mar 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[MapのgetOrInsert、getOrInsertComputedで冗長なコードを減らす]]></title><description><![CDATA[Baseline 2026で追加されたMap.prototype.getOrInsertとgetOrInsertComputedを紹介します。キーが存在しない場合にデフォルト値を挿入して返す新しいメソッドで、グループ化やカウントなどの定番パターンを簡潔に書けます。]]></description><link>https://k8o.me/blog/getorinsert</link><guid isPermaLink="true">https://k8o.me/blog/getorinsert</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2026]]></category><category><![CDATA[Map]]></category><category><![CDATA[getOrInsert]]></category><category><![CDATA[getOrInsertComputed]]></category><pubDate>Mon, 02 Mar 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[zstd（Zstandard）でウェブ通信を効率よく圧縮する]]></title><description><![CDATA[zstd（Zstandard）はMetaが開発した可逆圧縮アルゴリズムです。高い圧縮率と高速な展開速度を持ち、Baseline 2026でブラウザの通信でも利用できるようになりました。]]></description><link>https://k8o.me/blog/zstd</link><guid isPermaLink="true">https://k8o.me/blog/zstd</guid><category><![CDATA[Baseline 2026]]></category><category><![CDATA[zstd]]></category><pubDate>Mon, 02 Mar 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[Service WorkerでES Modulesを使う]]></title><description><![CDATA[Service Workerの登録時にtype: moduleオプションを指定することで、ES Modulesの静的インポートが使えるようになりました。ウェブアプリとService Workerでコードを共有できるようになります。]]></description><link>https://k8o.me/blog/js-modules-service-workers</link><guid isPermaLink="true">https://k8o.me/blog/js-modules-service-workers</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2026]]></category><category><![CDATA[Service Workers]]></category><pubDate>Sun, 25 Jan 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[:active-view-transition-type()で遷移タイプごとに異なるアニメーションを適用する]]></title><description><![CDATA[startViewTransitionのtypesオプションで指定したタイプに応じて異なるスタイルを適用できる:active-view-transition-type()疑似クラスについて解説します。]]></description><link>https://k8o.me/blog/active-view-transition</link><guid isPermaLink="true">https://k8o.me/blog/active-view-transition</guid><category><![CDATA[CSS]]></category><category><![CDATA[view-transitions]]></category><category><![CDATA[Baseline 2026]]></category><category><![CDATA[:active-view-transition-type]]></category><pubDate>Sat, 24 Jan 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[rcap, rch, rex, ric単位でルート要素に基づいたサイズを指定する]]></title><description><![CDATA[rcap, rch, rex, ricはルート要素のフォントの特性に基づいたCSSの長さ単位です。cap, ch, ex, icのルート要素を基準にした単位として、ページ全体で一貫したサイズ指定が可能になります。]]></description><link>https://k8o.me/blog/root-font-units</link><guid isPermaLink="true">https://k8o.me/blog/root-font-units</guid><category><![CDATA[CSS]]></category><category><![CDATA[Baseline 2026]]></category><category><![CDATA[rcap]]></category><category><![CDATA[rch]]></category><category><![CDATA[rex]]></category><category><![CDATA[ric]]></category><pubDate>Tue, 20 Jan 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[Invoker Commands APIでJavaScriptなしでボタンから他の要素を操作する]]></title><description><![CDATA[Invoker Commands APIを使うと、commandforとcommand属性だけでDialogやPopoverを操作できます。commandイベントを利用することで、独自のカスタムコマンドを定義することも可能です。]]></description><link>https://k8o.me/blog/invoker-commands</link><guid isPermaLink="true">https://k8o.me/blog/invoker-commands</guid><category><![CDATA[Baseline 2025]]></category><category><![CDATA[HTML]]></category><category><![CDATA[Invoker Commands API]]></category><pubDate>Tue, 13 Jan 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[font-family: mathで数式に適切なフォントを適用する]]></title><description><![CDATA[font-family: mathは数学的表現に特化した一般フォントファミリーです。上付き・下付き文字、複数行にまたがる括弧、数式の入れ子構造などを適切に表示できます。Baseline 2026で主要ブラウザすべてで利用可能になりました。]]></description><link>https://k8o.me/blog/font-family-math</link><guid isPermaLink="true">https://k8o.me/blog/font-family-math</guid><category><![CDATA[CSS]]></category><category><![CDATA[font-family: math]]></category><category><![CDATA[Baseline 2026]]></category><pubDate>Tue, 07 Apr 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[document.caretPositionFromPointで座標からキャレット位置を取得する]]></title><description><![CDATA[document.caretPositionFromPointは、指定した座標にあるキャレット位置を取得するためのAPIです。マウスクリックやタッチイベントの座標から、テキスト内の挿入位置を特定できます。]]></description><link>https://k8o.me/blog/document-caretpositionfrompoint</link><guid isPermaLink="true">https://k8o.me/blog/document-caretpositionfrompoint</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[document.caretPositionFromPoint()]]></category><pubDate>Tue, 30 Dec 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[Largest Contentful Paint APIで最大コンテンツの描画時間を計測する]]></title><description><![CDATA[Largest Contentful Paint APIはビューポート内で最も大きなコンテンツ要素が描画されるまでの時間を計測するためのAPIです。Web VitalsのLCP指標の計測に使用され、ページの読み込み体験を評価する重要な機能です。]]></description><link>https://k8o.me/blog/largest-contentful-paint</link><guid isPermaLink="true">https://k8o.me/blog/largest-contentful-paint</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[Performance API]]></category><category><![CDATA[LCP]]></category><pubDate>Tue, 30 Dec 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[Performance Event Timing APIで操作の待ち時間を計測する]]></title><description><![CDATA[Performance Event Timing APIはユーザーの操作によって発生したイベントの待ち時間を計測するためのAPIです。クリックやキーボード等の操作で発生したイベントの処理時間を計測し、INP（Interaction to Next Paint）の計測に利用されます。]]></description><link>https://k8o.me/blog/event-timing</link><guid isPermaLink="true">https://k8o.me/blog/event-timing</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[Performance API]]></category><category><![CDATA[PerformanceEventTiming]]></category><pubDate>Tue, 30 Dec 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[scrollbar-colorでスクロールバーの色を変更する]]></title><description><![CDATA[scrollbar-colorはスクロールバーのトラックとつまみの色をカスタマイズできるCSSプロパティです。Baseline 2025で主要ブラウザすべてで利用可能になりました。標準化されたシンプルな記述でスクロールバーをスタイリングできます。]]></description><link>https://k8o.me/blog/scrollbar-color</link><guid isPermaLink="true">https://k8o.me/blog/scrollbar-color</guid><category><![CDATA[Baseline 2025]]></category><category><![CDATA[CSS]]></category><category><![CDATA[scroll]]></category><category><![CDATA[scrollbar-color]]></category><pubDate>Sat, 20 Dec 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[scrollendイベントでスクロール終了を検知する]]></title><description><![CDATA[scrollendイベントはスクロール操作が完了したときに発火するイベントです。Baseline 2025で主要ブラウザすべてで利用可能になりました。従来のscrollイベントとsetTimeoutを組み合わせた方法と比べて、正確なタイミングでスクロール終了を検知できるようになりました。]]></description><link>https://k8o.me/blog/scrollend</link><guid isPermaLink="true">https://k8o.me/blog/scrollend</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[scroll]]></category><category><![CDATA[scrollend]]></category><pubDate>Sat, 20 Dec 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[@scopeでCSSスタイルの適用範囲を制御する]]></title><description><![CDATA[@scopeはCSSスタイルの適用範囲を特定のDOM部分木に限定できるアットルールです。Baseline 2025で利用可能になりました。スコープルートとスコープリミットを使ったドーナツスコープや、スコープの近接性によるスタイル優先順位の決定など、強力な機能を持っています。]]></description><link>https://k8o.me/blog/scope</link><guid isPermaLink="true">https://k8o.me/blog/scope</guid><category><![CDATA[Baseline 2025]]></category><category><![CDATA[CSS]]></category><category><![CDATA[@scope]]></category><pubDate>Sat, 20 Dec 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[Atomics.waitAsyncで非同期に共有メモリ上のデータを待機する]]></title><description><![CDATA[Baseline 2025にAtomics.waitAsyncが追加されました。Atomics.waitの非同期版のメソッドで、メインスレッドで共有メモリ上のデータを待機したい場合に便利です。]]></description><link>https://k8o.me/blog/atomics-wait-async</link><guid isPermaLink="true">https://k8o.me/blog/atomics-wait-async</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[Atomics]]></category><category><![CDATA[Atomic.waitAsync]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[input要素でディレクトリを扱うwebkitdirectory属性]]></title><description><![CDATA[input要素のwebkitdirectory属性がBaseline 2025に追加されました。webkitdirectory属性を利用することで、input要素のtype="file"でディレクトリを選択できるようになります。]]></description><link>https://k8o.me/blog/input-file-webkitdirectory</link><guid isPermaLink="true">https://k8o.me/blog/input-file-webkitdirectory</guid><category><![CDATA[Baseline 2025]]></category><category><![CDATA[HTML]]></category><category><![CDATA[input-file-webkitdirectory]]></category><pubDate>Sat, 08 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[UIが遷移するアニメーションを簡単にするView Transition API]]></title><description><![CDATA[View Transition APIがBaseline 2025に追加され、Web上のUI遷移を簡単にアニメーション化可能になりました。異なるページ間の遷移や同一ページ内のDOM更新時に、要素の位置やスタイルの変化をアニメーション化できます。CSSによるスタイル制御も豊富に用意されており、柔軟なカスタマイズが可能です。]]></description><link>https://k8o.me/blog/view-transitions</link><guid isPermaLink="true">https://k8o.me/blog/view-transitions</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[CSS]]></category><category><![CDATA[view-transitions]]></category><category><![CDATA[view-transition-class]]></category><pubDate>Sat, 08 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[details要素に命を吹き込む::details-content擬似要素の登場]]></title><description><![CDATA[details要素のコンテンツ部分にスタイルを適用できる::details-content擬似要素がBaseline 2025に加わりました。details要素を用いたスタイリングの守備範囲が広がっただけではなく、アニメーションの適用も容易になりました。]]></description><link>https://k8o.me/blog/details-content</link><guid isPermaLink="true">https://k8o.me/blog/details-content</guid><category><![CDATA[Baseline 2025]]></category><category><![CDATA[CSS]]></category><category><![CDATA[details-content]]></category><category><![CDATA[<details>]]></category><pubDate>Sun, 26 Oct 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[WebRTC Encoded TransformでWebRTCの一連の処理にメスを入れる]]></title><description><![CDATA[WebRTC Encoded Transformは、WebRTCの送信・受信パイプラインにカスタム変換処理を挿入できる機能です。RTCRtpScriptTransformを使用してWorkerスレッドでエンコード済みフレームを直接操作し、E2EEやカスタムエフェクトを実装できます。]]></description><link>https://k8o.me/blog/webrtc-encoded-transform</link><guid isPermaLink="true">https://k8o.me/blog/webrtc-encoded-transform</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[webrtc]]></category><category><![CDATA[webrtc-encoded-transform]]></category><pubDate>Sat, 25 Oct 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[parseHtmlUnsafeでHTMLをDocumentに変換する]]></title><link>https://k8o.me/blog/parse-html-unsafe</link><guid isPermaLink="true">https://k8o.me/blog/parse-html-unsafe</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[HTML]]></category><category><![CDATA[parseHTMLUnsafe]]></category><pubDate>Sat, 11 Oct 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[要素のレイアウトとレンダリングを必要なタイミングまでスキップさせるCSSのcontent-visibilityプロパティ]]></title><description><![CDATA[CSSのcontent-visibilityプロパティは、要素のレンダリングを制御しパフォーマンスを向上させる機能です。auto値を指定することで、ビューポート外の要素のレイアウト処理を必要なタイミングまでスキップできます。]]></description><link>https://k8o.me/blog/content-visibility</link><guid isPermaLink="true">https://k8o.me/blog/content-visibility</guid><category><![CDATA[Baseline 2025]]></category><category><![CDATA[CSS]]></category><category><![CDATA[content-visibility]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[リソースへのリクエスト前にドメイン名を解決するdns-prefetch]]></title><description><![CDATA[linkタグのrel属性にdns-prefetchを付与すると、リソースへのリクエストの前に対象のドメイン名のDNSルックアップを行うよう指示できます。これにより、実際にそのドメインからリソースを取得する際の待機時間が短縮され、ページのパフォーマンスが向上します。]]></description><link>https://k8o.me/blog/link-rel-dns-prefetch</link><guid isPermaLink="true">https://k8o.me/blog/link-rel-dns-prefetch</guid><category><![CDATA[Baseline 2025]]></category><category><![CDATA[HTML]]></category><category><![CDATA[<link rel="dns-prefetch">]]></category><pubDate>Sun, 21 Sep 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[URLのパターンマッチを簡単にするURLPattern API]]></title><description><![CDATA[URLPattern APIは、URLのパターンマッチを簡単に行うためのAPIです。従来のRegExpによる実装と比べて、より直感的かつ正確にパス変数の抽出やURLの照合ができます。]]></description><link>https://k8o.me/blog/urlpattern</link><guid isPermaLink="true">https://k8o.me/blog/urlpattern</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[正規表現]]></category><category><![CDATA[URLPattern]]></category><pubDate>Sun, 21 Sep 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[Uint8Arrayとbase64、Hex（16進数）の相互変換]]></title><description><![CDATA[Uint8Arrayとbase64、Hex（16進数）の相互変換を行うメソッドがBaseline 2025で追加されました。fromBase64やtoHexなどメソッドが標準で扱えるようになり、複雑な変換処理を自作せず安全かつ簡潔に実装できます。]]></description><link>https://k8o.me/blog/uint8array-base64-hex</link><guid isPermaLink="true">https://k8o.me/blog/uint8array-base64-hex</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[Uint8Array to/from base64 and hex]]></category><pubDate>Sun, 21 Sep 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[Shadow DOM境界を跨いだ選択範囲の処理を可能にするgetComposedRanges]]></title><description><![CDATA[getComposedRangesは、Shadow DOM境界を跨いだ選択範囲を取得できるSelectionオブジェクトのメソッドです。ShadowRootを指定することで、カプセル化された要素も正確に選択範囲として扱えます。]]></description><link>https://k8o.me/blog/composed-ranges</link><guid isPermaLink="true">https://k8o.me/blog/composed-ranges</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[getComposedRanges]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[OIDCを利用したnpmパッケージの公開が可能になったので、Changeset×GitHub Actionsで試してみる]]></title><description><![CDATA[npmパッケージの公開で利用可能になったOIDC認証を、ChangesetsとGitHub Actionsを組み合わせて実装する方法を紹介します。従来のAccess Tokenによる認証と比べて、定期的な更新作業が不要になり効率的な開発環境を構築できます。設定も簡単なので、npmパッケージを公開する方にはぜひおすすめしたい認証方法です。]]></description><link>https://k8o.me/blog/npm-trusted-publishing-for-npm-packages</link><guid isPermaLink="true">https://k8o.me/blog/npm-trusted-publishing-for-npm-packages</guid><category><![CDATA[npm]]></category><category><![CDATA[oidc]]></category><category><![CDATA[packages]]></category><category><![CDATA[GitHub Actions]]></category><category><![CDATA[Changesets]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[sb.mockでStorybookで利用するモジュールをモックしよう！]]></title><description><![CDATA[Storybook v9.1.0で新たに導入されたsb.mock機能により、モジュールのモックがこれまで以上に簡単に行えるようになりました。sb.mockはStorybookを活用したテストの取り組みやすさを大幅に向上させる画期的な新機能です。ぜひ活用してみてください。]]></description><link>https://k8o.me/blog/sb-mock</link><guid isPermaLink="true">https://k8o.me/blog/sb-mock</guid><category><![CDATA[React]]></category><category><![CDATA[storybook]]></category><category><![CDATA[test]]></category><category><![CDATA[mock]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[スペルミス・文法エラーに対してスタイルを設定する::spelling-errorと::grammar-error]]></title><description><![CDATA[::spelling-errorと::grammar-error擬似要素は、ブラウザが検出したスペルミスや文法エラーにスタイルを適用できる機能です。デフォルトの下線表示をカスタマイズし、ユーザー体験を向上させられます]]></description><link>https://k8o.me/blog/spelling-grammar-error</link><guid isPermaLink="true">https://k8o.me/blog/spelling-grammar-error</guid><category><![CDATA[Baseline 2025]]></category><category><![CDATA[CSS]]></category><category><![CDATA[spelling-grammar-error]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[CSS Custom Highlight APIで任意の範囲のテキストをハイライトする]]></title><description><![CDATA[CSS Custom Highlight APIはDOMを変更せずに任意のテキスト範囲をハイライトする機能です。JavaScriptでRangeオブジェクトを定義し、Highlightオブジェクトとして登録後、CSSの::highlight擬似要素でスタイリングして特定の範囲をハイライトします。]]></description><link>https://k8o.me/blog/highlight</link><guid isPermaLink="true">https://k8o.me/blog/highlight</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[CSS]]></category><category><![CDATA[highlight]]></category><pubDate>Mon, 15 Sep 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[CSSのabs()とsign()関数で数値の符号を使ったスタイリングを行う]]></title><description><![CDATA[数値の符号を扱うCSS 値関数abs()とsign()がChrome138・Edge138でBaseline 2025に追加されました。absは絶対値の取得、signは符号の判定ができる便利な関数です。]]></description><link>https://k8o.me/blog/abs-sign</link><guid isPermaLink="true">https://k8o.me/blog/abs-sign</guid><category><![CDATA[Baseline 2025]]></category><category><![CDATA[CSS]]></category><category><![CDATA[abs]]></category><category><![CDATA[sign]]></category><pubDate>Thu, 26 Jun 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[複数のSuspenseの表示を制御するSuspenseList]]></title><description><![CDATA[React18の実験的機能SuspenseListを使って複数のSuspenseの読み込み順序と表示パターンを制御する方法を解説します。レイアウトシフトの削減とUX向上を実現するコンポーネントです。]]></description><link>https://k8o.me/blog/suspense-list</link><guid isPermaLink="true">https://k8o.me/blog/suspense-list</guid><category><![CDATA[React]]></category><category><![CDATA[suspense]]></category><category><![CDATA[suspense-list]]></category><pubDate>Sat, 21 Jun 2025 10:30:00 GMT</pubDate></item><item><title><![CDATA[print-color-adjustで印刷時の色調整を制御する]]></title><description><![CDATA[print-color-adjustプロパティをexactに設定することで、印刷時にブラウザが自動的に色やコントラストを調整するのを防ぐことができます。印刷時にデザインに意図が伝わらない場合に利用できる有用な機能の一つです。]]></description><link>https://k8o.me/blog/print-color-adjust</link><guid isPermaLink="true">https://k8o.me/blog/print-color-adjust</guid><category><![CDATA[Baseline 2025]]></category><category><![CDATA[CSS]]></category><category><![CDATA[print-color-adjust]]></category><pubDate>Sat, 07 Jun 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[【TSKaigi】初めて登壇しました！]]></title><description><![CDATA[初めてカンファレンスに参加・登壇してきました。参加したのはTSKaigi 2025で、多くの素晴らしい体験ができました。登壇したトークの内容や、参加しての感想を共有します。]]></description><link>https://k8o.me/blog/for-the-first-time-in-forever</link><guid isPermaLink="true">https://k8o.me/blog/for-the-first-time-in-forever</guid><category><![CDATA[TypeScript]]></category><category><![CDATA[daily]]></category><category><![CDATA[TSKaigi]]></category><pubDate>Sat, 31 May 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[<dialog>要素を閉じるように要求するrequestClose]]></title><description><![CDATA[HTMLDialogElementのrequestCloseメソッドは<dialog>要素を閉じるように要求します。「要求」とは、closeメソッドのように即座にcloseイベントを発行して閉じるのではなく、cancelイベントを介して閉じることを意味します。これにより、ダイアログを閉じる前に任意の処理を挟むことが可能になります。]]></description><link>https://k8o.me/blog/requestclose</link><guid isPermaLink="true">https://k8o.me/blog/requestclose</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[dialog]]></category><category><![CDATA[requestclose]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[React19で変化したuseReducerの型から学ぶTypeScriptの型推論]]></title><description><![CDATA[@types/reactのバージョン19ではuseReducerの型の変更が行われました。これまではreducer関数から状態の型を推論していましたが、バージョン19からはreducer関数と初期値から状態の型を推論する形に変更されました。この記事では、この変更を元にTypeScriptにおける型の推論方法について提案します。]]></description><link>https://k8o.me/blog/react19-usereducer-ts-type-inference</link><guid isPermaLink="true">https://k8o.me/blog/react19-usereducer-ts-type-inference</guid><category><![CDATA[TypeScript]]></category><category><![CDATA[React]]></category><category><![CDATA[TSKaigi]]></category><category><![CDATA[useReducer]]></category><category><![CDATA[@types/react]]></category><pubDate>Sat, 24 May 2025 14:00:00 GMT</pubDate></item><item><title><![CDATA[withキーワードを使用したJSONモジュールのインポート]]></title><description><![CDATA[ESMでwithキーワードを利用してJSONをインポートする方法について解説します。Import Attributeという属性を利用して、JSONモジュールを安全にJavaScriptから利用できるようになりました。]]></description><link>https://k8o.me/blog/json-modules</link><guid isPermaLink="true">https://k8o.me/blog/json-modules</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[json-modules]]></category><category><![CDATA[with]]></category><category><![CDATA[import]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[文字列に潜む特殊文字を構文として解釈されないように置き換えるRegExp.escape]]></title><description><![CDATA[RegExpオブジェクトを生成するときに正規表現のテキストをそのままの文字として扱いたい時があります。これまでは手動でエスケープする必要がありましたが、RegExp.escapeを使うことで構文として解釈されないような文字列に変換し、文字通りの並びとして検索できます。RegExp.escapeを使ってエスケープ漏れとは縁のない生活を送りましょう。]]></description><link>https://k8o.me/blog/regexp-escape</link><guid isPermaLink="true">https://k8o.me/blog/regexp-escape</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[正規表現]]></category><category><![CDATA[RegExp]]></category><category><![CDATA[RegExp.escape]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[CSS グラデーションの新仕様：単色カラーストップの導入]]></title><link>https://k8o.me/blog/single-color-gradients</link><guid isPermaLink="true">https://k8o.me/blog/single-color-gradients</guid><category><![CDATA[color]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[CSS Gradients]]></category><category><![CDATA[CSS]]></category><pubDate>Mon, 21 Apr 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[Iteratorに対してmapやfilterのようなヘルパー関数を作用させる]]></title><description><![CDATA[Baseline 2025でIterator Helpersが導入され、Iteratorオブジェクトにmapやfilterなどの便利な操作を作用できるようになりました。これにより、配列への変換が不要になり、コードの可読性向上と遅延評価によるパフォーマンス改善が期待できます。]]></description><link>https://k8o.me/blog/iterator-methods</link><guid isPermaLink="true">https://k8o.me/blog/iterator-methods</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[Iterator Helpers]]></category><pubDate>Mon, 06 Apr 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[16bit浮動小数点が使える！Float16Array]]></title><description><![CDATA[Float16ArrayがBaselineに追加されたことで、16bitの浮動小数点を扱えるようになりました。機械学習やグラフィックス用途などで威力を発揮する新しいTypedArrayについて解説します。]]></description><link>https://k8o.me/blog/float16array</link><guid isPermaLink="true">https://k8o.me/blog/float16array</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[Float16Array]]></category><pubDate>Sun, 13 Apr 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[Atomicsで共有メモリ上のデータを安全に取り扱う]]></title><description><![CDATA[AtomicsはSharedArrayBufferなどで定義された共有メモリ上のデータを安全に操作するための仕組みで、不可分操作や待機・通知による制御を提供します。新たに追加されたAtomics.pauseにより、スピンロック中のリソース最適化も可能になりました。]]></description><link>https://k8o.me/blog/atomics-pause</link><guid isPermaLink="true">https://k8o.me/blog/atomics-pause</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[Atomics]]></category><category><![CDATA[Atomics.pause]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[任意のデータをコピー&ペーストするClipboard API]]></title><description><![CDATA[Clipboard APIは、navigator.clipboardを通じてクリップボードへの読み書きを非同期で行うAPIです。テキストや画像のコピー・貼り付けに対応し、ClipboardItemを使えばMIMEタイプ別のデータ操作も可能です。]]></description><link>https://k8o.me/blog/async-clipboard</link><guid isPermaLink="true">https://k8o.me/blog/async-clipboard</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[Baseline 2024]]></category><category><![CDATA[Clipboard API]]></category><category><![CDATA[ClipboardItem]]></category><category><![CDATA[ClipboardItem supports]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[画面のスリープを防ぐScreen Wake Lock API]]></title><description><![CDATA[Baseline 2025にScreen Wake Lock APIが追加されました。Screen Wake Lock APIは、デバイスの画面がスリープ状態に入るのを防ぐためのAPIです。この機能により処理が行われていない状態でも継続的に画面を表示する体験を実現可能になりました。]]></description><link>https://k8o.me/blog/screen-wake-lock</link><guid isPermaLink="true">https://k8o.me/blog/screen-wake-lock</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[Screen Wake Lock]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[Popover APIを使ってJavaScriptなしでツールチップやドロップダウンメニューを実装する]]></title><description><![CDATA[Popover APIは、ツールチップやドロップダウンメニューをJavaScriptなしで実装できるAPIで、Baseline 2025に追加されました。表示するコンテンツにpopover属性を渡し、その要素をpopovertargetで制御します。シンプルなHTMLとCSSで手軽に機能に富んだポップオーバーを作成する方法を学びます。]]></description><link>https://k8o.me/blog/popover</link><guid isPermaLink="true">https://k8o.me/blog/popover</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[Popover API]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[Intl.DurationFormatで期間をlocaleに基づいて表現する]]></title><description><![CDATA[Intl.DurationFormatはlocaleに応じた形式で期間を表現するIntlの新機能で、Baseline 2025で利用可能です。formatメソッドで文字列として期間を取得でき、formatToPartsメソッドでは各部分をオブジェクトの配列として取得できます。言語による期間の表現の違いを標準に従って簡単扱いましょう。]]></description><link>https://k8o.me/blog/intl-duration-format</link><guid isPermaLink="true">https://k8o.me/blog/intl-duration-format</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[Intl]]></category><category><![CDATA[Intl.DurationFormat]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[contenteditableな要素でテキストだけを編集可能にする]]></title><description><![CDATA[Baseline 2025でcontenteditableにplaintext-onlyを渡せるようになりました。plaintext-onlyを指定すると、要素内での編集が可能な状態でリッチテキスト（太字やリンクなど）のスタイルが適用されないようになります。従来から存在するtrueを指定した時の挙動を復習してから挙動の違いを確認します。]]></description><link>https://k8o.me/blog/contenteditable-plaintextonly</link><guid isPermaLink="true">https://k8o.me/blog/contenteditable-plaintextonly</guid><category><![CDATA[Baseline 2025]]></category><category><![CDATA[contenteditable]]></category><category><![CDATA[HTML]]></category><category><![CDATA[グローバル属性]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[関数の同期・非同期を気にせず処理するPromise.tryとは]]></title><description><![CDATA[Promise.tryは、同期・非同期関数を区別せず手続きを進めさせるBaseline 2025で追加されたメソッドです。同期・非同期が混在する処理に有効で、キャッシュを利用する関数などで一貫したPromiseの形で結果を扱えます。同期・非同期が混在する関数の複雑さとは別れを告げましょう。]]></description><link>https://k8o.me/blog/promise-try</link><guid isPermaLink="true">https://k8o.me/blog/promise-try</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Baseline 2025]]></category><category><![CDATA[Promise]]></category><category><![CDATA[Promise.try]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[色彩検定UC級に合格しました！]]></title><link>https://k8o.me/blog/color-certification-uc</link><guid isPermaLink="true">https://k8o.me/blog/color-certification-uc</guid><category><![CDATA[color]]></category><category><![CDATA[daily]]></category><pubDate>Tue, 24 Dec 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[色覚タイプとその分類]]></title><description><![CDATA[色の見え方が多数に比べ大きく異なる「色覚特性」を先天的に持つ人は日本人男性全体の約5%存在します。この記事では色覚特性とその分類について紹介します。]]></description><link>https://k8o.me/blog/color-perception</link><guid isPermaLink="true">https://k8o.me/blog/color-perception</guid><category><![CDATA[a11y]]></category><category><![CDATA[color]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[色のコントラスト比は重要だけどどうやって求めるんだっけ？]]></title><description><![CDATA[WCAG 2.1では背景色とテキスト色のコントラスト比についての達成基準が定められています。コントラスト比とは何でしょうか？コントラスト比の計算はツールを用いることが多いので、その計算方法を理解せずに検査している方は少なくないです。この記事ではコントラスト比の計算方法を理解して、そこから読み取れる重要な情報を紐解きます。]]></description><link>https://k8o.me/blog/color-contrast</link><guid isPermaLink="true">https://k8o.me/blog/color-contrast</guid><category><![CDATA[color contrast]]></category><category><![CDATA[a11y]]></category><category><![CDATA[WCAG]]></category><category><![CDATA[W3C]]></category><category><![CDATA[color]]></category><pubDate>Sat, 28 Sep 2024 00:00:00 GMT</pubDate></item><item><title><![CDATA[Reactの新しいルーティングライブラリ、TanStackRouterを学ぶ]]></title><description><![CDATA[Reactのルーティングには主にNextjs等のフレームワークやReact Routeが利用されます。この記事では新たなルーティング手法の選択肢としてTanStack Routerを紹介します。TanStack Routerでは最初に挙げた選択肢の使い心地を踏襲しつつ、ルーティングやサーチパラメータの型安全性や他にない便利な機能を提供します。]]></description><link>https://k8o.me/blog/tanstack-router-introduction</link><guid isPermaLink="true">https://k8o.me/blog/tanstack-router-introduction</guid><category><![CDATA[TypeScript]]></category><category><![CDATA[React]]></category><category><![CDATA[TanStack Router]]></category><pubDate>Sat, 15 Nov 2025 00:00:00 GMT</pubDate></item><item><title><![CDATA[特定のケースではsatisfies演算子で型が絞り込まれてしまう？？？]]></title><description><![CDATA[TypeScript 4.9で追加されたsatisfies演算子の予期しない挙動について解説します。リテラル型のユニオンで制約を課された場合に型が絞り込まれる理由と、その仕組みを詳しく説明します。]]></description><link>https://k8o.me/blog/typescript-satisfies-narrowing</link><guid isPermaLink="true">https://k8o.me/blog/typescript-satisfies-narrowing</guid><category><![CDATA[TypeScript]]></category><category><![CDATA[satisfies]]></category><pubDate>Fri, 16 Jan 2026 00:00:00 GMT</pubDate></item><item><title><![CDATA[Reactコンポーネントでchildrenに対してpropsを渡す]]></title><description><![CDATA[Reactで子コンポーネントにpropsを渡す2つの方法を紹介します。レガシーなcloneElement APIと、推奨されるrender propパターンの違いを解説し、ツールチップの実装例を通じて実践的な使い方を学びます。]]></description><link>https://k8o.me/blog/react-children-props</link><guid isPermaLink="true">https://k8o.me/blog/react-children-props</guid><category><![CDATA[React]]></category><category><![CDATA[cloneElement]]></category><category><![CDATA[render props]]></category><pubDate>Fri, 16 Jan 2026 00:00:00 GMT</pubDate></item></channel></rss>