JavaScript 【React】useCallbackで関数の再生成を防ぐ
こんにちは、かつコーチです。前回は「useMemoで無駄な再計算を防ぐ」を解説しました。今回はそのペアとも言える useCallback を扱います。「関数もメモ化できるの？」と思う人も多いと思いますが、useMemo の考え方が分かってい...
2023-09
JavaScript JavaScript 【React】useMemoで無駄な再計算を防ぐ
こんにちは、かつコーチです。前回は「useContextでProps drillingを解消する」を解説しました。今回は、パフォーマンスチューニングの入り口として避けて通れない useMemo を扱います。「なぜ画面がカクつくのか」「どこを...
JavaScript 【React】useContextでProps drillingを解消する
こんにちは、かつコーチです。前回は「useRefの使い方：DOM参照と値の保持」を解説しました。今回は、コンポーネントの階層が深くなったときに必ずと言っていいほど直面する「Props drilling」問題と、それを解消する useCont...
JavaScript 【React】useRefの使い方：DOM参照と値の保持
こんにちは、かつコーチです。前回は「useEffectの依存配列でハマらないためのコツ」を解説しました。今回は、useEffectとセットでよく登場する useRef を扱います。「DOM要素を直接触りたいとき」「再レンダリングを起こさずに...
JavaScript 【React】useEffectの依存配列でハマらないためのコツ
こんにちは、かつコーチです。前回はuseEffectの基本と、副作用処理という考え方について解説しました。今回はその中でも特に多くの人がつまずく「依存配列」に絞って、より実践的な落とし穴と対処法を解説していきます。依存配列の基本ルールをおさ...
JavaScript 【React】useEffectの基本：副作用処理を理解する
こんにちは、かつコーチです。前回はuseStateでオブジェクトや配列を安全に更新する方法を解説しました。今回は、Reactの中でも特につまずきやすいと言われるuseEffectを扱います。「なんとなく動いているけど、実は理解できていない」...
JavaScript 【React】useStateをもっと詳しく：オブジェクト・配列の更新
こんにちは、かつコーチです。前回は親子コンポーネント間でのデータの受け渡し方を解説しました。useState自体は入門段階でも触れる機能ですが、文字列や数値ではなく「オブジェクト」や「配列」を扱い始めると、急につまずく人が多くなります。今回...
JavaScript 【React】親子コンポーネント間でのデータの受け渡し方
こんにちは、かつコーチです。前回はフォームの作り方と制御コンポーネントについて解説しました。Reactでアプリを作っていると、コンポーネントはどんどん分割されていきます。そうなると必ず必要になるのが「親から子へ」「子から親へ」データを受け渡...
JavaScript 【React】フォームの作り方：制御コンポーネントの基本
こんにちは、かつコーチです。前回はリスト表示とkey属性の重要性について解説しました。今回は、Reactでの開発において避けて通れない「フォーム」の作り方を扱います。ログイン画面や検索窓、お問い合わせフォームなど、ユーザーの入力を受け取る場...
JavaScript 【React】リスト表示とkey属性の重要性
こんにちは、かつコーチです。前回は条件分岐レンダリングのパターンを紹介しました。今回は、Reactアプリでほぼ必ず登場する「配列データを一覧表示する」方法を扱います。セットで必要になる key 属性についても、なぜ必要なのかをきちんと理解し...
JavaScript 【React】条件分岐レンダリングのパターン集
こんにちは、かつコーチです。前回はイベントハンドリングを使って、ユーザー操作から状態を更新する方法を解説しました。状態が扱えるようになると、次に欲しくなるのが「状態によって表示を切り替える」機能です。ログイン状態によってボタンを出し分けたり...
JavaScript 【React】イベントハンドリングの書き方（onClick等）
こんにちは、かつコーチです。前回は useState を使って、コンポーネントに状態を持たせる方法を解説しました。状態を更新するには、ボタンを押す・文字を入力するといった「ユーザー操作」をきっかけにする必要があります。今回は、そのきっかけを...
JavaScript 【React】useStateの基本：状態を持つコンポーネントを作る
こんにちは、かつコーチです。前回はPropsを使って、親から子へ値を渡す方法を解説しました。ただ、Propsだけでは「コンポーネント自身が持つ、変化する値」を扱うことはできません。たとえばボタンを押すたびに数字が増えるカウンターのような機能...
JavaScript 【React】Propsでコンポーネントに値を渡す方法
こんにちは、かつコーチです。前回は仮想DOMの仕組みを見ながら、Reactがなぜ速いのかを解説しました。今回は、React学習で最初につまずきやすいポイントの一つ「Props」を扱います。コンポーネントに値を渡すための仕組みなのですが、最初...
JavaScript 【React】仮想DOMとは？Reactが速い理由を理解する
こんにちは、かつコーチです。前回はコンポーネントの作り方を解説しました。今回は少し視点を変えて、「Reactはなぜサクサク動くのか」という仕組みの話をしていきます。キーワードは仮想DOMです。やや中級者向けの内容にはなりますが、この後Pro...
JavaScript 【React】コンポーネントとは？関数コンポーネントの作り方
こんにちは、かつコーチです。前回はJSXの基本的な書き方を解説しました。今回は、Reactの一番の核となる考え方である「コンポーネント」について、実際に手を動かしながら理解していきましょう。コンポーネントとは？UIを構成する「部品」の単位コ...
JavaScript 【React】JSXの基本：HTMLのようでHTMLじゃない書き方
こんにちは、かつコーチです。前回はViteを使ってReactの開発環境を作りました。src/App.tsxを開くと、HTMLのようなタグがJavaScriptの中に書かれていて、「これは一体何の記法なんだろう」と感じた人もいるはずです。今回...