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

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

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

Mock Service Worker（MSW）：フロントエンドのAPIモック、バックエンド待ちよさようなら

Mock Service Worker（MSW）を使うと、フロントエンド開発者はネットワーク層でAPIをモックできます――バックエンドが準備できていなくても開発とテストが可能です。本記事では、インストール方法、ハンドラーの書き方、dev環境とユニットテスト環境へのMSW導入手順を解説します。
Development tutorial - IT technology blog
Posted inDevelopment

ReactのためのStorybook：UIコンポーネントを分離して開発する完全ガイド A to Z

StorybookはReactのUIコンポーネントを独立した環境で開発・テストすることを可能にします――アプリ全体の起動も複数画面のナビゲーションも不要です。本記事では、素早いセットアップからStoriesの書き方、Chromaticを使ったビジュアルテストの統合、そして大規模プロジェクトのリファクタリング経験から得た実践的なTipsまでを解説します。
Docker tutorial - IT technology blog
Posted inDocker

React/Vue/AngularフロントエンドをNginxでDockerize：レイヤーキャッシュの最適化とクライアントサイドルーティング

マルチステージビルドとNginxを使ったReact/Vue/Angularフロントエンドの実践的なDockerizeガイド。レイヤーキャッシュの最適化によるビルド時間の短縮とクライアントサイドルーティング使用時の404エラー対策に焦点を当てています。すぐに使える完全な設定例付き。