React

こんにちは、かつコーチです。前回はAPI連携ありのTODOアプリを、useStateとカスタムフックだけで実装しました。今回はReact編の最終回として、「同じ簡単なアプリを、状態管理の主要な選択肢それぞれで実装したらどう違うのか」を実際に...

こんにちは、かつコーチです。ここまでディレクトリ構成・Atomic Design・カスタムフックの設計パターンと、React設計の考え方を積み上げてきました。今回はいよいよ実践編として、それらを組み合わせながらAPI連携ありのTODOアプリ...

こんにちは、かつコーチです。前回はAtomic Designで、コンポーネントの「見た目」の粒度を整理する考え方を解説しました。今回は、その裏側にある「ロジック」の整理方法、つまりカスタムフックの設計パターンを扱います。カスタムフックはus...

こんにちは、かつコーチです。前回は「太らせないコンポーネント設計の考え方」というテーマで、1つのコンポーネントが責務を抱えすぎないようにする考え方を解説しました。今回はその一歩手前、そもそもファイルをどこに置くかという話です。コンポーネント...

こんにちは、かつコーチです。前回まで4回にわたって「エラー解決編」をお届けしてきました。今回からは「設計・アーキテクチャ編」に入ります。1本目のテーマは、Reactを書いていると誰もが一度は経験する「気づいたら1つのコンポーネントが数百行に...

こんにちは、かつコーチです。前回は「React DevToolsでコンポーネントの状態を確認する方法」を解説しました。今回は、DevToolsのProfilerタブで見つけた「重い箇所」を実際にどう改善していくか、パフォーマンスチューニング...

こんにちは、かつコーチです。前回は「無限re-renderが起きる原因と対処法」を解説しました。console.logを無限ループの中に埋め込んで原因を追う方法もありますが、正直かなり効率が悪いです。今回は、そういったバグ調査を格段に楽にし...

こんにちは、かつコーチです。前回は「keyがありません」警告を取り上げました。今回は、React学習者の多くが一度は通る「画面がフリーズする」「コンソールが真っ赤になる」という無限re-renderを扱います。Maximum update ...

こんにちは、かつコーチです。前回は「Reactでよく出るエラーと解決法まとめ」で、代表的なエラーを一通り見てきました。今回からは、個別のつまずきポイントをひとつずつ深掘りしていきます。1本目のテーマは、リストを表示するコードを書くとほぼ必ず...

こんにちは、かつコーチです。前回まででテスト・デプロイ・ビルド最適化と、開発から公開までの一連の流れを見てきました。ここからは実践Tips編として、Reactを書いていると誰もが一度はぶつかる定番エラーを、原因と解決法つきでまとめて紹介しま...

こんにちは、かつコーチです。前回は開発・本番で値を切り替える環境変数の管理方法を解説しました。デプロイ・環境変数と整えてくると、次に気になってくるのが「アプリの表示が遅い」という体感速度の問題です。今回は、その原因になりやすいバンドルサイズ...

こんにちは、かつコーチです。前回はVercelを使ったReactアプリのデプロイ手順を解説しました。デプロイができるようになると次にぶつかるのが、「開発中と本番で、APIの向き先やキーを切り替えたい」という悩みです。今回は、Reactアプリ...

こんにちは、かつコーチです。前回はテスト編の締めくくりとして、Playwrightを使ったE2Eテストを解説しました。ここからはデプロイ編に入り、実際に作ったReactアプリを世の中に公開する方法を学んでいきます。初回の今回は、Vercel...

こんにちは、かつコーチです。前回は「コンポーネントのユニットテストを書く」というテーマで、個々のコンポーネントを切り離してテストする方法を解説しました。今回はテスト編の締めくくりとして、実際のブラウザを操作しながらアプリ全体の動きを検証する...

こんにちは、かつコーチです。前回は、React Testing Library（RTL）の基本的な使い方として、コンポーネントの描画結果を検証する方法を解説しました。今回はいよいよ、クリックや入力といったユーザー操作を伴うコンポーネントのユ...

こんにちは、かつコーチです。前回は、テストフレームワークJestの基本文法と環境構築を解説しました。sumのような単純な関数のテストはできるようになりましたが、Reactのコンポーネントは「画面に何が表示されるか」「ボタンを押したらどう変化...

こんにちは、かつコーチです。前回までは認証・セキュリティ編として、Protected RouteやXSS対策を扱ってきました。安全なアプリが作れるようになったら、次に意識したいのが「そのコードが本当に正しく動いているか」を保証する仕組みです...

こんにちは、かつコーチです。前回は、ログイン必須ページを守るProtected Routeの実装方法を解説しました。「誰がアクセスできるか」を制御できるようになったところで、今回は少し違う角度のセキュリティ対策を扱います。それがXSS（クロ...

こんにちは、かつコーチです。前回は、JWTを使ってログイン状態を保持する仕組みについて解説しました。トークンを発行してフロント側で保持できるようになったら、次に考えたいのが「ログインしていない人には見せたくないページ」の扱いです。マイページ...