JavaScript 【React】Redux Toolkit入門：状態管理ライブラリの定番
こんにちは、かつコーチです。前回は、Context APIを使って実践的なグローバル状態を作る方法を解説しました。Context APIはアプリ全体の状態を共有するのに便利ですが、状態の種類が増えたり、更新ロジックが複雑になったりすると、だ...
上級者向け
JavaScript JavaScript 【React】useReducerで複雑な状態管理を整理する
こんにちは、かつコーチです。前回は、カスタムフックを自作してロジックを再利用する方法を解説しました。今回は、状態管理の話をもう一段階深く掘り下げます。useState で状態を管理していると、フォームの入力値・エラー内容・送信中フラグなど、...
Django 【Django】pytest-djangoでテストをもっと書きやすくする
こんにちは、かつコーチです。前回は標準のTestCaseによるテストの書き方を扱いました。TestCaseはDjangoに標準で組み込まれている分、追加のライブラリなしで始められるのが魅力です。一方で、テストの規模が大きくなってくると、クラ...
Django 【Django】カスタムユーザーモデル（AbstractUser）を実装する
こんにちは、かつコーチです。前回の記事ではDjango標準のUserモデルを使ったログイン機能を扱いました。ただ実務では、標準のUserモデルをそのまま使い続けるプロジェクトはむしろ少数派です。「メールアドレスでログインさせたい」「電話番号...
Django 【Django】N+1問題とselect_related・prefetch_relatedでの解決方法
こんにちは、かつコーチです。前回はフォーム（ModelForm）でのバリデーション実装を解説しました。今回は、DjangoのORMを使う上で避けて通れない「N+1問題」を、select_relatedとprefetch_relatedの比較...
Laravel 【Laravel】GitHub ActionsでLaravelのテストをCI連携する
こんにちは、かつコーチです。前回まで、FactoryとRefreshDatabaseを使ってテストデータを整える方法を解説してきました。ローカル環境で php artisan test を実行すれば、テストが通るかどうかは確認できます。です...
JavaScript 【TypeScript】as constとリテラル型推論
こんにちは、かつコーチです。前回はunion型を安全に絞り込む「型ガード」を扱いました。今回はその型ガードとも相性がいい、as const（値を変更不可・かつ最も狭い型として扱う指示）とリテラル型推論を紹介します。「配列や設定オブジェクトを...
JavaScript 【TypeScript】ジェネリクスの制約（extends）を使いこなす
こんにちは、かつコーチです。前回はジェネリクスの基本を扱い、型を引数のように渡す考え方を紹介しました。今回はその一歩先、ジェネリクスの制約（extends）を扱います。「ジェネリクスは書けるようになったけど、T に対して自由にプロパティへア...
Redis 【Redis】Redisをセッション管理・Pub/Subに使う
こんにちは、かつコーチです。ここまでの記事で、Redisの基本操作・データ構造・キャッシュとしての使い方を扱ってきました。今回はもう一歩踏み込んで、実務でよく採用される2つの用途、セッション管理とPub/Subを扱います。いずれも前提知識と...
Oracle Database 【Oracle Database】表領域とユーザー・権限管理の基本
こんにちは、かつコーチです。Oracle Database編の5本目です。今回は上級者向けの内容として、Oracle独自の表領域設計と、ユーザー・権限管理を扱います。PL/SQLの基本、シーケンス・ROWNUM・ROWIDの違いを理解してい...
MongoDB 【MongoDB】レプリカセットの基本：MongoDBの可用性を確保する仕組み
こんにちは、かつコーチです。本番運用のMongoDBで避けて通れないのがレプリカセット（同じデータを複数のサーバーに複製し、1台が落ちても自動的に処理を継続する仕組み）です。単一サーバー運用のまま本番投入してしまい、サーバー障害でサービス全...
MongoDB 【MongoDB】MongoDBのスキーマ設計：埋め込み（Embedding）と参照（Referencing）の使い分け
こんにちは、かつコーチです。MongoDBのスキーマ設計で最初にぶつかる壁が、「関連するデータを1つのドキュメントに埋め込む（Embedding）か、別コレクションに分けて参照（Referencing）するか」という判断です。RDBMSの正...
MongoDB 【MongoDB】集約パイプライン（Aggregation Pipeline）の基本と実践的な使い方
こんにちは、かつコーチです。MongoDBでの集計処理といえば、まず名前が挙がるのが集約パイプライン（複数の処理ステージを連結してドキュメントを段階的に加工・集計する仕組み）です。SQLのGROUP BYに慣れている方ほど、最初にこの仕組み...
JavaScript 【Next.js】middleware.tsでログイン必須ページを保護する
こんにちは、かつコーチです。前回はAuth.jsを使って、Next.jsアプリにログイン・ログアウト機能を実装しました。ただしAuth.jsのauth()をページごとに呼び出す方式だと、保護したいページが増えるたびにチェック処理を書き足すこ...
JavaScript 【Next.js】Auth.js（NextAuth）で認証機能を実装する
こんにちは、かつコーチです。ここまでのシリーズでは、App Routerの基本構造やServer Components・Client Componentsの使い分け、外部APIとのデータ連携まで扱ってきました。アプリの骨格ができてくると、次...
JavaScript 【Next.js】revalidatePathを呼んだのに画面が更新されなかった話と対処法
こんにちは、かつコーチです。前回はRoute Handlersを使ったAPIエンドポイントの作り方と、Server Actionsとの使い分けを解説しました。Server Actionsでデータを更新した後にキャッシュを再検証するreval...
JavaScript 【Next.js】Client Componentの中にServer Componentを混ぜてバンドルが膨らんだ話
こんにちは、かつコーチです。前回まででNext.jsの基本ルーティングとServer Actionsを使ったデータ更新まで解説してきました。ここからはN11〜N15の5本で、Server ComponentsとClient Componen...
JavaScript Vue×Piniaで簡単なTODOアプリを作ってみる
こんにちは、かつコーチです。前回は、Vueプロジェクトのディレクトリ構成のベストプラクティスについて解説しました。今回はVue.js編の最終回として、これまで学んできたComposition API・Pinia・型定義・設計の考え方を総動員...
JavaScript 【Vue】Vueプロジェクトのディレクトリ構成のベストプラクティス
こんにちは、かつコーチです。前回は、Vueアプリのパフォーマンスチューニングについて解説しました。今回は視点を変えて、「アプリが育ってきたときにどうディレクトリを構成するか」という設計のテーマを扱います。Vue CLIやViteでプロジェク...
JavaScript 【Vue】Vueアプリのパフォーマンスチューニング入門
こんにちは、かつコーチです。前回は、リアクティビティが効かない現象の原因と対処法を掘り下げました。今回は視点を変えて、「動くけど遅い」Vueアプリをどう改善していくか、パフォーマンスチューニングの入門編を扱います。やみくもに最適化するのでは...