# k8o
WebフロントエンドとTypeScriptに興味があり、特にフロントエンドとデザインの境界に関心があります。
現在、デザインを中心に学びながら、別の角度からフロントエンドの理解を深めています。

## Forge
ブログ、デザインなど、思考やアイデアを形にする場。発想を練り、磨きながら創造を深めていきます。

### Blog
k8oのブログです。ジャンルを問わず、身の回りのことを書きます。


#### Atomics.waitAsyncで非同期に共有メモリ上のデータを待機する
Baseline 2025にAtomics.waitAsyncが追加されました。Atomics.waitの非同期版のメソッドで、メインスレッドで共有メモリ上のデータを待機したい場合に便利です。
    

#### input要素でディレクトリを扱うwebkitdirectory属性
input要素のwebkitdirectory属性がBaseline 2025に追加されました。webkitdirectory属性を利用することで、input要素のtype="file"でディレクトリを選択できるようになります。
    

#### UIが遷移するアニメーションを簡単にするView Transition API
View Transition APIがBaseline 2025に追加され、Web上のUI遷移を簡単にアニメーション化可能になりました。異なるページ間の遷移や同一ページ内のDOM更新時に、要素の位置やスタイルの変化をアニメーション化できます。CSSによるスタイル制御も豊富に用意されており、柔軟なカスタマイズが可能です。
    

#### details要素に命を吹き込む::details-content擬似要素の登場
details要素のコンテンツ部分にスタイルを適用できる::details-content擬似要素がBaseline 2025に加わりました。details要素を用いたスタイリングの守備範囲が広がっただけではなく、アニメーションの適用も容易になりました。
    

#### WebRTC Encoded TransformでWebRTCの一連の処理にメスを入れる
WebRTC Encoded Transformは、WebRTCの送信・受信パイプラインにカスタム変換処理を挿入できる機能です。RTCRtpScriptTransformを使用してWorkerスレッドでエンコード済みフレームを直接操作し、E2EEやカスタムエフェクトを実装できます。
    

#### 要素のレイアウトとレンダリングを必要なタイミングまでスキップさせるCSSのcontent-visibilityプロパティ
CSSのcontent-visibilityプロパティは、要素のレンダリングを制御しパフォーマンスを向上させる機能です。auto値を指定することで、ビューポート外の要素のレイアウト処理を必要なタイミングまでスキップできます。
    

#### リソースへのリクエスト前にドメイン名を解決するdns-prefetch
linkタグのrel属性にdns-prefetchを付与すると、リソースへのリクエストの前に対象のドメイン名のDNSルックアップを行うよう指示できます。これにより、実際にそのドメインからリソースを取得する際の待機時間が短縮され、ページのパフォーマンスが向上します。
    
#### parseHtmlUnsafeでHTMLをDocumentに変換する

#### URLのパターンマッチを簡単にするURLPattern API
URLPattern APIは、URLのパターンマッチを簡単に行うためのAPIです。従来のRegExpによる実装と比べて、より直感的かつ正確にパス変数の抽出やURLの照合ができます。
    

#### Uint8Arrayとbase64、Hex（16進数）の相互変換
Uint8Arrayとbase64、Hex（16進数）の相互変換を行うメソッドがBaseline 2025で追加されました。fromBase64やtoHexなどメソッドが標準で扱えるようになり、複雑な変換処理を自作せず安全かつ簡潔に実装できます。
    

#### Shadow DOM境界を跨いだ選択範囲の処理を可能にするgetComposedRanges
getComposedRangesは、Shadow DOM境界を跨いだ選択範囲を取得できるSelectionオブジェクトのメソッドです。ShadowRootを指定することで、カプセル化された要素も正確に選択範囲として扱えます。
    

#### OIDCを利用したnpmパッケージの公開が可能になったので、Changeset×GitHub Actionsで試してみる
npmパッケージの公開で利用可能になったOIDC認証を、ChangesetsとGitHub Actionsを組み合わせて実装する方法を紹介します。従来のAccess Tokenによる認証と比べて、定期的な更新作業が不要になり効率的な開発環境を構築できます。設定も簡単なので、npmパッケージを公開する方にはぜひおすすめしたい認証方法です。
    

#### sb.mockでStorybookで利用するモジュールをモックしよう！
Storybook v9.1.0で新たに導入されたsb.mock機能により、モジュールのモックがこれまで以上に簡単に行えるようになりました。sb.mockはStorybookを活用したテストの取り組みやすさを大幅に向上させる画期的な新機能です。ぜひ活用してみてください。
    

#### スペルミス・文法エラーに対してスタイルを設定する::spelling-errorと::grammar-error
::spelling-errorと::grammar-error擬似要素は、ブラウザが検出したスペルミスや文法エラーにスタイルを適用できる機能です。デフォルトの下線表示をカスタマイズし、ユーザー体験を向上させられます
    

#### CSS Custom Highlight APIで任意の範囲のテキストをハイライトする
CSS Custom Highlight APIはDOMを変更せずに任意のテキスト範囲をハイライトする機能です。JavaScriptでRangeオブジェクトを定義し、Highlightオブジェクトとして登録後、CSSの::highlight擬似要素でスタイリングして特定の範囲をハイライトします。
    

#### CSSのabs()とsign()関数で数値の符号を使ったスタイリングを行う
数値の符号を扱うCSS 値関数abs()とsign()がChrome138・Edge138でBaseline2025に追加されました。absは絶対値の取得、signは符号の判定ができる便利な関数です。
    

#### 複数のSuspenseの表示を制御するSuspenseList
React18の実験的機能SuspenseListを使って複数のSuspenseの読み込み順序と表示パターンを制御する方法を解説します。レイアウトシフトの削減とUX向上を実現するコンポーネントです。
    

#### print-color-adjustで印刷時の色調整を制御する
print-color-adjustプロパティをexactに設定することで、印刷時にブラウザが自動的に色やコントラストを調整するのを防ぐことができます。印刷時にデザインに意図が伝わらない場合に利用できる有用な機能の一つです。
    

#### 【TSKaigi】初めて登壇しました！
初めてカンファレンスに参加・登壇してきました。参加したのはTSKaigi 2025で、多くの素晴らしい体験ができました。登壇したトークの内容や、参加しての感想を共有します。
    

#### <dialog>要素を閉じるように要求するrequestClose
HTMLDialogElementのrequestCloseメソッドは<dialog>要素を閉じるように要求します。「要求」とは、closeメソッドのように即座にcloseイベントを発行して閉じるのではなく、cancelイベントを介して閉じることを意味します。これにより、ダイアログを閉じる前に任意の処理を挟むことが可能になります。
    

#### React19で変化したuseReducerの型から学ぶTypeScriptの型推論
@types/reactのバージョン19ではuseReducerの型の変更が行われました。これまではreducer関数から状態の型を推論していましたが、バージョン19からはreducer関数と初期値から状態の型を推論する形に変更されました。この記事では、この変更を元にTypeScriptにおける型の推論方法について提案します。
    

#### withキーワードを使用したJSONモジュールのインポート
ESMでwithキーワードを利用してJSONをインポートする方法について解説します。Import Attributeという属性を利用して、JSONモジュールを安全にJavaScriptから利用できるようになりました。
    

#### 文字列に潜む特殊文字を構文として解釈されないように置き換える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
Baseline 2025にScreen Wake Lock APIが追加されました。Screen Wake Lock APIは、デバイスの画面がスリープ状態に入るのを防ぐためのAPIです。この機能により処理が行われていない状態でも継続的に画面を表示する体験を実現可能になりました。
    

#### Popover APIを使ってJavaScriptなしでツールチップやドロップダウンメニューを実装する
Popover APIは、ツールチップやドロップダウンメニューをJavaScriptなしで実装できるAPIで、Baseline 2025に追加されました。表示するコンテンツに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では最初に挙げた選択肢の使い心地を踏襲しつつ、ルーティングやサーチパラメータの型安全性や他にない便利な機能を提供します。
    

### Talks
過去の登壇内容をまとめたページです。講演のテーマや資料へのリンクを掲載しています。

### ArteOdyssey
k8o.meで利用しているデザインシステムを紹介します。コンポーネントやデザイントークンを確認できます。

## Assist
制作をサポートするツール群。創作をスムーズに進めるための実用的な機能を提供します。

### もじカウント
テキストの文字数を数えます。

### 日本語校正くん
日本語で書かれた文章の誤字や脱字、文法ミス、表現の改善ポイントをチェックします。

### 基数チェンジャー
2進数・8進数・10進数・16進数を相互に変換します。

### コントラストチェッカー
選択した2つの色からコントラスト比を計算します。

### カラーコード職人
RGBとHEXのように、特定の色の異なる表現を確認します。

### かどまるラボ
角丸を変化させてお気に入りの図形を探しましょう。

### SQLテーブルメーカー
データベースのテーブルを作成するSQL文を発行します。

### Quizzes
色々なジャンルのクイズを出します。