生成AI
Cloudflare Pages Functionsのエラー応答を直す5つの落とし穴:Set-Cookie転送・CORS・XFF偽装新着!!

Cloudflare Pages Functions でミドルウェアやプロキシ層を書いていると、正常系は動くのにエラー応答まわりだけ静かに壊れている、ということがよくあります。

続きを読む
生成AI
GitHub Actionsのservices:でイメージpullが落ちる問題を、指数バックオフと失敗時通知で解決する新着!!

GitHub Actions の `services:` でコンテナレジストリ(ghcr.io)から Postgres イメージを取得していると、pull はジョブ初期化時に1回だけ実行されます。

続きを読む
生成AI
認証基盤の切り替えでスモークテストが落ちる時の直し方【Playwright】新着!!

認証基盤を別ドメインの共通ログインへ切り替えたところ、本番デプロイ後のスモークテスト(Playwright の setup project)が毎回タイムアウトで落ちるようになりました。

続きを読む
生成AI
チャット履歴の「0件」と「取得失敗」を区別する4状態管理とReactの競合対策新着!!

チャットUIで履歴取得の失敗と0件を区別するため、idle/loading/success/errorの4状態で管理する方法を解説します。世代カウンタで古い非同期結果を捨てる実装や、再取得ボタン、アクセシビリティ対応もコード付きで紹介します。

続きを読む
生成AI
Reactの編集モーダルで二重送信と古い応答を防ぐ設計パターン(ref ロックと所有者・世代の束縛)新着!!

一覧カードに「タイトル・メモの編集」モーダルを追加するだけの機能でも、保存先が複数あると意外な落とし穴があります。refによる同期ロックと所有者・世代の束縛で二重送信と古い応答を防ぎ、Playwrightで再現テストまで行う設計パターンを紹介します。

続きを読む
生成AI
Playwrightのproject別testIgnoreはグローバル設定を上書きする:spec漏れを防ぐ回帰ガードの作り方新着!!

Playwright で chromium / webkit / firefox と専用 project を組んでいると、「グローバルの `testIgnore` で除外したはずの spec が、特定の project でだけ実行されてしまう」という罠にはまることがあります。

続きを読む
生成AI
外部サービスの設定ドリフトをnightly CIで検知する:Cloudflare Hyperdriveの設定をassertする実装パターン新着!!

Cloudflare Hyperdrive のような外部クラウドサービスのリソース設定は、git にもアプリのコードにも残りません。

続きを読む
生成AI
Reactのエラー表示がスクリーンリーダーで読まれない問題を、永続コンテナとaria-pressedで直す

Reactの条件付きエラー表示は、スクリーンリーダーに読まれないことがあります。常時DOMに置く永続コンテナと、固定ラベル+aria-pressedのトグルボタン、冪等なa11yスナップショットで直す方法をコード付きで解説します。

続きを読む
生成AI
設定画面の文字サイズ切り替えが画面に反映されない原因と直し方:永続化とルート属性で全画面に効かせる

設定画面で文字サイズのトグルを切り替えても画面の見た目が変わらない、またリロードすると元に戻ってしまう原因は、値の永続化不足とスタイルの適用範囲の狭さにあります。保存処理の切り出しと`html`要素へのdata属性付与で全画面に反映させる修正方法と、E2Eテストでの検証方法を解説します。

続きを読む
JavaScript
PWAの更新で他タブの作業を壊さない:Web Locks APIとService Workerの二段階排他制御

PWAの更新通知を見落とすと古い画面が残り、skipWaitingを強制すると他タブの入力中の内容まで壊れます。Web Locks APIで共有ロックと排他ロックを使い分け、Service Workerに有効化まで保持させ、他タブを壊さずに更新する二段階の排他制御を実装します。

続きを読む