Expressjs 【Express】ミドルウェアとは？express.json()やカスタムミドルウェアの作り方
こんにちは、かつコーチです。Expressのコードを読んでいると、必ずと言っていいほどapp.use()という記述に出会います。「これって何をしているんだろう？」と疑問に思ったまま、なんとなくコピペしていませんか。この記事では、Expres...
JavaScript
Expressjs Expressjs 【Express】Expressのルーティングの基本（GET/POST/パラメータ）
こんにちは、かつコーチです。Expressでサーバーを立てられるようになった次のステップは、ルーティングを使いこなすことです。「GETとPOSTって何が違うの？」「URLの中の値ってどうやって取得するの？」という疑問に、この記事でしっかり答...
Expressjs 【Express.js】Expressで最小構成のサーバーを立てる（npm init〜起動まで）
こんにちは、かつコーチです。Node.jsの基本を学んだら、次に気になるのが「実際にサーバーを作ってみたい」ということではないでしょうか。この記事では、Node.jsのフレームワークであるExpressを使って、最小構成のサーバーを立てる手...
JavaScript 【Node.js】CommonJSとESモジュール（require/import）の違い
こんにちは、かつコーチです。Node.jsのコードを読んでいると、requireとimportの両方が出てきて混乱した経験はありませんか。「どっちを使えばいいのか分からない」「混ぜて使ったらエラーになった」という声をよく聞きます。この記事で...
JavaScript 【Node.js】npmとpackage.jsonの基本：パッケージ管理を理解する
こんにちは、かつコーチです。Node.jsを学び始めると、必ず出てくるのが「npm」と「package.json」です。「なんとなくコマンドを打っているけど、中身がよく分かっていない」という方も多いのではないでしょうか。この記事では、npm...
JavaScript 【Node.js】Node.jsとは？サーバーサイドJavaScriptの基本を理解する
こんにちは、かつコーチです。「Node.jsって聞いたことはあるけど、結局何なのか分からない」。そんな悩みを持つ方は多いです。ずっと記事にしていませんでしたが、この際まとめておきましょう。この記事では、Node.jsが何者なのかを、ブラウザ...
JavaScript 【Next.js】Next.jsでシンプルなブログアプリを作ってみる（Server Actions活用）
こんにちは、かつコーチです。前回はディレクトリ構成のベストプラクティスを解説しました。今回はいよいよNext.jsシリーズの最終回です。これまで学んできたApp Router、Server Components、Client Compone...
JavaScript 【Next.js】Next.jsプロジェクトのディレクトリ構成のベストプラクティス
こんにちは、かつコーチです。前回は「Module not found: next/router」というエラーへの対処法を紹介しました。つまずき系のTipsが続いたので、今回は少し視点を変えて、設計の話をします。Next.jsのApp Rou...
JavaScript 【Next.js】「Module not found: next/router」の解決法（Pages Router完全削除後の落とし穴）
こんにちは、かつコーチです。前回はlayout.tsxの再評価にまつわるつまずきを紹介しましたが、今回は少し毛色の違うエラーを扱います。App Routerだけを使っているはずなのに、突然Module not found: Can't re...
JavaScript 【Next.js】layout.tsxが再評価されず古い情報が残り続けた話
こんにちは、かつコーチです。前回はNext.jsでよく出る定番エラーをまとめましたが、今回はもう少し踏み込んだ、経験しないと気づきにくいつまずき事例を紹介します。テーマは「layout.tsxで取得したログイン状態が、ログアウトした後も画面...
JavaScript 【Next.js】Next.jsでよく出るエラーと解決法まとめ
こんにちは、かつコーチです。これまでNext.jsシリーズでは、App Routerの基本からルーティング、Server/Client Components、データ連携、認証、テスト、デプロイまでを一通り解説してきました。ここからの4本は少...
JavaScript 【React】Reactでよく出るエラーと解決法まとめ
こんにちは、かつコーチです。前回まででテスト・デプロイ・ビルド最適化と、開発から公開までの一連の流れを見てきました。ここからは実践Tips編として、Reactを書いていると誰もが一度はぶつかる定番エラーを、原因と解決法つきでまとめて紹介しま...
JavaScript 【React】ビルド最適化：バンドルサイズを小さくする方法
こんにちは、かつコーチです。前回は開発・本番で値を切り替える環境変数の管理方法を解説しました。デプロイ・環境変数と整えてくると、次に気になってくるのが「アプリの表示が遅い」という体感速度の問題です。今回は、その原因になりやすいバンドルサイズ...
JavaScript 【React】環境ごとの環境変数管理（.env）
こんにちは、かつコーチです。前回はVercelを使ったReactアプリのデプロイ手順を解説しました。デプロイができるようになると次にぶつかるのが、「開発中と本番で、APIの向き先やキーを切り替えたい」という悩みです。今回は、Reactアプリ...
JavaScript 【React】Reactアプリをvercelにデプロイする方法
こんにちは、かつコーチです。前回はテスト編の締めくくりとして、Playwrightを使ったE2Eテストを解説しました。ここからはデプロイ編に入り、実際に作ったReactアプリを世の中に公開する方法を学んでいきます。初回の今回は、Vercel...
JavaScript 【React】E2Eテスト入門：Playwrightでブラウザ操作を自動化する
こんにちは、かつコーチです。前回は「コンポーネントのユニットテストを書く」というテーマで、個々のコンポーネントを切り離してテストする方法を解説しました。今回はテスト編の締めくくりとして、実際のブラウザを操作しながらアプリ全体の動きを検証する...
JavaScript 【React】コンポーネントのユニットテストを書く
こんにちは、かつコーチです。前回は、React Testing Library（RTL）の基本的な使い方として、コンポーネントの描画結果を検証する方法を解説しました。今回はいよいよ、クリックや入力といったユーザー操作を伴うコンポーネントのユ...
JavaScript 【React】React Testing Library入門
こんにちは、かつコーチです。前回は、テストフレームワークJestの基本文法と環境構築を解説しました。sumのような単純な関数のテストはできるようになりましたが、Reactのコンポーネントは「画面に何が表示されるか」「ボタンを押したらどう変化...
JavaScript 【React】Jestの基本：Reactでテストを書く準備
こんにちは、かつコーチです。前回までは認証・セキュリティ編として、Protected RouteやXSS対策を扱ってきました。安全なアプリが作れるようになったら、次に意識したいのが「そのコードが本当に正しく動いているか」を保証する仕組みです...
JavaScript 【React】ReactアプリのXSS対策
こんにちは、かつコーチです。前回は、ログイン必須ページを守るProtected Routeの実装方法を解説しました。「誰がアクセスできるか」を制御できるようになったところで、今回は少し違う角度のセキュリティ対策を扱います。それがXSS（クロ...