Django 【Django】Django REST Frameworkでシリアライザとアーキテクチャを設計する
こんにちは、かつコーチです。前回はFat Model・Skinny Viewの考え方を扱いましたが、DRFでAPIを組むと今度は「シリアライザに何を書くか」で同じ問題に突き当たります。シリアライザはバリデーションもデータ変換もできてしまうた...
上級者向け
Django Django 【Django】Fat Model・Skinny Viewの考え方とビジネスロジックの置き場所
こんにちは、かつコーチです。Djangoでアプリを育てていくと、いつの間にかviews.pyが数百行になり、条件分岐だらけで読めなくなる瞬間が来ます。原因の多くは、ビジネスロジックの置き場所が決まっていないことです。この記事では、Djang...
Laravel 【Laravel】Laravel×Vue/Inertiaで簡単なTODOアプリを作ってみる
こんにちは、かつコーチです。これまでService・Repository・Form Request・ディレクトリ構成と、Laravelの設計面を中心に見てきました。ここからは実践編として、フロントエンドにVueを使い、Inertia.jsで...
Laravel 【Laravel】Laravelのディレクトリ構成をカスタマイズする考え方
こんにちは、かつコーチです。これまでService・Repositoryパターン、Form Requestと、責務ごとにクラスを分ける方法を紹介してきました。クラスの数が増えてくると、次に気になるのが「これらをどこに置くか」というディレクト...
Laravel 【Laravel】Service・Repositoryパターンを導入するメリットと実装例
こんにちは、かつコーチです。前回は「太らせないControllerの書き方」というテーマで、Controllerの責務を最小限に絞る考え方を扱いました。では、Controllerから追い出したロジックはどこに行くべきなのでしょうか。今回はそ...
Laravel 【Laravel】MVCを実践する：太らせないControllerの書き方
こんにちは、かつコーチです。前回はパフォーマンスチューニングの基本を解説しました。今回からは設計・アーキテクチャ編に入り、最初のテーマとして「Fat Controller（太ったコントローラ）」問題を扱います。Laravelは書きやすさゆえ...
Laravel 【Laravel】Laravelのパフォーマンスチューニング入門
こんにちは、かつコーチです。前回は外部APIとの連携方法を解説しました。今回は、実装したアプリケーションが「遅い」と感じ始めたときに見直すべき、Laravelのパフォーマンスチューニングの基本を扱います。やみくもにキャッシュを増やすのではな...
JavaScript 【TypeScript】JavaScriptプロジェクトをTypeScriptに移行するコツ
こんにちは、かつコーチです。前回は、外部ライブラリの型定義（@types）の探し方・使い方について解説しました。そして今回が、TypeScript基礎編の最終回です。テーマは「動いているJavaScriptプロジェクトを、どうやってType...
Java 【Java】Javaの内部クラス・匿名クラスの使い方を種類別に整理する
こんにちは、かつコーチです。Javaには4種類の「クラスの中に書くクラス」があります。今回はその使い分けと、実際に手を動かして分かった注意点を整理します。4種類の内部クラスの違いメンバ内部クラス（Inner Class）外側のクラスのインス...
Java 【Java】Javaのinterfaceデフォルトメソッド・静的メソッドを使いこなす
こんにちは、かつコーチです。今回はJava 8以降のinterfaceに追加された、デフォルトメソッドと静的メソッドを扱います。「interfaceは抽象メソッドしか持てない」という前提知識をアップデートしたい方向けの内容です。デフォルトメ...
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】layout.tsxが再評価されず古い情報が残り続けた話
こんにちは、かつコーチです。前回はNext.jsでよく出る定番エラーをまとめましたが、今回はもう少し踏み込んだ、経験しないと気づきにくいつまずき事例を紹介します。テーマは「layout.tsxで取得したログイン状態が、ログアウトした後も画面...
JavaScript 【React】ビルド最適化：バンドルサイズを小さくする方法
こんにちは、かつコーチです。前回は開発・本番で値を切り替える環境変数の管理方法を解説しました。デプロイ・環境変数と整えてくると、次に気になってくるのが「アプリの表示が遅い」という体感速度の問題です。今回は、その原因になりやすいバンドルサイズ...
JavaScript 【React】E2Eテスト入門：Playwrightでブラウザ操作を自動化する
こんにちは、かつコーチです。前回は「コンポーネントのユニットテストを書く」というテーマで、個々のコンポーネントを切り離してテストする方法を解説しました。今回はテスト編の締めくくりとして、実際のブラウザを操作しながらアプリ全体の動きを検証する...
JavaScript 【React】Protected Route（ログイン必須ページ）の実装方法
こんにちは、かつコーチです。前回は、JWTを使ってログイン状態を保持する仕組みについて解説しました。トークンを発行してフロント側で保持できるようになったら、次に考えたいのが「ログインしていない人には見せたくないページ」の扱いです。マイページ...
JavaScript 【React】JWTの扱い方：ログイン状態を保持する仕組み
こんにちは、かつコーチです。前回はReactアプリにおける認証の実装パターンを、全体像から解説しました。今回はその認証の裏側で動いている仕組み、JWT（JSON Web Token）にフォーカスして、Reactアプリでどう扱えばよいかを詳し...
JavaScript 【React】Reactアプリに認証機能を実装するパターン
こんにちは、かつコーチです。前回はReact Hook Formを使ったフォームバリデーションの実装方法を解説しました。フォームでログイン情報を受け取れるようになったところで、今回はいよいよ「認証」を扱います。認証はライブラリの使い方だけで...
JavaScript 【React】React Query（TanStack Query）でデータ取得を効率化する
こんにちは、かつコーチです。前回はfetchとuseEffectを組み合わせた基本的なデータ取得の方法を解説しました。isLoadingやerrorの管理、リクエストのキャンセルまで自前で書くと、コード量がどんどん増えていくことを実感しても...
JavaScript 【React】Redux・Zustand・Context API、結局どれを使うべき？
こんにちは、かつコーチです。ここまで3回にわたって、useReducer、Context API、Redux Toolkit、Zustandと、状態管理まわりの選択肢を一つずつ解説してきました。「結局、自分のプロジェクトではどれを使えばいい...