インフラ
Stripe の incomplete サブスクリプションが残る問題——二重課金を防ぐ自動リコンサイル設計

Stripeの`incomplete`サブスクリプション放置は、二重課金の温床。この記事では、孤立する`incomplete`の仕組みを解明し、「安全な自動修復」と「人手が必要な異常」に分けて処理する、二重課金を防ぐための自動リコンサイル設計を詳述します。

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

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

続きを読む
インフラ
Stripe Pricing Table の client-reference-id 改ざんを HMAC 署名で防ぐ実装ガイド

Stripe Pricing Tableのclient-reference-id改ざんによるなりすましを防ぐ、HMAC署名トークンの実装ガイドです。サーバー・フロント・テストの3観点から、安全な料金表の運用方法を解説します。

続きを読む
アーキテクチャ
Node/TypeScriptで複数の非同期リソースを安全に確保・解放するcleanupパターン

Node/TypeScriptでDBやHTTPサーバなど複数の非同期リソースを安全に確保・解放する「cleanupパターン」を解説。確保途中の失敗時も確実に巻き戻し、処理終了時には逆順で解放することで、リソースの残存を防ぐ堅牢な実装を紹介します。

続きを読む
Cloudflare
Cloudflare Workers + Resend で冪等な週次トランザクショナルメール配信基盤を作る

Workers の send_email バインディングがエンドユーザー宛に使えない罠を起点に、Resend + Queues + DB ステートマシンで二重配信を防ぐ週次メール配信基盤の全体像を実装コード付きで解説します。

続きを読む
生成AI
マルチベンダー AI 戦略の時代へ:エンジニアが今すぐ備えるべき実装パターン

OpenAI-Microsoft 提携再編を背景に、LLM プロバイダーに依存しない共通インターフェース設計パターンを TypeScript のコード例付きで解説。ベンダーロックイン回避の具体的な実装方法と選定判断軸を紹介します。

続きを読む
UI
React で Before/After 画像比較スライダーを実装する方法——react-compare-slider 実践ガイド

React で Before/After 画像比較スライダーを react-compare-slider で実装する方法を解説。タッチデバイス対応・アクセシビリティ・disabled 制御まで、実践的なコード例付きで紹介します。

続きを読む
React・Next.js
743行の巨大 React カスタムフックを8モジュールに分割——段階的リファクタリングの実践ガイド

肥大化した React カスタムフックを責務ごとに8モジュールへ分割し、型安全性とテスト容易性を向上させた実践記録。型アサーション削除、エラーメッセージ一元管理、キャッシュテスト実装の3つの改善を詳しく解説します。

続きを読む
Cloudflare
Cloudflare Workers の Env 型を wrangler types で一元化し、Runtime/Test 用に派生型を切る

wrangler types で生成される Cloudflare.Env を起点に Env・RuntimeEnv・TestEnv の3階層で派生型を設計するパターンを解説します。バインディング追加時の手動型同期をなくし、ハンドラごとの前提条件を型で表現できます。

続きを読む
E2Eテスト
ローカルE2Eを65s→15-18sに短縮した話:Supabase migrationの環境差吸収とハッシュキャッシュ

Supabase CLIのバンドルDockerと本番の storage.prefixes 差でマイグレーションが壊れた問題を to_regclass() で吸収し、さらに マイグレーションハッシュキャッシュ + DBリセットとauthモックの並列化で npm run e2e を 65s → 15-18s(-72%)に短縮した実装記録。

続きを読む