lang

第19回:Context API入門:Propsバケツリレーを卒業しよう

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

第18回:useNavigateフック:ボタン操作や処理完了後にページを切り替える方法

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

第17回:ダイナミックルーティング:URLパラメーターの魔法

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

第16回:React Router入門:ページ遷移とURL設計の基本

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

第15回:React基礎編・総まとめ:ToDoアプリで全知識を繋げよう

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

第14回:カスタムフック自作入門:ロジックを共通化してコードをスッキリさせる

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

第13回:useRefの使い方:DOM要素への直接アクセスと値を保持するテクニック

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

第12回:Reactのレンダリング最適化:useMemoとuseCallbackで無駄な再描画を防ぐ

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

第11回:useEffect入門:API連携やタイマー処理など「副次作用」を操る方法

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

第10回:フォーム入力を同期する!Controlled Components(制御コンポーネント)の仕組み

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