ToolDocs

これまでの学習では、データを「親から子へ」Propsを使って渡してきました（第5回：Props参照）。しかし、アプリが大きくなると、ある問題が発生します。例えば、「ユーザーのログイン情報」を5階層下のコンポーネントで使いたい場合、途中の4つ...

これまでは <Link> タグをクリックしてユーザー自身に移動してもらってきました。しかし、実際のアプリでは「ログインボタンを押して、成功したらマイページへ飛ばす」といった、プログラム側からの画面遷移が必須です。2026年のReact開発に...

前回：React Router入門：ページ遷移とURL設計の基本では、複数のページを切り替える基礎を学びました。しかし、SNSや通販サイトを思い出してください。ユーザーが1万人いたら、1万人分のプロフィールページ（/user/1, /use...

前回：React基礎編・総まとめ：ToDoアプリで全知識を繋げようでは、これまでの知識を1つにまとめました。しかし、今のままではどんなに多機能になっても「1つのURLに1つの画面」しかありません。本物のWebアプリには「ホーム」「プロフィー...

前回：カスタムフック自作入門：ロジックを共通化してコードをスッキリさせるでは、自分専用のオリジナル・フックを作る高度なテクニックを学びました。全25回のカリキュラムのうち、今回で「基礎編」が完結します。これまでに学んだ「JSX」「Props...

前回：useRefの使い方：DOM要素への直接アクセスと値を保持するテクニック（前回の記事リンク想定）では、Reactのルールを少し離れてDOMを直接操作する「忍者」のような技を学びました。これまで、useState や useEffect...

前回：Reactのレンダリング最適化：useMemoとuseCallbackで無駄な再描画を防ぐでは、アプリを爆速にする「賢いサボり方」を学びました。Reactの基本ルールは「データ（State）を変えて、画面を自動で更新させる」ことでした...

前回：useEffect入門：API連携やタイマー処理など「副次作用」を操る方法では、実行タイミングをコントロールする「副作用」の扱いを学びました。Reactの素晴らしい点は、データが変われば画面を「自動で」書き換えてくれることです。しかし...

前回：フォーム入力を同期する！Controlled Components（制御コンポーネント）の仕組みでは、Reactがフォームのデータを完全に支配する方法を学びました。これまでは「ユーザーがボタンを押した」などの**きっかけ（イベント）*...

前回：条件分岐で表示を切り替える「条件付きレンダリング」の極意では、状況に応じてUIを出し分けるテクニックを学びました。今回は、Webアプリの要である「入力フォーム」を攻略します。 Reactには 「制御コンポーネント（Controlled...