Next.js

Playwrightを使ったE2Eテストの基本を解説し、インストール、サーバー設定、テスト作成、UIモード、Codegenによる生成手順を紹介します。

第1回から第14回までを振り返り、TDD導入前後のコード品質の変化と、E2Eや視覚的テストなど今後の学習テーマを紹介してシリーズを締めくくります。

テスト作成のコストと効果、CI/CDの自動化、レガシーコードへの段階的なTDD導入について解説します。

単体、統合、E2Eテストの違いと特徴を比べ、Reactで効果的な戦略となるTesting Trophyを解説します。

内部実装が変わっても壊れない堅牢なテストの作り方を学びます。実装の詳細を避け、ユーザーの行動に焦点を当てる方法を解説します。

テストが難しくなるコンポーネントの特徴を分析し、関心の分離やProviderの扱いを通じて、テストしやすい構造に改善する方法を学びます。

userEvent.typeでユーザーの文字入力を再現し、必須項目が未入力の場合に表示されるエラーメッセージ（Validation）を検証する方法を学びます。

実サーバーなしでネットワーク要求を捕捉してテストできるMSW(Mock Service Worker)の導入と活用、エラーケースのテスト方法を解説します。

API呼び出しなどの非同期処理をテストする方法を学びます。findByクエリでLoading、Success、Errorの状態変化を検出して検証します。

Reactのカスタムフックをコンポーネントから分離し、renderHookとactでテストする方法を解説します。

useStateで管理する状態に応じて画面が変わる条件付きレンダリングをテストします。getByとqueryByの違いを理解し、ログで状態変化を追跡する方法を学びます。

テストを安全網としてコンポーネントを分割し、構造を改善するリファクタリングを解説します。screen.debug()を使ってテスト中の状態をログで確認する方法も紹介します。

ReactのCounterコンポーネントを例に、最小限のUI実装からuseStateによる状態管理までをTDDで進めます。

実装の詳細ではなく、ユーザーの視点でテストする方法を学びます。アクセシビリティクエリ(getByRole)を使い、失敗するテスト(Red)を書いてみます。

ViteでReactプロジェクトを作成し、VitestとReact Testing Libraryを導入してTDD環境を構築します。

フロントエンドでテストが大切な理由、ReactでTDDを導入する利点、テストすべき範囲を説明します。

Next.js 16で使えるReact 19のView Transitions、Server Actionsのセキュリティ、useOptimisticなどを紹介します。

Next.js 15から16へアップグレードする手順を紹介します。Codemod、非同期API対応、画像セキュリティ設定、Parallel RoutesやMiddlewareの変更点を解説します。

Next.js 16の非同期API、キャッシュ制御、Proxyへの変更をコード例とともに解説します。

Next.js 16のTurbopack標準化、ファイルシステムキャッシュ、React Compiler、DevTools MCPなど、開発体験と性能に関わる主要な更新を解説します。

React2Shellの原因をシリアライズとリモートコード実行の観点から解説し、React・Next.jsの影響バージョンと必要な緊急パッチ、更新コマンドを紹介します。

TypeScriptでcreateを理解し、selectorとshallowによる最適化やget・set・subscribeなどのストア操作を学びます。

Reactの状態管理に役立つZustandを、ReduxやContext APIと比較し、カウンターの例から基本操作を学びます。

React Queryのクエリ処理をカスタムフックへ抽象化し、複数のページやコンポーネントで再利用する方法を実例で説明します。

React、Expo、React Nativeで、i18nextの初期化、言語パック、変数、書式設定、単数・複数形を利用する方法を説明します。

React、Next.js、React Native、Node.jsなどのTypeScript環境で、Axiosのリクエスト・レスポンス型とサービス層を設定します。

Next.jsでGoogle AdSenseの自動広告に頼らず、広告を配置する位置や形式を制御する方法を解説します。広告タイプ別コード例とAdComponentの実装例も紹介します。

JavaScriptとTypeScriptでJSDocを使い、共同開発でコードの意図や使い方を伝えるコメントを書く方法を紹介します。

Etherscan V2 APIのキー発行方法と、React + TypeScriptで複数チェーンのEOAウォレット残高を取得する方法を解説します。

SSRの必要性と基本動作、React 18のストリーミング、renderToPipeableStreamとSuspenseの連携を段階的に説明します。

AWS LambdaとS3を連携し、画像アップロード時にリサイズとWebP変換を自動実行する、サーバーレス画像処理の手順を紹介します。

静的生成からISRへ移行した経緯と効果、ビルドエラーの解決方法を詳しく紹介します。

重複fetchの削減、Suspenseの整理、クライアント側の日付整形など、実際のNext.jsブログで行った性能改善をまとめます。

Next.js 15への更新に伴う主な変更点、移行手順、発生しうる問題と解決方法を段階的に説明します。

Tailwindの設定ファイル、プラグイン、global.cssを使い、スタイルやフォントをカスタマイズする方法を説明します。

Next.jsのファイルシステムルーティング、動的ルート、APIのRoute Handlerの基本的な使い方を説明します。

Next.jsプロジェクトを作成し、Tailwind CSS、Shadcn/ui、Typographyを設定する手順を説明します。

ブログを構成する技術スタックと主要ライブラリについて、役割と採用理由を紹介します。

独自APIとPrisma、およびSupabase REST APIを使い、Next.jsのCSR・SSRでデータを取得する方法を紹介します。

公式ガイドを基にTailwind CSS 3.0から4.0への移行、ブラウザー対応、設定構造、破壊的変更を例とともに説明します。

Next.jsのISRについて、概念、実装方法、高度な機能まで詳しく説明します。

これまでに学んだデータ取得方式を整理し、状況に合わせて適切な戦略を選ぶ実践的な指針を紹介します。

Next.jsのfetchをカスタマイズし、APIのRoute Handlerでバックエンド通信を構成する方法を学びます。

複数のリクエストを扱う並列・順次・条件付きfetchと、クライアントでデータを取得する方法を学びます。

Next.jsのfetchが提供するキャッシュオプションと、それぞれの意味を詳しく説明します。

Next.js App Routerでのデータ取得と、Server Componentsを中心とするデータの流れを学びます。

Next.js App Routerで静的HTMLを読み込み、iframeでページ内に表示する方法と注意点を説明します。

React NativeでContext APIを使い、propsの受け渡しを簡潔にしてグローバル状態を管理する方法を、useStateとuseReducerの例で解説します。