JavaScript 【React】useContextでProps drillingを解消する
こんにちは、かつコーチです。前回は「useRefの使い方：DOM参照と値の保持」を解説しました。今回は、コンポーネントの階層が深くなったときに必ずと言っていいほど直面する「Props drilling」問題と、それを解消する useCont...
React
JavaScript 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の中に書かれていて、「これは一体何の記法なんだろう」と感じた人もいるはずです。今回...
JavaScript 【React】Reactの環境構築：Viteで開発環境を作る
こんにちは、かつコーチです。前回は、Reactが「UIを部品化するライブラリ」であることを解説しました。今回は、実際に自分のパソコンでReactを動かせるようにする「環境構築」をやっていきます。環境構築は最初のハードルになりがちですが、今の...
JavaScript 【React】Reactとは？UIを部品化して作るライブラリを初心者向けに解説
こんにちは、かつコーチです。TypeScript基礎編、25記事お疲れさまでした。型注釈、インターフェース、ジェネリクス、そして既存プロジェクトの移行方法まで、盛りだくさんの内容を走り抜けてきましたね。ここからはいよいよ「React編」のス...
React 【Next.js】Next.js 13 から next/link の Linkコンポーネント が 常に aタグをレンダリングするようになった。
こんにちは、かつコーチです。Next.js12までは、<a>タグを常にネストしなければいけませんでした。import Link from 'next/link'// Next.js 12までは<a>タグを常にネストしないといけませんでした。...
JavaScript 【React】FormのTextareaをコンポーネント化する方法を解説
こんにちは、かつコーチです。Reactを扱っているとコンポーネントにすることがあると思います。今回はFormでよく扱われるTextareaについてコンポーネントにする方法を解説します。完成コード使い分けが必要かと思いますが、2種類作成しまし...
JavaScript 【React基礎学習2】ReactのComponentについて解説
こんにちは、かつコーチです。ReactはComponentベースで開発されています。Reactのコンポーネントは、UIを独立した再利用可能な部品（部品やパーツ）として構築する基本単位です。コンポーネントは、アプリケーションの特定の機能やUI...