JavaScript 【React】Protected Route（ログイン必須ページ）の実装方法
こんにちは、かつコーチです。前回は、JWTを使ってログイン状態を保持する仕組みについて解説しました。トークンを発行してフロント側で保持できるようになったら、次に考えたいのが「ログインしていない人には見せたくないページ」の扱いです。マイページ...
JavaScript
JavaScript JavaScript 【React】JWTの扱い方：ログイン状態を保持する仕組み
こんにちは、かつコーチです。前回はReactアプリにおける認証の実装パターンを、全体像から解説しました。今回はその認証の裏側で動いている仕組み、JWT（JSON Web Token）にフォーカスして、Reactアプリでどう扱えばよいかを詳し...
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 で状態を管理していると、フォームの入力値・エラー内容・送信中フラグなど、...
JavaScript 【TypeScript】as constとリテラル型推論
こんにちは、かつコーチです。前回はunion型を安全に絞り込む「型ガード」を扱いました。今回はその型ガードとも相性がいい、as const（値を変更不可・かつ最も狭い型として扱う指示）とリテラル型推論を紹介します。「配列や設定オブジェクトを...
JavaScript 【TypeScript】型ガードでunion型を安全に絞り込む
こんにちは、かつコーチです。前回はPartial・Pick・Omitといったユーティリティ型で、既存の型を加工する方法を紹介しました。今回は、union型（string | number のように複数の型のどれかを表す型）を安全に扱うための...
JavaScript 【TypeScript】ユーティリティ型入門：Partial・Pick・Omitの使い方
こんにちは、かつコーチです。前回はジェネリクスの制約（extends）を扱い、型パラメータに条件をつける方法を紹介しました。今回は、その仕組みを使って作られているユーティリティ型（既存の型を加工して新しい型を作る組み込み機能）を紹介します。...
JavaScript 【TypeScript】ジェネリクスの制約（extends）を使いこなす
こんにちは、かつコーチです。前回はジェネリクスの基本を扱い、型を引数のように渡す考え方を紹介しました。今回はその一歩先、ジェネリクスの制約（extends）を扱います。「ジェネリクスは書けるようになったけど、T に対して自由にプロパティへア...
JavaScript 【TypeScript】ジェネリクス入門：型を引数のように扱う
こんにちは、かつコーチです。前回は、null と undefined を安全に扱う strictNullChecks について解説しました。今回からは少し応用的な内容に入っていきます。最初のテーマは、TypeScriptを学んでいると必ずぶ...
JavaScript 【TypeScript】nullとundefinedの安全な扱い方（strictNullChecks）
こんにちは、かつコーチです。前回は、オプショナルプロパティ（?）と readonly の使い方について解説しました。今回は、TypeScriptを実務で使ううえで避けて通れない「null と undefined の扱い方」を取り上げます。「...
JavaScript 【TypeScript】オプショナルプロパティ（?）とreadonlyの使い方
こんにちは、かつコーチです。前回は、enum（列挙型）の使い方について解説しました。今回は、オブジェクトの型定義をより実務向きにする2つの記法、「オプショナルプロパティ（?）」と「readonly」を扱います。どちらも小さな記号ひとつですが...
JavaScript 【TypeScript】enum（列挙型）の使い方
こんにちは、かつコーチです。前回は、type と interface の違いについて解説しました。今回は、TypeScript独自の機能である「enum（列挙型）」を扱います。「決まった選択肢の中からどれか一つを選ばせたい」という場面は、実...
JavaScript 【TypeScript】typeとinterface、結局どちらを使うべき？
こんにちは、かつコーチです。前回は、リテラル型で値を限定する方法を解説しました。TypeScriptで型を定義しようとすると、必ずぶつかるのが「type と interface、どっちを使えばいいの？」という疑問です。どちらもオブジェクトの...