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

Reactで認証フォームを作るとき、エラー表示は `{error ?

{error}

: null}` と書くのが定番です。

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

設定画面で文字サイズのトグルを切り替えたのに、画面の見た目が変わらない。

続きを読む
生成AI
未発売プランの仮の料金が画面に出てしまう問題を、キーの有無と型で防ぐ

月額課金のSaaSで、まだ発売していないプランの料金が画面に表示されてしまう不具合に遭遇しました。

続きを読む
生成AI
お気に入りボタンをトグル化する:disabled設計の落とし穴

お気に入り(いいね・ブックマーク)ボタンは、追加だけを実装して「解除」の導線を作り忘れやすい部品です。オンならdisabledにする設計が解除の経路を奪い、recordIdの保持漏れやバージョン切替時の状態引き継ぎ、モックテストでは拾えない回帰も起こります。

続きを読む
生成AI
PWAの『オフライン再訪でログイン画面に戻される』問題をIndexedDBスナップショットで解決する

PWA(Progressive Web App)を運用していると、「オンライン時に一度使ったはずのアプリが、圏外や低速回線で再訪した瞬間にログイン画面へ落ちてしまう」という問題にぶつかることがあります。

続きを読む
生成AI
TypeScriptの型でイベント計測のドリフトを防ぐ:新規アナリティクスイベント追加の設計パターン

型付きイベント計測基盤に新しいアナリティクスイベントを追加する際の設計パターンを解説。payload型のマップ化、発火しきい値の統一、allowlist検証との組み合わせ方など、ドリフトを防ぐ実践的な工夫を紹介します。

続きを読む
生成AI
認証必須SPAでもクローラに本文を届ける:公開ページだけを静的プリレンダリングする設計

認証必須SPAでも、公開ページだけを限定的に静的プリレンダリングしてクローラに本文を届ける設計を紹介します。head用メタデータと本文を単一データソースから生成して内容の乖離を防ぎ、ビルド成果物に依存するE2Eテストのレーン分離方法も解説します。

続きを読む
生成AI
GA4のuser_id同期で踏んだ2つの罠 認証×同意をどう掛け算するか

GA4のuser_idは通常のイベントパラメータとは別枠で扱われる予約済みフィールドです。認証状態とCookie同意状態を掛け合わせ、同意がなければセットせず、アカウント切替時はunset→setの順で送る実装パターンを整理します。

続きを読む
生成AI
SPA の UIコンポーネント51個を Claude Design に取り込む——synth-entry モードの実践ガイド

npmライブラリではない普通のReact SPAのUIコンポーネントをClaude Designに取り込む実践ガイド。ビルド成果物を持たないSPAを擬似パッケージとして見せる「synth-entry」モードで、AIデザインツールへの同期手順とハマりどころを解説します。

続きを読む
React・Next.js
日付ロジックの3つの落とし穴—— null センチネル / コントローラブル化 / ?? 演算子の優先順

React+TypeScriptで日付ロジックを扱う際に陥りやすい「nullセンチネル」「コントローラブル化」「??演算子の優先順」の3つの落とし穴を解説。型と意味の対応、コンポーネントの責務、演算子の優先順位といった設計の重要性を指摘し、堅牢なアプリ開発へのヒントを提供します。

続きを読む