JavaScript 【React】コンポーネントのユニットテストを書く
こんにちは、かつコーチです。前回は、React Testing Library（RTL）の基本的な使い方として、コンポーネントの描画結果を検証する方法を解説しました。今回はいよいよ、クリックや入力といったユーザー操作を伴うコンポーネントのユ...
React
JavaScript JavaScript 【React】React Testing Library入門
こんにちは、かつコーチです。前回は、テストフレームワークJestの基本文法と環境構築を解説しました。sumのような単純な関数のテストはできるようになりましたが、Reactのコンポーネントは「画面に何が表示されるか」「ボタンを押したらどう変化...
JavaScript 【React】Jestの基本：Reactでテストを書く準備
こんにちは、かつコーチです。前回までは認証・セキュリティ編として、Protected RouteやXSS対策を扱ってきました。安全なアプリが作れるようになったら、次に意識したいのが「そのコードが本当に正しく動いているか」を保証する仕組みです...
JavaScript 【React】ReactアプリのXSS対策
こんにちは、かつコーチです。前回は、ログイン必須ページを守るProtected Routeの実装方法を解説しました。「誰がアクセスできるか」を制御できるようになったところで、今回は少し違う角度のセキュリティ対策を扱います。それがXSS（クロ...
JavaScript 【React】Protected Route（ログイン必須ページ）の実装方法
こんにちは、かつコーチです。前回は、JWTを使ってログイン状態を保持する仕組みについて解説しました。トークンを発行してフロント側で保持できるようになったら、次に考えたいのが「ログインしていない人には見せたくないページ」の扱いです。マイページ...
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 【React Native】NativeWindを導入したときに、TypeScriptが警告を出す件
こんにちは、かつコーチです。ReactNativeでNativeWindを利用しようとしたとき、TypeScriptが警告を出すことがありますね。今回はそのときの対処方法について解説します。対処方法TypeScriptがNativeWind...
JavaScript 【Next.js】next/imageで画像を最適化する
こんにちは、かつコーチです。前回はVercelへのデプロイ方法を解説し、アプリを実際に公開できるようになりました。公開したアプリが実際にユーザーに使われ始めると、次に気になってくるのが表示速度です。特に画像は、対策をしないままだとページ全体...
JavaScript 【Next.js】Next.jsアプリをVercelにデプロイする方法
こんにちは、かつコーチです。前回はVitestとPlaywrightを使って、Next.jsアプリにテストを導入する方法を解説しました。認証もテストも整ったので、今回はいよいよアプリを実際に世界へ公開するステップに進みます。使うのはVerc...
JavaScript 【Next.js】Next.jsのテスト入門：Vitest + Playwrightで最低限を押さえる
こんにちは、かつコーチです。前回はmiddleware.tsを使って、ログイン必須ページをまとめて保護する実装をしました。認証まわりのロジックは特に、後から誰かが変更を加えたときに気づかず壊してしまいやすい部分です。今回はそうした事故を防ぐ...
JavaScript 【Next.js】middleware.tsでログイン必須ページを保護する
こんにちは、かつコーチです。前回はAuth.jsを使って、Next.jsアプリにログイン・ログアウト機能を実装しました。ただしAuth.jsのauth()をページごとに呼び出す方式だと、保護したいページが増えるたびにチェック処理を書き足すこ...