PWAの『オフライン再訪でログイン画面に戻される』問題をIndexedDBスナップショットで解決する
PWA（Progressive Web App）を運用していると、「オンライン時に一度使ったはずのアプリが、圏外や低速回線で再訪した瞬間にログイン画面へ落ちてしまう」という問題にぶつかることがあります。
TypeScriptの型でイベント計測のドリフトを防ぐ:新規アナリティクスイベント追加の設計パターン
型付きイベント計測基盤に新しいアナリティクスイベントを追加する際の設計パターンを解説。payload型のマップ化、発火しきい値の統一、allowlist検証との組み合わせ方など、ドリフトを防ぐ実践的な工夫を紹介します。
認証必須SPAでもクローラに本文を届ける：公開ページだけを静的プリレンダリングする設計
認証必須SPAでも、公開ページだけを限定的に静的プリレンダリングしてクローラに本文を届ける設計を紹介します。head用メタデータと本文を単一データソースから生成して内容の乖離を防ぎ、ビルド成果物に依存するE2Eテストのレーン分離方法も解説します。
GA4のuser_id同期で踏んだ2つの罠 認証×同意をどう掛け算するか
GA4のuser_idは通常のイベントパラメータとは別枠で扱われる予約済みフィールドです。認証状態とCookie同意状態を掛け合わせ、同意がなければセットせず、アカウント切替時はunset→setの順で送る実装パターンを整理します。
SPA の UIコンポーネント51個を Claude Design に取り込む——synth-entry モードの実践ガイド
npmライブラリではない普通のReact SPAのUIコンポーネントをClaude Designに取り込む実践ガイド。ビルド成果物を持たないSPAを擬似パッケージとして見せる「synth-entry」モードで、AIデザインツールへの同期手順とハマりどころを解説します。
日付ロジックの3つの落とし穴—— null センチネル / コントローラブル化 / ?? 演算子の優先順
React+TypeScriptで日付ロジックを扱う際に陥りやすい「nullセンチネル」「コントローラブル化」「??演算子の優先順」の3つの落とし穴を解説。型と意味の対応、コンポーネントの責務、演算子の優先順位といった設計の重要性を指摘し、堅牢なアプリ開発へのヒントを提供します。
複数イベントが同時発火する通知/マイルストーンを優先度+排他で統合する設計
学習アプリやSaaSで複数の通知・マイルストーンが同時発火するケースに対し、優先度ソート・排他ルール・上限件数の3軸で統合する設計パターンを解説します。TypeScript実装例とPlaywrightでのrace-free E2Eテスト手法、prefers-reduced-motion対応まで網羅。
React Toast通知システムの実装ガイド：useState・useRefでアクセシビリティ対応の通知UIを作成する方法
Reactで重大度別の色分け、自動消去タイマー、アクセシビリティ対応のToast通知システムを実装する方法を完全解説。useRefでタイマー管理、重複防止、後方互換性維持の実装コード付きで紹介。初心者でも安心のステップバイステップガイド。