Development tutorial - IT technology blog
Posted inDevelopment

React Hook Form + Zod: ReactとNext.jsでType-Safeなフォームバリデーションを構築する

React Hook FormとZodを組み合わせてReactおよびNext.jsでtype-safeなフォームバリデーションを構築する方法を解説。Zodスキーマの定義、zodResolverの統合、サーバーサイドのエラー処理、Server Actionsまで——クライアントとサーバーで同じスキーマを共有する実践的な手法を紹介する。
Development tutorial - IT technology blog
Posted inDevelopment

Next.js 15 App Router: Server Components、Server Actions、Partial Prerenderingをマスターしてパフォーマンスを最適化する

Next.js 15 App RouterはServer ComponentsとServer Actionsによってデータフェッチとフォーム処理の方法を根本的に変える。この記事では大規模なコードベースのリファクタリング経験から得た実践的なTipsと、1つのページでstaticとdynamicを組み合わせるPartial Prerenderingの設定方法を紹介する。
Development tutorial - IT technology blog
Posted inDevelopment

Node.jsで実装する安全なWebhook：HMAC-SHA256認証とRetry処理の正しいやり方

認証のないWebhookは偽造リクエストの格好の標的になる。この記事では、HMAC-SHA256でNode.jsエンドポイントを保護する方法、リトライ時の重複処理を防ぐ冪等性の実装、そしてダウンストリームサービス呼び出し時のExponential Backoffによるリトライ処理を解説する。実際に動くコードとcurlによるテスト手順も完備。
Development tutorial - IT technology blog
Posted inDevelopment

Open Policy Agent（OPA）とNode.jsで実装する複雑なマイクロサービスシステムのABAC認可

マイクロサービスにおける複雑な権限ロジックをRBACだけでは処理しきれなくなったとき、Open Policy Agent（OPA）とABACモデルが実践的な解決策となります。Node.jsでの本番運用の経験、Regoポリシーの書き方、OPAをExpressミドルウェアに統合する方法を共有します。
Development tutorial - IT technology blog
Posted inDevelopment

Playwright & Percy によるビジュアルリグレッションテスト：デプロイ時の「レイアウト崩れ」への不安を解消する

PlaywrightとPercyを使用して、Reactのビジュアルリグレッションテストを構築する方法を学びましょう。UIバグの検出をピクセル単位で自動化することで、レイアウト崩れを恐れずに自信を持ってコードのリファクタリングができるようになります。