category: フロントエンド（React/Next.js）
34 posts
Next.js を AWS Lambda で動かすと 502 エラーが出る謎を解く。ストリーミングレスポンス設定の落とし穴
Next.jsをAWS Lambda（関数URL）で動かすと502エラーが出る原因と解決策を解説。BUFFEREDモードとストリーミングSSRの不一致という落とし穴と、InvokeMode変更・ハンドラー修正の手順を紹介します。
2026-04-18
ReactでTic-Tac-Toeのグリッドを.map()関数で動的にレンダリングする方法
ReactでTic-Tac-Toeのグリッドを.map()関数で動的にレンダリングする方法を解説。Array(n).fill()で空配列を作って.map()でマス目を生成するテクニックや、CSS Gridでのレイアウト、状態管理のポイントを紹介します。
2026-03-28
スポンサーリンク
大規模フロントエンド開発を加速する再帰的Feature構成の設計と導入戦略
大規模フロントエンド開発を加速する「再帰的Feature構成」の設計と導入戦略を解説。Featureベース構成でsharedフォルダが肥大化する・切り方が曖昧になる課題を、Featureを入れ子にする設計思想で解決する方法を紹介します。
2026-03-21
Vite+登場：ESLintを100倍高速化、Next.js対応も実現する新世代ツールチェーン
ESLintを100倍高速化する新世代ツールチェーン「Vite+」を解説。React・Next.jsプロジェクトでの実体験を交えて紹介します。
2026-03-17
React で「Too many re-renders」エラーが出るときの典型パターンまとめ
Reactで「Too many re-renders. React limits the number of renders」エラーが出る典型パターンをまとめて解説。レンダー中のsetState呼び出しや依存配列ミスなど5パターンと修正方法、デバッグ用チェックリストを紹介します。
2025-11-22
React で「Each child in a list should have a unique 'key' prop」警告を正しく理解する
Reactで「Each child in a list should have a unique key prop」警告が出る理由を正しく理解し、状況別に解決する方法を解説。差分更新（reconciliation）でkeyが必要な仕組みと、Fragmentや条件分岐で原因が見えにくいケースを紹介します。
2025-10-31
ESLint で「Parsing error: Cannot find module '@babel/preset-react'」エラーの解決策
React プロジェクトで ESLint を実行した際、次のようなエラーが出ることがあります。 これは、ESLint が JSX 構文を理解できずにパースエラーを起こしていることが原因です。本記事では、原因の仕組みを整理 […]
2025-10-29
React 18 StrictMode で useEffect が2回実行される理由と対処法
React 18 以降、StrictMode を有効にしていると useEffect が「2回実行される」という挙動に驚いた開発者は少なくありません。特に、API へのリクエストやログ出力のような副作用が重複して起きると […]
2025-10-03
React Suspense + lazy で隣接するコンポーネントがあるときの Hydration Mismatch 問題と回避法
React 18のSuspense+lazyをSSRと組み合わせたとき、隣接コンポーネントで起きるHydration Mismatch（Text content did not match）の原因と回避法を解説。サーバーとクライアントのHTMLに差異が生じる仕組みを分解して紹介します。
2025-09-30
Next.js / React でサーバーとクライアントで DOM 属性が異なり「Text content did not match」エラーになる原因と修正
日付表示・ブラウザ固有挙動・ロケールによる変換等でサーバーとクライアントでのテキスト内容が異なるケース。toLocaleString() 等の使用、条件付き属性、初期値の扱いなど、修正例を示す。
2025-09-29