2025-07

こんにちは、かつコーチです。前回は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本目のテーマは、リストを表示するコードを書くとほぼ必ず...