Blog

Web開発とフロントエンド技術に関する記事を探索しましょう

React の browser() API でブラウザ専用のコンポーネントを描画する

SSR を使う React アプリで localStorage を読む場合、従来は useEffect と state を使って初回表示を管理していました。browser() API では、ブラウザでのみ描画する意図を use(browser()) で表現し、待機中の表示を Suspense に任せられます。この記事では `browser()` API の使い方と、従来の `useEffect` と state を使った方法との違いを解説します。

pnpm update で GitHub Actions もまとめて更新する

GitHub Actions で使用する Action をコミット SHA に固定すると安全性が高まる一方、更新作業が煩雑になります。pnpm 11.16.0 で追加された `pnpm update --include-github-actions` を使うと、パッケージと Action の更新を同じコマンドで管理できます。この記事では基本的な使い方を確認します。

`:playing` や `:muted` で video 要素の状態に応じたスタイルを適用する

video 要素の再生やミュート状態に応じて見た目を変えるには、JavaScript でイベントを監視して CSS クラスを同期する方法が使われてきました。メディア状態擬似クラスを使うと、ブラウザが管理する再生、一時停止、シーク、バッファリング、ミュートなどの状態を CSS から直接選択できます。この記事では 7 つの擬似クラスの条件と、:has() を組み合わせて動画プレイヤーの表示を切り替える方法を紹介します。

flex-wrap: balance で Flexbox の折り返しを均等にする

flex-wrap: wrap では、最後の行に少数のアイテムだけが残り、行ごとのアイテムの量が大きく偏ることがあります。flex-wrap: balance は、通常の折り返しで決まる行数を維持しながら、各行の長さが近くなるように Flex アイテムを振り分けます。この記事では balance 使い方について紹介します。

Zod の z.compile() でバリデーションを高速化する

Zod 4.5 で、スキーマを実行時に最適化された JavaScript へ変換する z.compile() が追加されました。コンパイル済みスキーマは通常のスキーマと同じ API を保ちながら、複雑なデータの検証を高速化します。この記事では基本的な使い方と仕組みを紹介します。

CSS の shape() 関数でレスポンシブな図形を作る

clip-path の path() 関数で複雑な図形を作ると、固定座標のため要素のサイズへ追従させにくいという問題があります。shape() 関数ではパーセントや CSS の単位、カスタムプロパティを使って曲線を含む図形を定義できます。この記事では幅を変更できる吹き出しを作り、path() との違いや offset-path への応用を紹介します。

ローカル開発中に現れる GET /.well-known/appspecific/com.chrome.devtools.json とは何か

Chrome でローカル開発をしていると、開発サーバーへ GET /.well-known/appspecific/com.chrome.devtools.json という見慣れないリクエストが送られることがあります。これは Chrome DevTools がローカルプロジェクトを Workspace として自動検出するためのリクエストです。この記事では、実際にどのように動作するの確認します

Vitest のモックを using で自動的に復元する

Vitest で作成したスパイを復元し忘れると、別のテストへモックの状態が漏れるおそれがあります。Vitest 3.2.0 以降では `vi.spyOn()` の戻り値を `using` で宣言すると、スコープを抜けるときに元の実装を自動的に復元できます。この記事では `using` による自動復元の仕組みを紹介します。