React / TypeScript
生成AI時代の
React実践入門
React基礎・Hooks・TypeScript・エラー解決まで対話形式で学ぶ。
このサイト自体をゼロから作りながら進める実践入門です。
学習ロードマップ
このサイトは、以下の順に学ぶとスムーズです。
シリーズで体系学習
すべて見る →テーマごとに体系化された記事群。第0回から順番に読み進めることができます。
React基礎 完全ガイド
初級ChatGPTやCopilotがコードを書ける今、なぜReactを自分で学ぶ必要があるのか。バイブコーディングの限界と、AIを使いこなすために基礎が必要な理由を整理する。
Hooks完全解説
中級ReactのuseStateを完全解説します。型推論・関数型更新・オブジェクト・配列のイミュータブルな更新方法・複数stateの使い分けまで、実務で使えるパターンを実例付きで学べます。
小学生からはじめるReact
小学生から小学生からはじめるReact入門の第0回。プログラミングとは何かを身近なたとえで紹介し、このシリーズで最後にどんなゲームやアプリを作れるようになるのかを案内します。
React最新ラボ:話題の新技術を実際に試す
Reactの実験的なViewTransitionコンポーネントを実際に試す。リストの並び替えや要素の出入りにアニメーションを付ける方法を、Vite環境で動かしながら解説する。
TypeScript × React 実践ガイド
TypeScriptでReactのprops型を正しく定義する方法を解説。必須・省略可能・デフォルト値・children・ユニオン型・discriminated unionまで、実務で使うパターンを実例付きで網羅します。
テーマから探す
特定のHookやテーマで記事を絞り込めます。
このサイトで学べること
最新記事
すべて見る →【解決】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