技術記事
nagiyu のサービス開発で得た技術知見・アーキテクチャ解説を公開しています。
記事一覧
Jest の coverageThreshold で 80% カバレッジを CI で強制する
Jest の coverageThreshold を使って statements / branches / functions / lines を 80% で足切りし、カバレッジ低下を CI で自動失敗させる方法を解説。collectCoverageFrom による対象の絞り込み、ts-jest と next/jest（v8）の違い、モノレポでの運用ノウハウまで実運用ベースで紹介します。
2026-07-01zod でランタイムバリデーションと型を一元化する
TypeScript の型は実行時には消える。外部から来る入力を信用しないために、zod でスキーマを単一の真実源にし、ランタイム検証と静的型を一元化する方法を、parse/safeParse の使い分けや API 境界での実践とともに整理します。
2026-06-20Auth.js の signOut がリバースプロキシ背後で内部ホストにリダイレクトする問題
Auth.js（NextAuth）の signOut が、ALB / CloudFront などのリバースプロキシ背後で `ip-10-2-0-48.ec2.internal` のような内部ホスト名にリダイレクトして ERR_NAME_NOT_RESOLVED になる原因と、サーバー側リダイレクト解決に頼らずクライアント側で遷移する確実な対処を解説します。
2026-06-14DynamoDB の GSI は 1 デプロイにつき 1 つまで：CloudFormation 一括追加でハマった話
CloudFormation / CDK で DynamoDB テーブルに GSI を 2 つ同時追加して "Cannot perform more than one GSI creation or deletion in a single update" で本番デプロイが失敗した実体験を整理。UPDATE 時のみの制約・CREATE 時は一括 OK という仕様の差、RETAIN を踏まえた復旧手順、本番で使える恒久対策まで解説します。
2026-06-14Markdown を DOMPurify で安全にレンダリングする：Next.js SSG の XSS 対策
Next.js SSG で Markdown を HTML 化して dangerouslySetInnerHTML で描画する際の XSS リスクを解説し、DOMPurify（isomorphic-dompurify）によるサニタイズとリポジトリ規約に沿った責務分離設計を紹介します。
2026-06-14draw.io が「d.setId is not a function」で開けない：ID と Array.prototype の衝突
draw.io で特定の .drawio ファイルを開いたときに「d.setId is not a function」が出る原因を解説します。mxGraph のデコーダがキャッシュに配列を使っており、セルの id 属性が Array.prototype のメンバ名（push など）と衝突すると、プロトタイプチェーンを経由して関数が返ってしまうのが真因です。再現手順・修正方法・JavaScript での汎用的な対策まで整理します。
2026-06-13EventBridge Rules で定期バッチを CDK で組む：資産・株価管理サービスの 6 ルール構成
AWS CDK（aws-events）を使って EventBridge Rules でバッチ定期実行を組む方法を解説。rate() / cron() の使い分け、LambdaFunction target の指定、EventBridge Scheduler との選択判断まで、資産・株価管理サービスの実装をベースに紹介します。
2026-05-27SSM Parameter Store と Secrets Manager の使い分け：クロススタック参照と機密管理の実装
AWS の SSM Parameter Store と Secrets Manager を、モノレポ × マルチサービス構成の実装に即して使い分ける指針を整理。Parameter Store はスタック間のリソース参照（CfnOutput / ImportValue の代替）、Secrets Manager は API キーや鍵ペアの機密管理という役割分担を、CDK のコードとともに解説します。
2026-05-25AWS CDK で IAM 最小権限を設計する：Grant メソッドと PolicyStatement の使い分け
AWS CDK でコンストラクト間の権限を付与する方法を解説。Grant メソッド・addToRolePolicy・PolicyStatement の使い分け、ARN のハードコードを避けるテクニック、ユニットテストによる権限検証まで実運用ベースで整理します。
2026-05-21Next.js 16 Metadata API で SEO・OGP・JSON-LD を整える
Next.js 16 App Router の Metadata API を使って、title・description・OGP・Twitter Card・canonical・JSON-LD を体系的に管理する方法を解説。SSG ページと動的ページそれぞれの設定パターンを実装例で紹介します。
2026-04-30Next.js generateStaticParams 完全ガイド：SSG の動的ルートを使いこなす
Next.js App Router の generateStaticParams を使って動的ルートを SSG ビルド時に展開する方法を解説。複数階層の動的ルート・dynamicParams・部分的 SSG（ISR）・型安全な実装まで網羅します。
2026-04-28ECS Fargate と Lambda の使い分け基準を実運用で整理する
AWS の ECS Fargate と Lambda、どちらでサービスを動かすべきか迷う場面の判断基準を整理。コールドスタート・常時稼働コスト・実行時間・依存ライブラリサイズなど、実運用で効いてくる観点ごとに比較します。
2026-04-25CloudFront キャッシュ戦略：TTL・Cache-Control・Invalidation の実践
CloudFront のキャッシュを正しく効かせるための TTL 設定・Cache-Control ヘッダ設計・キャッシュキー・Invalidation の使いどころを実運用ベースで解説します。Next.js を CloudFront の背後に置く構成を例に取ります。
2026-04-22React Server Components の境界設計：use client をどこに置くか
Next.js App Router の React Server Components で `use client` をどこに引くべきかを実装パターンで整理。データ取得・インタラクション・props のシリアライズ可否・パフォーマンス影響を踏まえた実用的な指針を解説します。
2026-04-20S3 Presigned URL でブラウザから直接安全にアップロード／ダウンロードする
S3 Presigned URL を使って、認証情報をクライアントに渡さずブラウザから S3 へ直接アップロード・ダウンロードする実装方法を解説。期限・サイズ制限・Content-Type 拘束など、本番運用で必要なセキュリティ設計まで踏み込みます。
2026-04-18Material-UI v9 と Next.js App Router の SSR を両立する ThemeRegistry 実装
MUI（Material-UI）v9 と Next.js App Router の Server Components で SSR とスタイル一貫性を両立する ThemeRegistry の実装方法を解説。Emotion キャッシュ・ハイドレーション・テーマ切替まで網羅します。
2026-04-15ECR ライフサイクルポリシーで古いイメージを自動削除する
Amazon ECR のライフサイクルポリシーを使って古いコンテナイメージを自動削除する設定を解説。タグ付きと untagged の使い分け・rollback 用イメージの保護・コスト削減効果まで実例で紹介します。
2026-04-12AWS Batchで重い処理をサーバーレス化する構成解説
動画変換・画像処理などの重いバッチ処理をAWS Batchでサーバーレス化する構成を解説。ジョブ定義・ジョブキュー・コンピューティング環境・S3トリガー・コスト最適化まで詳しく説明します。
2026-04-10CloudFront+ECSでNext.jsをデプロイする構成解説
CloudFront + ECS FargateでNext.jsをデプロイするAWS構成を解説。ECSサービス設定・ALB構成・CloudFrontディストリビューション・キャッシュ設定・GitHub ActionsでのCI/CDまで詳しく説明します。
2026-04-10Next.jsでMarkdownを静的ページに変換する実装方法
Next.jsのSSGとMarkdownファイルを組み合わせた静的サイト生成の実装方法を解説。gray-matterによるフロントマター解析・remark/rehypeによるレンダリング・generateStaticParamsの活用まで詳しく説明します。
2026-04-10Playwright E2E テストを GitHub Actions で並列実行する
Playwright の E2E テストを GitHub Actions のマトリクスとシャーディング機能で並列実行し、CI 時間を短縮する手法を解説。flake 対策・アーティファクト収集・モバイル/デスクトップ複数 viewport 対応まで実運用ベースで紹介します。
2026-04-08Docker multi-stage build で Next.js standalone をスリム化する
Next.js の standalone モードと Docker multi-stage build を組み合わせて、本番イメージサイズを最小化する手法を解説。Alpine ベース・依存最小化・ECR への push まで一連の流れを示します。
2026-04-05Lambda コールドスタート対策：Provisioned Concurrency と SnapStart の使い分け
AWS Lambda のコールドスタートを抑える 2 大手法、Provisioned Concurrency と SnapStart の仕組み・コスト・対応ランタイムを比較。実運用で「どちらをどう使うか」を判断するための整理。
2026-04-03GitHub Actions でモノレポの差分デプロイを実装する
モノレポ構成で GitHub Actions を使い、変更があったサービスだけをデプロイするワークフローの実装方法を解説。paths フィルタ・dorny/paths-filter・依存ライブラリ変更時の波及・並列実行までカバーします。
2026-04-02TypeScript の discriminated union で API レスポンスを安全に扱う
TypeScript の discriminated union（判別可能な共用体）を使って、API のレスポンス・状態管理・エラー型を網羅的かつ型安全に扱う方法を解説。switch の網羅性チェック・Zod との連携・実務で効くパターンを整理します。
2026-03-30monorepo + npm workspaces で TypeScript パッケージを共有する
モノレポ構成で TypeScript の型・関数・コンポーネントを複数アプリ間で共有する実装方法を解説。npm workspaces の設定・パッケージ間参照・ビルド順序・デプロイ時の依存解決まで実運用ベースで整理します。
2026-03-20DynamoDB single-table design 入門：パーティションキーと GSI の設計
DynamoDB の single-table design（単一テーブル設計）の基本を、複数エンティティをひとつのテーブルに格納する具体的な設計例で解説。パーティションキー・ソートキー・GSI の使い分け、アクセスパターンからの逆算手順まで整理します。
2026-03-17TypeScript strict mode で書く型安全な Repository パターン
TypeScript の strict モードで Repository パターンを実装する具体的な方法を解説。エンティティ型の定義・null と undefined の扱い・トランザクション・テスト容易性まで、実プロダクトで効く型設計を整理します。
2026-03-15