azukiazusa のテックブログ2

Web フロントエンド要素多めの技術ブログです。週に1度更新されます。

`calc-size()` や `interpolate-size: allow-keywords;` で `height: auto;` な要素のアニメーションをサポートする

CSS において height プロパティを 0 から auto に変化させた場合に、アニメーションが適用されないのはよく知られた問題です。この記事では calc-size() 関数を使って height: auto; な要素のアニメーショ

アクセシビリティが考慮された React Aria のドラッグアンドドロップ

React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹

フィーチャーフラグの標準規格 OpenFeature の React SDK を試してみる

OpenFeature はフィーチャーフラグのオープンな規格です。特定のベンダーに依存しない API や SDK が提供されています。フィーチャーフラグの API の標準化により、ベンダーロックインを回避し、フィーチャーフラグのツールを自由

React Aria でアクセシブルなコンポーネントを作成する

React Aria は Adobe が提供する React 用のコンポーネントライブラリです。スタイルを持たずに UI の機能やロジックのみを提供するいわゆるヘッドレス UI ライブラリであり、特に React Aria はアクセシビリテ

@axe-core/playwright によるアクセシビリティテストの自動化

axe-core は axe というアクセシビリティテストツールのコアエンジンで、オープンソースとして提供されています。この記事では、E2E テストフレームワークの Playwright と axe-core を組み合わせて使用して、アクセ

box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない

フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングのカスタマイズに `box-shadow` プロパティを使うことがありますが、ハイコントラストモードではフォーカス

CSS の `reading-flow` プロパティで要素の読み上げ順を制御する

Flex や Grid コンテナ内では要素の見た目上の順序と DOM 上の順序が異なることがあります。このような状態はキーボード操作やスクリーンリーダーなどの支援技術を使うユーザーにとって混乱を招く可能性があります。CSS の `readi

CSS でランダムな値を扱う `random()` と `random-item()` 関数

`random()` と `random-item()` 関数は CSS でランダムな値を扱うための関数です。`random()` 関数は最小値と最大値を引数に取り、その範囲内のランダムな数値を返します。`random-item()` 関数

新しいビルドツールの Farm

Farm は Rust 製の新しいビルドツールです。パフォーマンスを重視して設計されており、Vite と互換性のある JavaScript プラグインをサポートしているという特徴があります。バンドルの戦略には Partial Bundlin

CSS の `@property` ルールでカスタムプロパティを定義する

CSS の @property ルールを使うことで、CSS のカスタムプロパティを定義できます。カスタムプロパティを定義することでプロパティの構文チェック、デフォルト値の設定、プロパティが値を継承するかどうかの設定などが可能になります。カス

スタイルの適用範囲を限定する CSS の `@scope` ルール

`@scope` アットルールは特定のセレクタの範囲に限定したスタイルを適用するためのルールです。`@scope` のルールセットに 1 つの CSS セレクタを指定すると、そのセレクタがスコープのルートとなります。`@scope` ルール

CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する

CSS の `@layer` ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。`@layer` ルールを使用することでスタイルの記述順や詳細度に

TypeScript で配列の要素を取得する時 `.at()` メソッドを使うとより安全

JavaScript で配列にアクセスする際、配列の長さを超えるインデックスを指定すると `undefined` が返されることがあります。しかし、TypeScript の型定義上では、配列の長さを超えるインデックスを指定しても `unde

CSS で条件分岐を行う `@when/@else` ルール

`@when/@else` アットルールは条件付きスタイルをまとめて記述するためのルールです。`@media` や `@support` の条件を `@when` にわたすことで、`true` の場合には `@when` ブロック内のスタイ

SVG アイコンの表示に mask-image CSS プロパティを使用する

mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS

Chrome の組み込み AI Gemini Nano を試してみる

Chrome 126 から Gemini Nano という AI がデスクトップクライアントに組み込まれる予定です。Gemini Nano は Google の AI モデルの中で最も小さいモデルです。デスクトップクライアントに直接組み込ま

CSS トランジションの開始時のスタイルを定義する `@starting-style` ルール

`@starting-style` ルールは、CSS トランジションの開始時のスタイルを定義するためのアットルールです。CSS トランジションの既定のルールでは前回のスタイル変更イベントでレンダリングされていなかった要素では、アニメーション

scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する

子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの

SvelteKit チュートリアル - 記事投稿サイトを作ってみよう

SvelteKit は Svelte と Vite で構築たフレームワークです。SvelteKit は Web アプリケーションを開発するために必要な機能を提供します。この記事では、SvelteKit を使用して記事投稿サイトを作成するチュ

Svelte v5 で導入されるスニペット機能

Svelte v5 ではスニペットと呼ばれる新しい機能が導入されます。スニペットとは、コンポーネント内で使用できる再利用可能なマークアップのことです。`#snippet` ディレクティブを使用してスニペットを定義し、引数を受け取ることができ

楽観的更新を行うための React の useOptimistic フック

React v19 では楽観的更新を行うための `useOptimistic` フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対

Svelte v5 におけるイベントハンドラの変更点

Svelte v5 では、イベントハンドラの書き方が一新され、いくつか非推奨となった書き方があります。この記事では、Svelte v4 と Svelte v5 のイベントハンドラの書き方の違いについて見ていきます。

Svelte v5 で導入された Runes によるリアクティビティシステム

Svelte v5 で導入された Runes によるリアクティビティシステムについて解説します。従来の Svelte は純粋な JavaScript のコードのみを使用してリアクティビティを実現していましたが、アプリケーションが大規模になる

エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS

Effect-TS は、開発者が複雑なエラーや非同期処理をより安全に開発できるようにすることを目的とした TypeScript ライブラリです。Effect-TS は、TypeScript の型システムを活用して、本番のアプリケーションにお

Next.js 型安全なルーティングを使う

Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。

React v19 から forwardRef が不要になる

今までの React では `ref` をコンポーネントの Props として渡す際に、`forwardRef` を使ってラップする必要がありました。しかし、React v19 からは `forwardRef` が不要になり、`ref` を

Remix v2.9 で導入された Single Fetch

Remix v2.9 で導入された Single Fetch はクライアントサイドでのページ遷移が行われた際に、サーバーへの複数の HTTP リクエストを並行して行う代わりに、1 つの HTTP リクエストを実行しまとめてレスポンスを返す機

Math.max() にスプレッド構文で大きな配列を渡すとエラーになる恐れがある

`Math.max()` は、引数に渡された数値のうち最大のものを返す JavaScript の組み込み関数です。この関数は任意の数の引数を受け取るので、配列最大値を求めたい場合にはスプレッド構文で展開して渡す使い方が一般的です。しかし、引

コンテナ要素に基づく相対的な CSS の単位（cqw, cqh, cqi, cqb, cqmin, cqmax）

コンテナクエリ単位とは、コンテナ要素に基づいてスタイルを定義するための相対的な長さを表す単位です。例えば `1cqw` はコンテナ要素の幅の 1% に相当します。

CSS でファイルのアップロードボタンをカスタマイズする ::file-selector-button 疑似要素

`::file-selector-button` 疑似要素を使用することで、`` 要素のデフォルトのボタンのスタイルをカスタマイズできます。現在すべてのモダンブラウザでサポートされています。

ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning

CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のよう

Promise や Context から値を読み取る use React フック

React の Canary および experimental チャンネルでのみ利用可能な `use` フックについて解説します。`use` フックは Promise や Context から値を読み取るためのフックで、Promise の値

親要素のスタイルの基づいてスタイルを適用するコンテナスタイルクエリー CSS

CSS の @container ルールは、コンテナ（親要素）の特性に基づいてスタイルを適用するためのルールです。コンテナースタイルクエリーはコンテナサイズクエリーとコンテナスタイルクエリーの 2 種類に分類されます。コンテナスタイルクエリ

CSS: ダークモードで値を切り替える light-dark 関数

light-dark 関数は CSS のカラー関数で、引数に 2 つのカラー値を取り、ライトモードのときには 1 つ目の値をを、ダークモードのときには 1 つ目の値を返します。 `color-scheme` プロパティの値もしくはユーザー

CSS から React コンポーネントを生成する MistCSS

MistCSS は CSS in JS になぞらえた JS from CSS というコンセプトで、CSS から React コンポーネントを生成するツールです。ピュアな CSS を記述できるので、学習コストが低い、パフォーマンスに影響がない

単体テストでスクリーンリーダーをシミュレートする Virtual Screen Reader

Virtual Screen Reader は単体テストのためにスクリーンリーダをシミュレートするライブラリです。このライブラリを使うことでマウスやキボードの操作をテストするように、スクリーンリーダーにより期待する読み上げが行われるかどうか

TypeScript 5.5 で関数による型の絞り込みが改善される

従来までは、TypeScript で関数の引数の型を絞り込んだ結果を返す場合には、ユーザー定義型ガードとして `x is string` のような形式で型ガードを定義する必要がありました。TypeScript 5.5 では自動で型の絞り込み

フォームのアクセシビリティを考える

今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘

CSS メディアクエリで比較演算子が使える

CSS のメディアクエリで比較演算子（``, `=`）が使えます。この記法を Range Syntax と呼びます。この記法は従来の `min-width` や `max-width` といった記法と比べて、より直感的に記述できるため便利で

React Server Components を使うためのミニマムなフレームワーク Waku

Waku は小規模から中規模の React プロジェクトを構築するためのミニマムなフレームワークです。従来は React Server Components を使うためには Next.js のような比較的大規模なフレームワークが必要でした。