JavaScript node.jsアップデート時に起こる対処法
こんにちは、かつコーチです。今回はNode.jsのupdateについてです。普段はあまり意識することがないのですが、updateするときに躓くところだったので、備忘録として残します。【Mac】Node.js/npmのアップデートで発生したエ...
JavaScript
JavaScript 
JavaScript 【React】Redux・Zustand・Context APIを同じアプリで実際に使い比べてみた
こんにちは、かつコーチです。前回はAPI連携ありのTODOアプリを、useStateとカスタムフックだけで実装しました。今回はReact編の最終回として、「同じ簡単なアプリを、状態管理の主要な選択肢それぞれで実装したらどう違うのか」を実際に...
JavaScript 【React】ReactとAPI連携で簡単なTODOアプリを作ってみる
こんにちは、かつコーチです。ここまでディレクトリ構成・Atomic Design・カスタムフックの設計パターンと、React設計の考え方を積み上げてきました。今回はいよいよ実践編として、それらを組み合わせながらAPI連携ありのTODOアプリ...
JavaScript 【React】カスタムフックの設計パターン集
こんにちは、かつコーチです。前回はAtomic Designで、コンポーネントの「見た目」の粒度を整理する考え方を解説しました。今回は、その裏側にある「ロジック」の整理方法、つまりカスタムフックの設計パターンを扱います。カスタムフックはus...
React 【React】Atomic Design入門：コンポーネントを整理する考え方
こんにちは、かつコーチです。前回はディレクトリ構成のベストプラクティスとして、種類別構成・機能別構成・Atomic Design構成の3つを比較しました。その中でも「粒度ごとにコンポーネントを分類する」という考え方であるAtomic Des...
JavaScript 【React】Reactプロジェクトのディレクトリ構成のベストプラクティス
こんにちは、かつコーチです。前回は「太らせないコンポーネント設計の考え方」というテーマで、1つのコンポーネントが責務を抱えすぎないようにする考え方を解説しました。今回はその一歩手前、そもそもファイルをどこに置くかという話です。コンポーネント...
JavaScript 【React】太らせないコンポーネント設計の考え方
こんにちは、かつコーチです。前回まで4回にわたって「エラー解決編」をお届けしてきました。今回からは「設計・アーキテクチャ編」に入ります。1本目のテーマは、Reactを書いていると誰もが一度は経験する「気づいたら1つのコンポーネントが数百行に...
JavaScript 【React】Reactアプリのパフォーマンスチューニング入門
こんにちは、かつコーチです。前回は「React DevToolsでコンポーネントの状態を確認する方法」を解説しました。今回は、DevToolsのProfilerタブで見つけた「重い箇所」を実際にどう改善していくか、パフォーマンスチューニング...
JavaScript 【React】React DevToolsでコンポーネントの状態を確認する方法
こんにちは、かつコーチです。前回は「無限re-renderが起きる原因と対処法」を解説しました。console.logを無限ループの中に埋め込んで原因を追う方法もありますが、正直かなり効率が悪いです。今回は、そういったバグ調査を格段に楽にし...
JavaScript 【React】無限re-renderが起きる原因と対処法
こんにちは、かつコーチです。前回は「keyがありません」警告を取り上げました。今回は、React学習者の多くが一度は通る「画面がフリーズする」「コンソールが真っ赤になる」という無限re-renderを扱います。Maximum update ...
JavaScript 【React】「keyがありません」警告の意味と対処法
こんにちは、かつコーチです。前回は「Reactでよく出るエラーと解決法まとめ」で、代表的なエラーを一通り見てきました。今回からは、個別のつまずきポイントをひとつずつ深掘りしていきます。1本目のテーマは、リストを表示するコードを書くとほぼ必ず...
JavaScript 【TypeScript】JavaScriptプロジェクトをTypeScriptに移行するコツ
こんにちは、かつコーチです。前回は、外部ライブラリの型定義（@types）の探し方・使い方について解説しました。そして今回が、TypeScript基礎編の最終回です。テーマは「動いているJavaScriptプロジェクトを、どうやってType...
JavaScript 【TypeScript】外部ライブラリの型定義（@types）の探し方・使い方
こんにちは、かつコーチです。前回は、「とりあえずany」から卒業するための考え方について解説しました。TypeScriptで開発をしていると、自分のコードではなく外部のライブラリをimportしただけで型エラーが出て困る、という場面によく出...
JavaScript 【TypeScript】「とりあえずany」から卒業するための考え方
こんにちは、かつコーチです。前回は、strictモードとtsconfig.jsonの主要オプションについて解説しました。strictモードを有効にしても、実は簡単に型チェックをすり抜ける方法があります。それが今回のテーマ、any型です。「型...
JavaScript 【TypeScript】strictモードとは？tsconfig.jsonの主要オプション解説
こんにちは、かつコーチです。前回は、よくあるTypeScriptエラーの読み方について解説しました。今回は少し視点を変えて、そもそもTypeScriptが「どこまで厳しくエラーを検知するか」を決めているtsconfig.jsonのstric...
JavaScript 【TypeScript】よくあるTypeScriptエラーの読み方
こんにちは、かつコーチです。前回は、非nullアサーション（!）を使うべき場面・避けるべき場面について解説しました。型注釈やジェネリクスを覚えてきても、実際にコードを書いていると必ずぶつかるのが「赤い波線」と「見慣れない英語のエラーメッセー...
Expressjs 【Express】ExpressアプリをRenderにデプロイする方法
こんにちは、かつコーチです。ローカル環境でExpressアプリを作れるようになったら、次は誰でもアクセスできるようにインターネット上に公開してみましょう。この記事では、無料枠から始められるホスティングサービスRenderを使って、Expre...
Expressjs 【Express】エラーハンドリングミドルウェアで一元的にエラーを処理する（よくあるエラーの実例つき）
こんにちは、かつコーチです。Expressで開発をしていると、必ずと言っていいほどエラーに遭遇します。私自身も学習中に何度もサーバーをクラッシュさせたり、原因不明のエラーに数時間悩まされたりしてきました。この記事では、そんな実体験も交えなが...
Expressjs 【Express】シンプルなREST APIを作る（CRUD実装）
こんにちは、かつコーチです。ルーティングやミドルウェアを学んだら、次はいよいよ実践です。この記事では、データベースを使わずに、配列（インメモリデータ）を使ったシンプルなREST APIを作りながら、CRUDの基本を身につけます。CRUDとは...
Expressjs 【Express】ルーターを分割して整理する（express.Router()の使い方）
こんにちは、かつコーチです。Expressでアプリを作り始めると、app.js（またはindex.js）にapp.get()やapp.post()をどんどん書き足していきがちです。最初は数個だったルートも、機能が増えるにつれて数十行、数百行...