Java 【Java】javac・javaコマンドで理解するコンパイルと実行の仕組み
こんにちは、かつコーチです。前回はIntelliJ IDEAでボタン一つでJavaを実行できるようになりました。ただ、IDEの「実行ボタン」の裏側で何が起きているかを知らないと、エラーが出たときに対処できません。今回は、IntelliJを使...
katsu-coach1215
Java Java 【Java】IntelliJ IDEAでJava開発環境を整える
こんにちは、かつコーチです。前回JDKをインストールし、コマンドラインでJavaを動かせるようになりました。とはいえ、メモ帳やターミナルだけで開発を続けるのは非効率です。今回は、Java開発の定番IDEであるIntelliJ IDEAを使っ...
Java 【Java】JDKのインストールとバージョン管理
こんにちは、かつコーチです。前回はJavaがどんな言語かを解説しました。今回は、実際にJavaのコードを動かすための第一歩、JDK（Java Development Kit）のインストールを行います。私は最初のインストール時に、PATH設定...
Java 【Java】Javaとは？オブジェクト指向と「一度書けばどこでも動く」を初心者向けに解説
こんにちは、かつコーチです。「Javaを学びたいけれど、そもそもJavaが何なのか分からない」という相談をよく受けます。名前が似ているJavaScriptと混同してしまう人も多く、私自身も学習を始めたころ「JavaScriptを勉強すればJ...
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（クロ...
JavaScript 【React】Protected Route（ログイン必須ページ）の実装方法
こんにちは、かつコーチです。前回は、JWTを使ってログイン状態を保持する仕組みについて解説しました。トークンを発行してフロント側で保持できるようになったら、次に考えたいのが「ログインしていない人には見せたくないページ」の扱いです。マイページ...
JavaScript 【React】JWTの扱い方：ログイン状態を保持する仕組み
こんにちは、かつコーチです。前回はReactアプリにおける認証の実装パターンを、全体像から解説しました。今回はその認証の裏側で動いている仕組み、JWT（JSON Web Token）にフォーカスして、Reactアプリでどう扱えばよいかを詳し...