#beginner
【解決】Reactでpropsがundefinedになる・更新されない原因と対処法
Reactでpropsがundefinedになる・値が変わらない原因を解説。親から正しく渡せていないケース・デフォルト値の設定・オプショナルな型定義・初回レンダリング時の対処まで実例付きで説明します。
2024-04-03
【解決】Objects are not valid as a React child エラーの修正方法
ReactのObjects are not valid as a React childエラーを解説。オブジェクト・Date・Promiseをそのまま描画しようとした際の原因と、文字列への変換・条件分岐・プロパティ参照による解決方法を実例付きで説明します。
2024-04-01
【解決】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
生成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