Core Web Vitalsをプライバシーに配慮しながらdataLayerへ送信する設計新着!!
サイトの体感速度を数値で把握したいとき、多くのチームがCore Web Vitals(LCP・INP・CLS・FCP・TTFB)の計測に行き着きます。ただし「計測して終わり」ではなく、既存のアクセス解析基盤(GTM/dataLayerなど)に流し込んで初めて、他の指標と突き合わせた分析ができるようになります。
PWAの『オフライン再訪でログイン画面に戻される』問題をIndexedDBスナップショットで解決する新着!!
PWA（Progressive Web App）を運用していると、「オンライン時に一度使ったはずのアプリが、圏外や低速回線で再訪した瞬間にログイン画面へ落ちてしまう」という問題にぶつかることがあります。
認証必須SPAでもクローラに本文を届ける：公開ページだけを静的プリレンダリングする設計
認証必須SPAでも、公開ページだけを限定的に静的プリレンダリングしてクローラに本文を届ける設計を紹介します。head用メタデータと本文を単一データソースから生成して内容の乖離を防ぎ、ビルド成果物に依存するE2Eテストのレーン分離方法も解説します。
ローカルE2Eを65s→15-18sに短縮した話：Supabase migrationの環境差吸収とハッシュキャッシュ
Supabase CLIのバンドルDockerと本番の storage.prefixes 差でマイグレーションが壊れた問題を to_regclass() で吸収し、さらに マイグレーションハッシュキャッシュ + DBリセットとauthモックの並列化で npm run e2e を 65s → 15-18s（-72%）に短縮した実装記録。
「npm run e2e」一発で完結するローカル E2E 環境を構築する
npm run e2e 一発でローカルE2E環境を完結させる構築方法を解説します。Cloudflare Workers + Supabase + Playwright構成で、Auth認証モック・環境ファイルの安全なクリーンアップ・状態解決フォールバックを自己完結スクリプトにまとめる実装パターンです。
複数イベントが同時発火する通知/マイルストーンを優先度+排他で統合する設計
学習アプリやSaaSで複数の通知・マイルストーンが同時発火するケースに対し、優先度ソート・排他ルール・上限件数の3軸で統合する設計パターンを解説します。TypeScript実装例とPlaywrightでのrace-free E2Eテスト手法、prefers-reduced-motion対応まで網羅。
Playwright toHaveScreenshotの.png拡張子問題を解決
PlaywrightでVRT導入時に遭遇する`toHaveScreenshot`のエラー原因と解決方法を解説。`.png`拡張子の指定方法や`snapshotPathTemplate`の設定例を紹介します。