JavaScript 【React】JWTの扱い方：ログイン状態を保持する仕組み
こんにちは、かつコーチです。前回はReactアプリにおける認証の実装パターンを、全体像から解説しました。今回はその認証の裏側で動いている仕組み、JWT（JSON Web Token）にフォーカスして、Reactアプリでどう扱えばよいかを詳し...
React
JavaScript JavaScript 【React】Reactアプリに認証機能を実装するパターン
こんにちは、かつコーチです。前回はReact Hook Formを使ったフォームバリデーションの実装方法を解説しました。フォームでログイン情報を受け取れるようになったところで、今回はいよいよ「認証」を扱います。認証はライブラリの使い方だけで...
JavaScript 【React】React Hook Formでフォームバリデーションを実装する方法
こんにちは、かつコーチです。前回はReact Query（TanStack Query）を使ったデータ取得の効率化について解説しました。データを「取得して表示する」側の話が一段落したので、今回は反対に「ユーザーからデータを受け取る」側、フォ...
JavaScript 【React】React Query（TanStack Query）でデータ取得を効率化する
こんにちは、かつコーチです。前回はfetchとuseEffectを組み合わせた基本的なデータ取得の方法を解説しました。isLoadingやerrorの管理、リクエストのキャンセルまで自前で書くと、コード量がどんどん増えていくことを実感しても...
JavaScript 【React】fetchでAPIからデータを取得して表示する方法
こんにちは、かつコーチです。前回はRedux・Zustand・Context APIの使い分けについて解説しました。状態管理の仕組みが分かってきたところで、今回は「外部のAPIからデータを取得して画面に表示する」という、実務では必ず通る道を...
JavaScript 【React】Redux・Zustand・Context API、結局どれを使うべき？
こんにちは、かつコーチです。ここまで3回にわたって、useReducer、Context API、Redux Toolkit、Zustandと、状態管理まわりの選択肢を一つずつ解説してきました。「結局、自分のプロジェクトではどれを使えばいい...
JavaScript 【React】Zustand入門：シンプルな状態管理ライブラリ
こんにちは、かつコーチです。前回は、状態管理ライブラリの定番であるRedux Toolkitの入門編を解説しました。Redux Toolkitは強力な反面、slice の作成・store の設定・Provider の配置など、覚えることがそ...
JavaScript 【React】Redux Toolkit入門：状態管理ライブラリの定番
こんにちは、かつコーチです。前回は、Context APIを使って実践的なグローバル状態を作る方法を解説しました。Context APIはアプリ全体の状態を共有するのに便利ですが、状態の種類が増えたり、更新ロジックが複雑になったりすると、だ...
JavaScript 【React】Context APIで実践的なグローバル状態を作る
こんにちは、かつコーチです。前回は useReducer で複雑な状態管理を整理する方法を解説しました。今回は、その useReducer とセットでよく使われる「Context API」を使って、複数のコンポーネントから参照できるグローバ...
JavaScript 【React】useReducerで複雑な状態管理を整理する
こんにちは、かつコーチです。前回は、カスタムフックを自作してロジックを再利用する方法を解説しました。今回は、状態管理の話をもう一段階深く掘り下げます。useState で状態を管理していると、フォームの入力値・エラー内容・送信中フラグなど、...
Prisma 【Prisma】Prismaとは？
こんにちは、かつコーチです。Next.jsを使っていて、Prismaを使う機会が出て来たので、今回はPrismaについて解説します。Prismaは、TypeScriptとJavaScript向けの次世代ORM（Object-Relation...
JavaScript 【React】カスタムフックを自作してロジックを再利用する
こんにちは、かつコーチです。前回は「useCallbackで関数の再生成を防ぐ」を解説しました。useState や useEffect、useRef と一通り基本のフックを見てきたので、今回はそれらを組み合わせてカスタムフックを自作する方...
JavaScript 【React】useCallbackで関数の再生成を防ぐ
こんにちは、かつコーチです。前回は「useMemoで無駄な再計算を防ぐ」を解説しました。今回はそのペアとも言える useCallback を扱います。「関数もメモ化できるの？」と思う人も多いと思いますが、useMemo の考え方が分かってい...
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でアプリを作っていると、コンポーネントはどんどん分割されていきます。そうなると必ず必要になるのが「親から子へ」「子から親へ」データを受け渡...