クレインテックの技術ブログ。開発に関する情報や技術トピックを共有しています。
jsdomでは再現できないCSS/レイアウト/ビューポートのテストを、E2Eより軽量に実行できるPlaywright Component Testing。レスポンシブ対応の確認やビジュアルリグレッションテストなど、実践的なユースケースとコード例を紹介します。
「どのテストをどれくらい書くべき？」その悩みを解決。テストピラミッドとテスティングトロフィーの違いを理解し、React/TypeScript/Next.jsプロジェクトに最適なテスト戦略を実例付きで解説します。
Martin Fowlerのテストダブル分類を基に、Vitest + React Testing Libraryでの実装パターンを解説。vi.fn()、vi.spyOn()、vi.mock()の使い分けとベストプラクティスを紹介します。
PlaywrightのPage ObjectパターンとFixturesを組み合わせた実践的なE2Eテスト設計手法を解説。型安全なフィクスチャ定義、認証状態の効率的な管理、階層化されたPage Object設計など、大規模プロジェクトで活用できるベストプラクティスを紹介します。
「ESMモジュールのモッキングがうまくいかない」「どのクエリを使うべきか迷う」そんなReactテストの困りごとを、vi.hoistedパターンとTesting Libraryのベストプラクティスで解決します。
Scribanテンプレートエンジンの基礎から、JSONデータを使った実践的なコード自動生成システムの構築まで解説。テンプレート構文、関数定義、カスタム関数の登録など、実務で使えるテクニックを紹介します。
Shopify Themeで外部CMSを使いたいけど、クライアントサイド取得だとパフォーマンスが...。Webhook + SSRで事前にHTMLを生成し、Shopifyに同期するアプローチを解説します。
GeoJSONからMBTilesを生成する際、tippecanoeの-Zと-zオプションで適切なzoomレベル範囲を指定。更新時間を1分から5秒に短縮した手法を解説します。
Vercel の有料 Remote Cache を使わずに、S3 と GitHub Actions で Turborepo Remote Cache を自前構築し、モノレポの CI/CD を高速化した実装方法を解説します。
CDKの逐次実行からGitHub Actions Matrix Strategyによる並列実行に移行し、マイクロサービスのDockerビルド時間を約4倍高速化した実装方法を解説します。
3つの大規模プロジェクトを抱えるMonorepoに、Claude Codeのフック・Agent・Skillsを統合し、開発体験を劇的に改善した実践例を紹介します。Turborepoとの組み合わせで実現した品質担保と効率化の工夫をご覧ください。