#react
【解決】Reactでpropsがundefinedになる・更新されない原因と対処法
Reactでpropsがundefinedになる・値が変わらない原因を解説。親から正しく渡せていないケース・デフォルト値の設定・オプショナルな型定義・初回レンダリング時の対処まで実例付きで説明します。
2024-04-03
【解決】useEffectでasync/awaitを使う正しい方法と注意点
useEffectに直接asyncを付けてはいけない理由と、正しいasync/awaitの書き方を解説。内部関数として定義する方法・クリーンアップとの組み合わせ・競合状態（race condition）の防ぎ方まで実例付きで説明します。
2024-04-02
【解決】Objects are not valid as a React child エラーの修正方法
ReactのObjects are not valid as a React childエラーを解説。オブジェクト・Date・Promiseをそのまま描画しようとした際の原因と、文字列への変換・条件分岐・プロパティ参照による解決方法を実例付きで説明します。
2024-04-01
【解決】TypeScript × React でよくある型エラー集：原因と修正パターン
TypeScript + Reactでよく遭遇する型エラーを解説します。propsの型定義・イベントハンドラの型・useStateの型引数・children・非同期の型推論など実務頻出パターンをまとめました。
2024-03-05
【解決】useEffectの無限ループを止める：原因別5パターンの修正方法
useEffectが無限ループする原因を5パターンに分けて解説します。依存配列の誤り・オブジェクト参照・関数・setStateの連鎖など、よくあるパターンと具体的な修正コードを示します。
2024-03-04
【解決】Each child in a list should have a unique key エラーの修正方法
ReactのEach child in a list should have a unique 'key' propエラーを解説。keyが必要な理由・正しいkeyの選び方・indexをkeyにしてはいけないケースを実例付きで説明します。
2024-03-03
【解決】Cannot read properties of undefined/null エラーの原因と修正
ReactでよくあるCannot read properties of undefined (reading 'xxx')エラーを解説。非同期データの読み込み前アクセス・undefinedなprops・配列メソッドのチェーンなど原因別に修正方法を示します。
2024-03-02
【解決】Maximum update depth exceeded エラーの原因と修正方法
ReactのMaximum update depth exceededエラーを解説します。useEffectの無限ループ・setStateの連鎖・イベントハンドラの誤用など原因別に修正コードを示します。
2024-03-01
Reactコンポーネントの基本：JSXと関数コンポーネントを理解する
Reactの基本単位であるコンポーネントの作り方を解説します。JSXの書き方から関数コンポーネントの定義、propsの受け渡し、childrenの使い方まで実例付きで学べます。
2024-01-15
useStateの完全ガイド：関数型更新・配列・オブジェクトの正しい扱い方
ReactのuseStateを完全解説します。型推論・関数型更新・オブジェクト・配列のイミュータブルな更新方法・複数stateの使い分けまで、実務で使えるパターンを実例付きで学べます。
2024-02-01
useEffectの基本：副作用とは何か・データフェッチの実装
ReactのuseEffectを基礎から解説します。副作用の概念・基本構文・マウント時にデータを取得する方法・非同期処理の書き方まで、実務で使えるパターンを実例付きで学べます。
2024-02-02
useEffectの依存配列：正しい指定方法とよくある落とし穴
useEffectの依存配列を徹底解説。空配列・値の指定・オブジェクトや関数を依存配列に含めたときの問題と解決策、exhaustive-depsルールの使い方を実例付きで説明します。
2024-02-03
useEffectのクリーンアップ：メモリリークを防ぐ正しい実装
useEffectのクリーンアップ関数を解説します。タイマー・イベントリスナー・非同期処理のキャンセルなど、アンマウント時に必要なクリーンアップの実装方法をメモリリーク防止の観点から学べます。
2024-02-04
useContextでグローバル状態管理：props drilling を解消する
ReactのuseContextを解説します。props drillingの問題・createContext・Provider・useContextで値を取得する方法、TypeScriptでの型安全な実装まで実例付きで学べます。
2024-02-05
useReducerでの状態管理：複雑なstateをスッキリ整理する
ReactのuseReducerを解説します。action・reducer・dispatchの概念、TypeScriptでの型安全な実装、useStateとの使い分け基準を、ToDoアプリを例に実践的に学べます。
2024-02-06
useRefの使い方：DOM参照・前回値の保持・レンダリングを起こさない値
ReactのuseRefを解説します。DOM要素への直接参照、前回値の保持、レンダリングをトリガーしない値の管理など、useRefの3つの主要ユースケースを実例付きで学べます。
2024-02-07
useMemoでパフォーマンス最適化：重い計算をメモ化する
ReactのuseMemoを解説します。メモ化の仕組み・高コスト計算の最適化・参照の安定化、そしてuseMemoを使うべき場面・使わなくてよい場面の判断基準を実例付きで学べます。
2024-02-08
useCallbackで関数をメモ化：React.memoと組み合わせた最適化
ReactのuseCallbackを解説します。関数のメモ化・React.memoとの組み合わせ・useEffectの依存配列での活用を実例で解説。useMemoとの違いと使い分けも明確にします。
2024-02-09
カスタムHookでロジックを再利用する：useFetch・useLocalStorage・useDebounce
Reactのカスタムフックの作り方を解説します。useFetch・useLocalStorage・useDebounceを実装例に、フックの抽出パターン・命名規則・テスト方法まで実践的に学べます。
2024-02-10
useTransitionでUI応答性を向上させる：React 18コンカレント機能
React 18のuseTransitionとuseDeferredValueを解説します。重い状態更新を「緊急でない」としてマークし、入力やクリックへの応答を維持しながら重い処理を裏で実行する仕組みを学べます。
2024-02-11
Hooksのルールとよくある間違い：シリーズ総まとめ
ReactのHooksが守るべきルールを解説します。条件分岐・ループ内での呼び出し禁止の理由、ESLint設定、無限ループや古い値参照などよくある間違いとその対処法をシリーズの集大成としてまとめます。
2024-02-12
生成AI時代に、なぜフレームワークを学ぶのか
ChatGPTやCopilotがコードを書ける今、なぜReactを自分で学ぶ必要があるのか。バイブコーディングの限界と、AIを使いこなすために基礎が必要な理由を整理する。
2025-01-06
なぜReactなのか：コンポーネント思考と宣言的UIを理解する
HTMLのコピペ地獄からコンポーネント思考へ。jQueryとReactの違い、宣言的UIとは何かを対話形式でゼロから解説。
2025-01-07
開発環境のセットアップ：Node.js・npm・VS Codeを整える
ReactでWebサイトを作るために必要な開発環境を整える。Node.jsのインストールからVS Codeの拡張機能まで、詰まりやすいポイントを先回りして解説。
2025-01-08
Viteでプロジェクトを作る：Hello Reactを表示するまで
npm create vite@latestコマンドでReact+TypeScriptプロジェクトを作成し、生成されたファイル構造を理解して、ブラウザに最初の画面を表示するまでの全手順。
2025-01-09
コンポーネントとは：UIを部品に分けてHeaderとFooterを作る
Reactのコンポーネント分割を実践。App.tsxに書いたコードをHeader・Footerに切り出す手順と、import/exportの仕組みを解説。
2025-01-10
JSXの書き方：HTMLとの違いを知ってヒーローセクションを作る
ReactのJSX構文をHTMLと比較しながら解説。className・{}式・自己終了タグ・フラグメントなど、つまずきやすいポイントを実例で学ぶ。
2025-01-11
propsでデータを渡す：FeatureCardコンポーネントを作る
Reactのpropsの仕組みをTypeScriptの型定義と合わせて解説。コピペから脱してデータを外から受け取るコンポーネントの作り方を学ぶ。
2025-01-12
Tailwind CSSでスタイルを当てる：トップページのデザインを完成させる
Tailwind CSSの基本的な使い方をReactと組み合わせて解説。クラス名の読み方、レスポンシブ対応、よく使うユーティリティクラスを実例で学ぶ。
2025-01-13
リストレンダリングとkey：配列データからUIを生成する
Reactでの配列のmap()によるリストレンダリングを解説。keyプロパティが必要な理由と、よくある間違いをFeatureCard実装を通じて学ぶ。
2025-01-14
stateとuseState：クリックで選択キャラを切り替える
useStateでキャラクター選択状態を管理する実装を通じて、stateの概念・更新関数・再レンダリングの仕組みを対話形式で解説。
2025-01-15
イベントハンドリング：クリック・入力・キーボードを受け取る
ReactのonClick・onChange・onKeyDownなどのイベント処理を解説。アロー関数で包む理由、イベントオブジェクトの使い方、よくある間違いを実例で学ぶ。
2025-01-16
条件付きレンダリング：画像なしキャラのプレースホルダーを作る
Reactの条件付きレンダリングを&&・三項演算子・早期returnで実装。実際に画像が揃っていないキャラクターへの対応を通じて、現場に即した使い分けを学ぶ。
2025-01-17
コンポーネント設計：CharacterCardとRosterCardに分割する
大きくなったcharacters-page.tsxをCharacterCard・RosterCard・Statに分割する実践を通じて、コンポーネントを分ける判断基準と設計の考え方を学ぶ。
2025-01-18
React Routerでページを繋ぐ：SPAのナビゲーションを実装する
React Router v7を使ってトップページと登場人物紹介ページを繋ぐ。LinkとaタグのSPAでの違い、ルート定義の仕組みをヘッダーのナビゲーション実装で学ぶ。
2025-01-19
Cloudflare Pagesにデプロイ：作ったWebサイトを公開する
npm run buildでReactアプリをビルドし、Cloudflare PagesにGitHubリポジトリを接続して自動デプロイを設定する。URLが生まれるまでの全手順。
2025-01-20
プログラミングってなに？このシリーズのあるきかた
小学生からはじめるReact入門の第0回。プログラミングとは何かを身近なたとえで紹介し、このシリーズで最後にどんなゲームやアプリを作れるようになるのかを案内します。
2026-06-21
Webってなに？ホームページが見えるしくみ
ウェブサイトが画面に表示されるしくみを小学生向けに解説。ブラウザ・サーバー・URLの役割を、宅配便のたとえを使ってやさしく説明します。Web入門の第一歩。
2026-06-21
HTMLってなに？ページのほね組みを作ろう
Webページの骨組みを作るHTMLを小学生向けに解説。見出し・段落・画像・リンクのタグを実際に数行書いて、ブラウザに表示される本物の見た目まで体験します。
2026-06-21
CSSってなに？ページに色とかざりをつけよう
HTMLで作った骨組みに見た目をつけるCSSを小学生向けに解説。文字の色や大きさ、背景色の変え方を、着せ替えのたとえで実際の見た目を見ながら学びます。
2026-06-21
JavaScriptってなに？ページに動きをつけよう
ページに動きをつけるJavaScriptを小学生向けに解説。ボタンを押すと文字が変わる例を見て、HTML・CSS・JavaScriptの3つの役割のちがいを整理します。
2026-06-21
Reactってなに？ウェブサイトをブロックで作ろう
Reactとは何かをレゴブロックのたとえで小学生向けに解説。ウェブサイトを部品（コンポーネント）の組み合わせで作る考え方と、Reactを使うと何がうれしいのかを学びます。
2026-06-21
StackBlitzでReactを動かそう（むずかしい準備なし）
ブラウザだけでReactを動かせるStackBlitzの使い方を小学生向けに解説。数分でHelloを表示し、文字を書き換えると画面がすぐ変わる成功体験までを案内します。
2026-06-21
はじめてのコンポーネント：名まえカードを作ろう
Reactのコンポーネントを初めて作る回。名まえカードを作りながら、関数コンポーネント・JSXのルール・波かっこで変数を表示する書き方を小学生向けに解説します。
2026-06-21
propsとmap：自己紹介カードをたくさん並べよう
外から情報を渡すpropsと、配列から要素を並べるmapを小学生向けに解説。名まえカードを使い回して、自己紹介カードやミニ図鑑をたくさん並べる方法を作りながら学びます。
2026-06-21
ボタンを押すと変わる：stateとイベントを学ぼう
useStateとonClickで画面に動きをつける方法を小学生向けに解説。カウンターやいいねボタンを作り、条件によって見た目を変える書き方まで体験しながら学びます。
2026-06-21
おみくじ＆ガチャを作ろう（ランダムに挑戦）
ボタンを押すと結果がランダムに変わるおみくじとガチャを作る回。乱数の作り方とstate・配列を組み合わせて、引くたびに結果が変わるアプリを小学生向けに解説します。
2026-06-21
4択クイズを作ろう（正解と点数を出そう）
選択肢を押すと正解・不正解がわかり点数がたまる4択クイズを作る回。配列とmapで選択肢を並べ、stateで点数を管理する方法を小学生向けにやさしく解説します。
2026-06-21
じゃんけんゲームを作ろう（勝ち負けを判定）
コンピュータとじゃんけんできるゲームを作る回。自分の手をボタンで選び、相手の手を乱数で決めて、勝ち・負け・あいこを判定する方法を小学生向けに解説します。
2026-06-21
自分のパソコンでReactを動かそう（つぎの一歩）
StackBlitzで作ったものを自分のパソコンでも動かす方法を小学生向けに解説。Node.jsの準備とViteでReactプロジェクトを作る手順、そして次に学ぶことを案内します。
2026-06-21
<ViewTransition>でアニメーション遷移を実際に試す
Reactの実験的なViewTransitionコンポーネントを実際に試す。リストの並び替えや要素の出入りにアニメーションを付ける方法を、Vite環境で動かしながら解説する。
2026-06-27
最小Reactフレームワーク Waku をCloudflareで動かす
Jotai作者による最小Reactフレームワーク Waku を実際に試す。プロジェクト作成からServer Components、Cloudflareへのデプロイまでを手順を追って動かしながら解説する。
2026-06-27
React Bitsでアニメ付きUIを最短実装する
アニメ付きUIコンポーネント集 React Bits を実際に試す。jsrepoでの導入からBlurTextの設置までを、このサイトと同じVite+Tailwind環境で動かしながら解説する。
2026-06-27
ReactコンポーネントのProps型定義：基本から実践パターンまで
TypeScriptでReactのprops型を正しく定義する方法を解説。必須・省略可能・デフォルト値・children・ユニオン型・discriminated unionまで、実務で使うパターンを実例付きで網羅します。
2024-04-10
Reactイベントハンドラーの型定義：onClick・onChange・onSubmit
TypeScriptでReactのイベントハンドラーを正しく型定義する方法を解説。onClick・onChange・onSubmit・onKeyDown・フォーム要素ごとの型・カスタムイベントハンドラーのprops定義まで実例付きで説明します。
2024-04-11
useState・useRef・useReducerの型定義：TypeScriptで正しく型をつける
TypeScriptでReact HooksのuseState・useRef・useReducerに型をつける方法を解説。型推論が効くケース・明示が必要なケース・useRefのnull初期値問題・useReducerのaction型定義まで実例付きで説明します。
2024-04-12