フロントエンド

React Hook Form と Zod を zodResolver でつなぐ実装を、ログイン・新規登録フォームを題材に一気通貫でまとめます。z.infer での型導出、.refine でのパスワード一致、formState.errors の分割代入まで。さらに register の spread が非制御コンポーネントで効く理由と、Controller でラップしないと対応できないケースの境界を整理します。

pnpm製プロジェクトで、ターミナルのESLintは動くのにエディタ上では警告が一切出ない。原因はプラグインのhoist、決め手は拡張のログだった。.npmrcでの解決とモノレポでの設定まで。

TanStack Query を Next.js App Router の静的エクスポート構成に入れる手順を、Providerの初期化(use client)→layoutラップ→共通fetch(lib/api.ts)→hooks(1ファイル1フック)→コンポーネントでの使い方、まで一気通貫でまとめます。

保存(Ctrl+S)のたびに未使用importを消し、importの並び順も自動で揃える設定を、ESLint flat config で作ります。eslint-plugin-unused-imports と simple-import-sort、VS Code の codeActionsOnSave、Prettier との併用・順序までまとめます。

git ルートに husky を置き、frontend の ESLint（no-console・any 禁止・未使用/import 整列）と Prettier（Tailwind クラス整列）を lint-staged 経由で pre-commit 自動実行する構成を、実際の設定ファイルとハマりどころつきで解説します。

app/ はルーティング専用に薄く保ち、ドメインロジックは features/ に寄せる。Server Actions の命名規約と、認証を lib/auth に集約し認可をデータ操作とセットで書く3層の考え方を整理します。

Record<K, V> はキーと値の型からオブジェクト型を作るユーティリティ型。インデックスシグネチャとの違い、網羅性チェック、satisfies との組み合わせ、落とし穴までを整理します。

rehype-pretty-code + Shiki でランタイム JS ゼロのコードハイライト。ライト/ダーク両対応の方法も。