# Reinvent Notes

> 車輪を再発明して学ぶ。個人の技術ノート (TypeScript / JavaScript / React / フロントエンド / バックエンド / AI エージェント / インフラ / 構造化データ・SEO)。記事は全て日本語。

## Docs

### はじめに

- [ローカル開発環境](https://notes.rewheel.dev/docs/getting-started/local-dev): Reinvent Notes を localhost で起動・編集するためのセットアップ手順。Node.js / yarn の必要環境、yarn start / build / serve コマンド、ブログ / Docs 記事の追加方法までを 1 ページで解説。
- [はじめに](https://notes.rewheel.dev/docs/intro): Reinvent Notes のドキュメント section。JavaScript (全 11 章)・TypeScript (全 21 章)・React 入門 (全 29 章)・Tailwind CSS (全 18 章)・Clean Code (全 13 記事)・TypeScript デザインパターン (全 16 章)・構造化データ・shadcn/ui Button・Claude Code ハーネスガイドなど、ブログより体系的な知見をトピック別に整理しています。
- [Markdown 記法リファレンス](https://notes.rewheel.dev/docs/syntax-reference): Reinvent Notes で使える Markdown と Docusaurus 拡張記法 (Admonition / Mermaid / KaTeX / コードハイライト等) の網羅的リファレンス。サンプルとレンダリング結果を併記、コピペ用早見表。

### TypeScript

- [TypeScript ガイド](https://notes.rewheel.dev/docs/typescript): TypeScript を言語仕様から実践まで体系的に学ぶ全 21 章のガイド。入門・基本の型・関数・クラスと OOP・高度な型システム・ジェネリクス・開発環境・実践を段階的にカバー。
- [高度な型操作](https://notes.rewheel.dev/docs/typescript/advanced-types): この章では、TypeScriptの高度な型操作機能について学びます。これらを組み合わせることで、より型安全で表現力豊かなコードが書けるようになります。
- [基本的なデータ型](https://notes.rewheel.dev/docs/typescript/basic-types): この章では、TypeScriptの基本的なデータ型について学びます。
- [クラスの基本](https://notes.rewheel.dev/docs/typescript/classes-basics): この章では、TypeScriptにおけるクラスの基本的な書き方を学びます。
- [継承とインターフェース](https://notes.rewheel.dev/docs/typescript/classes-inheritance): この章では、TypeScriptにおけるクラスの継承とインターフェースについて学びます。
- [Express + ベストプラクティス](https://notes.rewheel.dev/docs/typescript/express-best-practices): この章では、ExpressとTypeScriptを組み合わせた型安全なバックエンド開発について学びます。
- [総合演習プロジェクト](https://notes.rewheel.dev/docs/typescript/final-project): この章では、これまで学んだ知識を活かして、CLIタスク管理ツールを構築します。
- [最初のプログラムと型エラー](https://notes.rewheel.dev/docs/typescript/first-program): この章では、最初のTypeScriptプログラムを作成し、コンパイルと実行を体験します。
- [関数の応用](https://notes.rewheel.dev/docs/typescript/functions-advanced): この章では、TypeScriptにおける関数のより高度な機能について学びます。
- [関数の基本](https://notes.rewheel.dev/docs/typescript/functions-basics): この章では、TypeScriptにおける関数の基本的な書き方を学びます。
- [ジェネリクスの基礎](https://notes.rewheel.dev/docs/typescript/generics-basics): この章では、TypeScriptの代表的な機能の 1 つであるジェネリクス（Generics）について学びます。
- [ジェネリクスの制約](https://notes.rewheel.dev/docs/typescript/generics-constraints): この章では、ジェネリクスに制約を設ける方法と、ジェネリッククラス・インターフェースについて学びます。
- [TypeScriptとは・環境構築](https://notes.rewheel.dev/docs/typescript/introduction): この章では、TypeScriptの基本概念と開発環境の構築方法を学びます。
- [Mapped TypesとConditional Types](https://notes.rewheel.dev/docs/typescript/mapped-conditional): この章では、TypeScriptの高度な型機能であるMapped Types（マップ型）とConditional Types（条件付き型）について学びます。これらを理解すると、独自のユーティリティ型を作成できるようになります。
- [モジュールとtsconfig](https://notes.rewheel.dev/docs/typescript/modules-config): この章では、TypeScriptのモジュールシステムとプロジェクト設定について学びます。
- [オブジェクト型・型エイリアス](https://notes.rewheel.dev/docs/typescript/object-type-alias): この章では、オブジェクト型の定義方法と、型エイリアス（type）を使った再利用可能な型の作成方法を学びます。
- [React + TypeScript](https://notes.rewheel.dev/docs/typescript/react-typescript): この章では、ReactとTypeScriptを組み合わせた型安全なフロントエンド開発について学びます。
- [特殊な型](https://notes.rewheel.dev/docs/typescript/special-types): この章では、TypeScriptの特殊な型について学びます。
- [開発ツールチェーン](https://notes.rewheel.dev/docs/typescript/toolchain): この章では、TypeScriptプロジェクトで使用する開発ツールについて学びます。
- [型の絞り込み](https://notes.rewheel.dev/docs/typescript/type-narrowing): この章では、TypeScriptの型システムの中核となる「型の絞り込み（Type Narrowing）」について学びます。
- [Union型・リテラル型・enum](https://notes.rewheel.dev/docs/typescript/union-literal-enum): この章では、複数の型を組み合わせるUnion型、特定の値のみを許可するリテラル型、そして関連する定数をまとめるenumについて学びます。
- [ユーティリティ型](https://notes.rewheel.dev/docs/typescript/utility-types): この章では、TypeScriptに組み込まれているユーティリティ型（Utility Types）について学びます。

### JavaScript

- [JavaScript ガイド](https://notes.rewheel.dev/docs/javascript): JavaScript の基礎を変数・データ型から関数・配列・DOM 操作・非同期処理まで体系的に学ぶ全 11 章のガイド。各章にコード例と初級者向け解説を添え、モダンな書き方 (アロー関数・分割代入・async/await・?. / ??) まで段階的にカバーします。
- [配列](https://notes.rewheel.dev/docs/javascript/arrays): 配列の作成・アクセス・操作と高階関数 (map / filter / reduce) を解説。Array.at() による末尾アクセス、includes と indexOf の使い分け、破壊的・非破壊的メソッドの違いまで整理します。
- [非同期処理](https://notes.rewheel.dev/docs/javascript/async): コールバックから Promise・async/await への流れを図解付きで解説。Promise.all / allSettled / any の使い分け、マイクロタスクによる実行順序まで初級者向けに整理します。
- [ベストプラクティス](https://notes.rewheel.dev/docs/javascript/best-practices): 命名規則・コードの構造化・エラー処理・モジュール化・デバッグ技術を解説。読みやすく保守しやすい JavaScript を書くための基本的な習慣を実例付きで整理します。
- [条件分岐](https://notes.rewheel.dev/docs/javascript/conditionals): if 文・三項演算子・switch 文による条件分岐を解説。truthy / falsy の 6 つの falsy 値、論理演算子の短絡評価、Null 合体演算子 ?? と || の使い分けまで実例で整理します。
- [データ型](https://notes.rewheel.dev/docs/javascript/data-types): JavaScript のプリミティブ型 7 種と参照型、typeof 演算子の使い方を解説。typeof null が object になる歴史的経緯、null は === で・配列は Array.isArray() で判定する正しい方法まで整理します。
- [DOM 操作](https://notes.rewheel.dev/docs/javascript/dom): DOM を使った HTML 要素の取得・操作・生成を解説。textContent と innerHTML の使い分けと XSS の注意、HTMLCollection と NodeList の違いまで初級者向けに整理します。
- [イベント処理](https://notes.rewheel.dev/docs/javascript/events): addEventListener によるイベントリスナー登録、once / passive オプション、イベント伝播（キャプチャ・バブリング）、closest を使ったイベント委任まで実例と図解で整理します。
- [関数](https://notes.rewheel.dev/docs/javascript/functions): 関数宣言・関数式・アロー関数の違いと this の扱いを解説。デフォルト引数・レスト構文、アロー関数のレキシカル this、可変長引数の書き方まで実例付きで整理します。
- [ループ処理](https://notes.rewheel.dev/docs/javascript/loops): for / while / do-while / for...of / for...in の書き方と使い分けを解説。break・continue、entries() でインデックス取得、for...in を配列に使わない理由まで初級者向けに整理します。
- [オブジェクト](https://notes.rewheel.dev/docs/javascript/objects): オブジェクトリテラル・分割代入・スプレッド構文・操作メソッドを解説。プロパティの省略記法と計算プロパティ名、オプショナルチェイニング ?. による安全なアクセスまで実例で整理します。
- [変数と定数](https://notes.rewheel.dev/docs/javascript/variables): let / const / var の違いとスコープ・ホイスティング・TDZ を初級者向けに解説。const は再代入できないが中身は変更できる点、var が関数スコープで漏れる問題まで実例で整理します。

### React

- [React 入門](https://notes.rewheel.dev/docs/react): モダンな React 開発 (Vite + TypeScript + Tailwind CSS) を基礎から体系的に学ぶ全 30 章のガイド。JavaScript の前提から Hooks・状態管理・パフォーマンス・Next.js・フルスタック実装までステップを踏んで進められます。
- [クラスコンポーネント](https://notes.rewheel.dev/docs/react/class-components): この章では、Reactのクラスコンポーネントについて学びます。現在のReact開発では関数コンポーネントが主流ですが、既存のコードベースの理解やError Boundaryの実装のために知識が必要です。
- [コンポーネント](https://notes.rewheel.dev/docs/react/components): この章では、Reactの基本単位であるコンポーネントについて学びます。
- [条件分岐とリスト表示](https://notes.rewheel.dev/docs/react/conditional-rendering): この章では、条件に応じたレンダリングと、配列データのリスト表示を学びます。
- [カスタムフック](https://notes.rewheel.dev/docs/react/custom-hooks): この章では、ロジックを再利用可能な形で抽出するカスタムフックについて学びます。
- [デバッグ](https://notes.rewheel.dev/docs/react/debugging): この章では、Reactアプリケーションのデバッグ手法とReact Developer Toolsの使い方を学びます。
- [イベントハンドリング](https://notes.rewheel.dev/docs/react/events): この章では、Reactでのイベント処理について学びます。
- [フォーム](https://notes.rewheel.dev/docs/react/forms): この章では、Reactでのフォームの扱い方を学びます。
- [フルスタック実践プロジェクト](https://notes.rewheel.dev/docs/react/fullstack-project): この章では、これまで学んだすべての知識を統合し、React + NestJS + Prismaによるプロジェクト管理アプリ（Trelloライク）を構築します。
- [この本について](https://notes.rewheel.dev/docs/react/introduction): 本書は、モダンな React 開発を基礎から体系的に学ぶための入門書です。JavaScriptの基礎からReactの高度なトピックまで、実践的なスキルを段階的に身につけることができます。
- [JavaScript基礎（ES6+）](https://notes.rewheel.dev/docs/react/javascript-essentials): Reactを学ぶ前に、モダンJavaScript（ES6以降）の重要な機能を確認しましょう。これらの知識はReact開発で頻繁に使用します。
- [JSXの基本](https://notes.rewheel.dev/docs/react/jsx-basics): この章では、ReactのUIを記述するための構文であるJSXを学びます。
- [NestJSとPrismaでバックエンド構築](https://notes.rewheel.dev/docs/react/nestjs-prisma): この章では、NestJSとPrismaを使用して、React SPAのためのバックエンドAPIを構築します。
- [Next.js入門](https://notes.rewheel.dev/docs/react/nextjs-intro): この章では、Reactのフルスタックフレームワークである Next.js について学びます。
- [パフォーマンス最適化](https://notes.rewheel.dev/docs/react/performance): この章では、Reactアプリケーションのパフォーマンスを最適化するための手法を学びます。
- [PortalとModal](https://notes.rewheel.dev/docs/react/portal-modal): この章では、ReactのcreatePortalを使用したモーダルの実装について学びます。
- [実践プロジェクト](https://notes.rewheel.dev/docs/react/project): この章では、これまで学んだ知識を活かして、実践的なタスク管理アプリを構築します。
- [Props](https://notes.rewheel.dev/docs/react/props): この章では、コンポーネントにデータを渡すためのPropsについて学びます。
- [ルーティング（React Router）](https://notes.rewheel.dev/docs/react/react-router): この章では、React RouterによるSPAのルーティングを学びます。
- [開発環境の構築](https://notes.rewheel.dev/docs/react/setup): この章では、Vite + React + TypeScriptの開発環境を構築します。
- [SPA認証の設計](https://notes.rewheel.dev/docs/react/spa-authentication): この章では、シングルページアプリケーション（SPA）における認証の設計と実装について学びます。
- [State（useState）](https://notes.rewheel.dev/docs/react/state): この章では、コンポーネントの状態を管理するStateについて学びます。
- [スタイリング概要](https://notes.rewheel.dev/docs/react/styling-overview): この章では、Reactにおけるスタイリング手法の全体像を把握し、各アプローチの特徴と使い分けを学びます。
- [Tailwind CSS (React 統合パターン)](https://notes.rewheel.dev/docs/react/tailwind): React 開発でデファクトとなった Tailwind CSS を React で実用するための章。セットアップと基本は別ガイドに任せ、本章は variants 設計・clsx / tailwind-merge / cn ユーティリティ・shadcn/ui との連携など React 統合特化のパターンを扱います。
- [データフェッチング（TanStack Query）](https://notes.rewheel.dev/docs/react/tanstack-query): この章では、サーバー状態管理のデファクトスタンダードである「TanStack Query」を学びます。
- [useContext](https://notes.rewheel.dev/docs/react/usecontext): この章では、コンポーネントツリー全体でデータを共有するための`useContext`フックについて学びます。
- [useEffect](https://notes.rewheel.dev/docs/react/useeffect): この章では、副作用（Side Effect）を扱う`useEffect`フックについて学びます。
- [useReducer](https://notes.rewheel.dev/docs/react/usereducer): この章では、複雑な状態ロジックを管理するための`useReducer`フックについて学びます。
- [useRefとDOM操作](https://notes.rewheel.dev/docs/react/useref): この章では、DOMへの直接アクセスや値の保持に使用する`useRef`フックと、関連するAPIについて学びます。
- [Zod でスキーマバリデーション](https://notes.rewheel.dev/docs/react/zod): Zod でスキーマを定義し、型推論・React Hook Form 連携・API レスポンスの実行時検証までを学びます。
- [状態管理（Zustand）](https://notes.rewheel.dev/docs/react/zustand): この章では、React 開発で人気の状態管理ライブラリ「Zustand」を学びます。

### フロントエンド

- [フロントエンド](https://notes.rewheel.dev/docs/frontend): React・Tailwind CSS・shadcn/ui などフロントエンド開発に関するノートをまとめるドメインのハブ。UI 構築・スタイリング・コンポーネント設計を扱う。

### バックエンド

- [バックエンド](https://notes.rewheel.dev/docs/backend): API 設計・認証・データベース (SQL/NoSQL) などサーバーサイド開発に関するノートをまとめるドメイン。Laravel × DDD × クリーンアーキテクチャ実践入門 (全 20 章)、PayloadCMS 入門 (全 7 章)、データベース設計入門 (全 19 章 + 用語集 + 設計テンプレ)、PHPクラス設計入門 (全 14 章) を公開中。
- [データベース設計入門 — Jr エンジニアが業務で設計まで行えるレベルへ](https://notes.rewheel.dev/docs/backend/database): API バックエンドや業務アプリの DB スキーマ設計を始める Jr エンジニア向けの実践ガイド。第 1 部 基礎 → 第 2 部 設計 → 第 3 部 応用 → 第 4 部 実践 の 19 章 + 用語集 + 設計テンプレート集で、要件 → E-R 図 → テーブル定義 → SQL までを通読で身につけます。
- [第15章 認証・認可システムの設計 — パスワード・セッション・MFA・監査ログ](https://notes.rewheel.dev/docs/backend/database/auth-system): 認証 (Authentication) と認可 (Authorization) の違いから、パスワードハッシュ (bcrypt/argon2)、セッション管理、多要素認証 (MFA / TOTP)、アカウントロック (OWASP/NIST 準拠)、監査ログまでをジュニア向けに DB 設計の観点で解説します。
- [第4章 CRUD と ACID — データを安全に出し入れする仕組み](https://notes.rewheel.dev/docs/backend/database/crud-and-acid): データベースの 4 つの基本操作 (CRUD) と、複数の操作をまとめて扱うトランザクション・ACID 特性 (原子性・一貫性・独立性・永続性) を、銀行振込などの具体例とともに解説します。
- [第6章 DBMS と SQL — データを操作する仕組みと共通言語](https://notes.rewheel.dev/docs/backend/database/dbms-and-sql): DBMS の役割 (SQL 解析・トランザクション管理・権限・最適化) と、SQL の 4 つの分類 (DDL/DML/DCL/TCL)、主要 RDBMS 製品 (PostgreSQL / MySQL / SQLite / Oracle / SQL Server) の特徴と使い分けをジュニア向けに解説します。
- [第9章 システム設計の流れ — 概念・論理・物理の 3 段階](https://notes.rewheel.dev/docs/backend/database/design-flow): システム開発全体の流れの中でデータベース設計がどこに位置し、概念設計・論理設計・物理設計の 3 段階でどう抽象から具体へ進めるかをジュニア向けに解説します。
- [第13章 データベース設計の実践 — 要件から CREATE TABLE まで](https://notes.rewheel.dev/docs/backend/database/design-practice): 帳票や業務要件を起点にエンティティを抽出し、E-R 図を起こし、正規化して CREATE TABLE まで一気通貫で進める手順を、レストラン注文と社内 SNS の 2 題でジュニア向けに示します。
- [設計テンプレート集 — データベース設計入門](https://notes.rewheel.dev/docs/backend/database/design-templates): Jr エンジニアが実務で持ち込める設計テンプレートとチェックリスト集。命名規則・正規化・キー設計・レビュー観点を一覧化し、新規プロジェクトで「次に何を確認すべきか」をすぐ参照できる形にまとめています。
- [第12章 E-R 図の作成方法 — 業務要件を視覚化する](https://notes.rewheel.dev/docs/backend/database/er-diagram): E-R 図 (Entity-Relationship Diagram) の基本記法 (エンティティ・属性・リレーションシップ・カーディナリティ) と、業務要件からエンティティを抽出して E-R 図を起こす手順、主要なツール (mermaid / draw.io / PlantUML) をジュニア向けに解説します。
- [第1章 データベースの基本概念 — なぜ整理して保存するか](https://notes.rewheel.dev/docs/backend/database/fundamentals): データベースを「整理されたデータの集まり」として捉え、ファイルや表計算ソフトでの管理と何が違うのか、一意性 (ID) や検索性などの基本機能をジュニア向けに解説します。
- [用語集 — データベース設計入門](https://notes.rewheel.dev/docs/backend/database/glossary): 本ガイドで登場した専門用語の即引き辞典。Jr エンジニアが章の本文を読む途中で「あの用語の定義は?」となったとき、ここで素早く確認できます。
- [第19章 インデックス設計入門 — 検索を速くする張り方と落とし穴](https://notes.rewheel.dev/docs/backend/database/index-design): インデックスが検索を速くする仕組み (B-Tree の直感) から、どのカラムに張るか (WHERE / JOIN / ORDER BY)、複合インデックスのカラム順序、部分インデックス、EXPLAIN の読み方、張りすぎの害、UUID 主キーとの相性までを、設計時の判断に絞ってジュニア向けに解説します。
- [第10章 データベースのキー概念 — 主キー・外部キー・複合キー・代理キー](https://notes.rewheel.dev/docs/backend/database/key-concepts): 主キー・外部キー・候補キー・複合キー・代理キーと自然キーの違いを整理し、ハイブリッドアプローチ (代理キー = PK + 自然キー = unique 制約) の現代ベストプラクティスをジュニア向けに解説します。
- [第14章 多対多のテーブル設計 — 中間テーブル・自己参照・タグ・RBAC](https://notes.rewheel.dev/docs/backend/database/many-to-many): 多対多関係を中間テーブルで実装する手順、属性を持つ多対多 (商品サプライヤ)、自己参照多対多 (フォロー)、タグシステム、RBAC (ロールベース権限) を題材に、トリガー集計の現代的な代替案 (アプリ層 / マテリアライズドビュー / Redis) も含めて解説します。
- [第8章 マスターデータとトランザクションデータ — 性質に応じて設計を変える](https://notes.rewheel.dev/docs/backend/database/master-vs-transaction): データベースのデータを「マスターデータ (辞書のような基準情報)」と「トランザクションデータ (日々発生する履歴)」に分類して扱う考え方と、それぞれの設計・運用上の違いをジュニア向けに解説します。
- [第11章 データベース正規化 — 第1〜第3正規形と非正規化の判断](https://notes.rewheel.dev/docs/backend/database/normalization): データの重複と矛盾 (更新異常・挿入異常・削除異常) を排除する正規化の考え方を、関数従属性 / 第1〜第3正規形 / BCNF の補足 / 性能を理由とした選択的非正規化まで、ジュニア向けに段階的に解説します。
- [第18章 データベース正規化演習問題集](https://notes.rewheel.dev/docs/backend/database/normalization-exercises): 第 11 章で学んだ正規化の理解を深めるための演習問題集。未正規化テーブルから第 3 正規形まで段階的に分解する作業を、業務上ありがちなケース (子供情報・複数カテゴリ・導出項目・社員情報) で繰り返し練習します。
- [第16章 OAuth と OpenID Connect — 外部サービスとの認証連携](https://notes.rewheel.dev/docs/backend/database/oauth-oidc): OAuth 2.0 の 4 役割と Authorization Code Flow + PKCE、OpenID Connect の ID Token (JWT)、Implicit Flow が RFC 9700 で非推奨化された現代の標準、ソーシャルログイン連携の DB 設計をジュニア向けに解説します。
- [第17章 実践事例 — 商品配送管理とタスク管理の総合演習](https://notes.rewheel.dev/docs/backend/database/real-world-cases): 「商品配送管理システム」と「タスク管理システム」の 2 つの総合題材で、要件 → E-R 図 → テーブル定義 → 想定クエリの一気通貫を実践します。本ガイドの集大成として、これまでの章で学んだ概念を統合して使います。
- [第5章 リレーショナルデータベース入門 — なぜ表で関係を扱うか](https://notes.rewheel.dev/docs/backend/database/relational-introduction): リレーショナルデータベース (RDB) の基本概念と、「単一の巨大な表」でなく「関係を持つ複数の表」で管理する利点・トレードオフ、NoSQL との使い分けをジュニア向けに解説します。
- [第2章 システムとデータベースの関係 — DBMS という通訳者](https://notes.rewheel.dev/docs/backend/database/system-relationship): Web システムの 3 層構造 (ユーザー / アプリ / データ) の中でデータベースが占める位置と、アプリケーションとデータベースをつなぐ DBMS の役割をジュニア向けに解説します。
- [第7章 基本用語と命名規則 — テーブル・カラム・主キー・外部キー](https://notes.rewheel.dev/docs/backend/database/terminology): テーブル / カラム / レコード / 主キー / 外部キー / スキーマ / インデックス / ビューといった基本用語と、グローバル標準に通用する命名規則 (テーブルは複数形 / snake_case / Boolean は is_ で始める など) をジュニア向けに解説します。
- [第3章 データベース設計の重要性 — なぜ最初に丁寧に作るのか](https://notes.rewheel.dev/docs/backend/database/value-and-importance): データベース設計が「建物の基礎」のような役割を果たし、後から直しづらい質的理由 (運用中のサービスを止められない / データ移行コスト / 影響範囲の広さ) と、データ設計スキルが現代でも価値を持ち続ける理由を解説します。
- [Laravel API 開発入門](https://notes.rewheel.dev/docs/backend/laravel-api): Laravel を API バックエンドとして使うための全 22 章のガイド。ルーティング・Eloquent・バリデーションの基礎から、認証認可 (Sanctum / Policy)・キャッシュ・キュー・タスクスケジューラ・ファイルストレージ・本番運用までを、EC サイトの注文システムを題材に順を追って解説します。Blade などのフロントエンド機能は扱いません。
- [出力の設計 — API Resource でレスポンスの形を決める](https://notes.rewheel.dev/docs/backend/laravel-api/api-resource): Laravel API 開発入門の第7章。モデルをそのまま返す危うさを示し、API Resource でレスポンスの形をコードとして固定します。リレーションの含め方、条件付きの項目、日付・金額・enum の表現、data ラッピングを扱います。
- [認証 — Sanctum によるトークン認証](https://notes.rewheel.dev/docs/backend/laravel-api/authentication-sanctum): Laravel API 開発入門の第11章。Sanctum で会員登録・ログイン・ログアウトを作り、ルートをトークン認証で保護します。ゲスト注文を会員注文へ移す手順、トークンの権限と有効期限、テストでの認証済み状態の作り方まで扱います。
- [認可 — Gate と Policy で「誰が何をできるか」を決める](https://notes.rewheel.dev/docs/backend/laravel-api/authorization): Laravel API 開発入門の第12章。注文の一覧と詳細を作りながら、Policy によるモデル単位の認可を実装します。一覧 API では Policy が効かない理由、403 と 404 の使い分け、認可漏れをテストで検出する方法を扱います。
- [エラー設計 — 例外を HTTP レスポンスに翻訳する](https://notes.rewheel.dev/docs/backend/laravel-api/error-responses): Laravel API 開発入門の第9章。エラーレスポンスの形を決め、カスタム例外クラスを作り、bootstrap/app.php の withExceptions を唯一の変換地点にします。何をログに送るか、何をクライアントに見せないかも扱います。
- [入力の検証 — Form Request で境界を固める](https://notes.rewheel.dev/docs/backend/laravel-api/form-request-validation): Laravel API 開発入門の第5章。注文作成 API を題材に、コントローラ直書きのバリデーションを Form Request へ移します。配列とネストしたデータの検証、検証前後の処理、日本語メッセージ、そして形式チェックとビジネスルールの境界線を扱います。
- [はじめに — 何を作り、何を作らないか](https://notes.rewheel.dev/docs/backend/laravel-api/introduction): Laravel API 開発入門の第1章。チュートリアルどおりに書いた注文 API が本番で壊れる 3 つの場面を示し、この連載が扱う範囲と題材、既存ガイドとの読み分けを整理します。
- [一覧 API — ページネーション・フィルタ・N+1](https://notes.rewheel.dev/docs/backend/laravel-api/listing-api): Laravel API 開発入門の第8章。商品一覧 API を題材に、ページネーション 3 種の使い分け、フィルタとソートを安全に受け取る方法、N+1 問題の観測と eager loading による解決、そして機械的に検出する仕組みを扱います。
- [題材のモデリングとデータ整備 — テーブル・モデル・シーダー](https://notes.rewheel.dev/docs/backend/laravel-api/modeling-and-seeding): Laravel API 開発入門の第3章。商品・在庫・注文・注文明細のテーブルをマイグレーションで作り、Eloquent モデルと enum を対応させ、ファクトリとシーダーで開発用データを用意します。金額の型と mass assignment の扱いもここで決めます。
- [リクエストライフサイクルと Laravel 13 の骨格](https://notes.rewheel.dev/docs/backend/laravel-api/request-lifecycle): Laravel API 開発入門の第2章。1 つのリクエストが public/index.php からコントローラまで届く経路を追い、bootstrap/app.php・サービスコンテナ・サービスプロバイダ・設定ファイルがその経路のどこに刺さるかを整理します。
- [ルーティング設計と最初のエンドポイント](https://notes.rewheel.dev/docs/backend/laravel-api/routing-and-first-endpoint): Laravel API 開発入門の第4章。install:api で API 用の骨格を作り、apiResource でルートをまとめ、ルートモデルバインディングで ID をモデルに変換します。URL 設計・バージョニング・ステータスコードの決め方も扱います。
- [ビジネスロジックの置き場所 — サービスクラスとサービスコンテナ](https://notes.rewheel.dev/docs/backend/laravel-api/service-class-and-container): Laravel API 開発入門の第6章。前章で作った注文作成 API のコントローラを診断し、サービスクラスへ切り出します。Eloquent モデルに書くものと書かないものの判断基準、サービスコンテナによる依存の自動解決、インターフェースの結び付けまでを扱います。
- [テスト — Pest で API の契約を固定する](https://notes.rewheel.dev/docs/backend/laravel-api/testing-with-pest): Laravel API 開発入門の第10章。Pest の書き方を導入し、ここまでに作った API に Feature テストを書きます。正常系だけでなく失敗パスを固定する理由、テストデータの用意、そして以降の章で守るテストの型を決めます。
- [PayloadCMS 入門](https://notes.rewheel.dev/docs/backend/payloadcms): Next.js native の Headless CMS、PayloadCMS の全体像と主要機能を 7 章で解説するガイド。3.x で何が変わったか、データモデリング、認証・認可、API、Next.js 統合、運用までを一気通貫で扱います。
- [Admin / Media / Deploy — 運用層](https://notes.rewheel.dev/docs/backend/payloadcms/admin-media-deploy): Admin UI カスタマイズ、Plugin エコシステム、Media (Uploads + S3)、Postgres adapter、Migration、Jobs Queue、Vercel / Docker / Railway デプロイ、AI Auto-Embedding の概観までを 1 章で扱い、入門シリーズを締めます。
- [APIs — Local / REST / GraphQL の 3 層](https://notes.rewheel.dev/docs/backend/payloadcms/apis): PayloadCMS が config から自動で生やす 3 つの API レイヤ (Local / REST / GraphQL) の関係・使い分け・自動生成型を整理し、どこから何を呼ぶのが正解かを掴みます。
- [Core Concepts — Config-First / Collections / Globals](https://notes.rewheel.dev/docs/backend/payloadcms/core-concepts): PayloadCMS の中核である Config-First 思想と、payload.config.ts の歩き方、Collections と Globals の使い分けを公式の最小例を引用しながら整理します。
- [Data Modeling — Fields / Lexical / Relationships / Versions / Localization](https://notes.rewheel.dev/docs/backend/payloadcms/data-modeling): PayloadCMS のデータモデリング層を Fields / Relationships / Blocks / Lexical Rich Text / Localization / Versions の順に俯瞰し、最小コードで「どう書けばどう動くか」を掴みます。
- [Next.js 統合 — 同居構成の深掘り](https://notes.rewheel.dev/docs/backend/payloadcms/nextjs-integration): PayloadCMS 3.x の核心である「Next.js 同居構成」を route group / instrumentation / Local API / Lexical 描画 / Live Preview / Draft Preview まで 12 節で集中解説します。本シリーズの目玉章。
- [Security & Lifecycle — Auth / Access Control / Hooks](https://notes.rewheel.dev/docs/backend/payloadcms/security-and-lifecycle): PayloadCMS の認証 (Auth) と認可 (Access Control)、そしてライフサイクル中に処理を挟む Hooks を、関数で書くアクセス制御の最小例とともに整理します。
- [PayloadCMS とは / なぜ今](https://notes.rewheel.dev/docs/backend/payloadcms/what-is-payloadcms): PayloadCMS の位置付け (OSS / Self-hosted / Next.js native) と、3.x で何が変わったか、Figma 買収の文脈、他 Headless CMS との比較を一気に整理します。
- [PHPクラス設計入門](https://notes.rewheel.dev/docs/backend/php-class-design): PHP でクラス設計そのものを入門から実践まで学ぶ全14章のガイド。フレームワーク非依存の設計原則 (カプセル化・単一責任・継承とコンポジション・インターフェース・SOLID) から、Laravel でのモデル/サービスクラス設計まで一気通貫で扱います。
- [凝集度・結合度とSOLID原則の総整理](https://notes.rewheel.dev/docs/backend/php-class-design/cohesion-coupling-and-solid): 第1部の集大成として、開放閉鎖・リスコフ置換・インターフェース分離の原則を補い、凝集度と結合度という物差しでこれまでの原則を振り返ります。
- [まとめ — 実務でクラス設計を判断するために](https://notes.rewheel.dev/docs/backend/php-class-design/conclusion): 全13章の判断基準を、実務のコードに向き合うときに使えるチェックリストの形に整理します。次に読むガイドも紹介します。
- [依存性注入とLaravelのコンテナ — 自動解決とインターフェースの結び付け](https://notes.rewheel.dev/docs/backend/php-class-design/dependency-injection): Laravelのサービスコンテナによる自動解決の仕組みと、インターフェースと実装クラスをbindで結び付ける基本的な使い方を解説します。
- [Eloquentモデルの責務 — 書いていい仕事と書くべきでない仕事](https://notes.rewheel.dev/docs/backend/php-class-design/eloquent-model-responsibility): Eloquentモデルが本来担うべき責務(リレーション・アクセサ/ミューテタ・キャスト・ローカルスコープ)と、モデルに書くべきでない責務を、Fat Modelとの対比で整理します。
- [カプセル化と情報隠蔽](https://notes.rewheel.dev/docs/backend/php-class-design/encapsulation): public propertyの危険性、tell-don't-ask原則、ゲッター・セッターの要否判断を解説します。
- [例外設計とバリデーション — Form Requestとカスタム例外](https://notes.rewheel.dev/docs/backend/php-class-design/exceptions-and-validation): Form Requestによるリクエストの形式チェックと、カスタム例外クラスによるfail-fastな設計を解説します。
- [継承とコンポジション](https://notes.rewheel.dev/docs/backend/php-class-design/inheritance-and-composition): is-a・has-aの関係と、なぜ継承よりコンポジションが優先されるかを解説します。
- [インターフェースと抽象への依存](https://notes.rewheel.dev/docs/backend/php-class-design/interfaces-and-abstraction): インターフェースによる契約に基づく設計と、依存性逆転の原則という考え方を解説します。
- [はじめに — なぜクラス設計を学ぶのか](https://notes.rewheel.dev/docs/backend/php-class-design/introduction): PHPクラス設計入門連載の第1章。god classや変更に弱いコードの実例を通じて、クラス設計を学ぶ意味と連載全体の見通しを示します。
- [第2部の導入 — Fat Controller/Fat Modelとは何か](https://notes.rewheel.dev/docs/backend/php-class-design/laravel-class-design-overview): 第2部の導入。Fat Controller/Fat Modelとは何かを整理し、本パートで扱う範囲(クラス設計止まり)を明示します。
- [PHPのクラス基本文法](https://notes.rewheel.dev/docs/backend/php-class-design/php-class-basics): PHPにおけるクラスの基本文法。プロパティ・メソッド・コンストラクタ・可視性修飾子・readonly・コンストラクタプロモーション・enumを解説します。
- [実践 — クラス設計のリファクタリング](https://notes.rewheel.dev/docs/backend/php-class-design/refactoring-practice): 第8章のFat Controller/Fat Modelを、第9〜12章で見た判断基準を使って通しでリファクタリングします。第1部の原則を総動員する実践編です。
- [サービスクラスへの責務分割 — Controller肥大化を防ぐ切り出し](https://notes.rewheel.dev/docs/backend/php-class-design/service-class-extraction): Controllerに残った複数の関心事を調整する処理を、サービスクラスへ切り出す判断基準を解説します。単なるファイル分割で終わらせないための凝集度の保ち方も扱います。
- [単一責任の原則](https://notes.rewheel.dev/docs/backend/php-class-design/single-responsibility): 単一責任の原則とクラスを小さく保つ考え方。god classの兆候と、責務分割の実例を解説します。

### Laravel DDD / クリーンアーキテクチャ

- [Laravel × DDD × クリーンアーキテクチャ実践入門](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture): Laravel 未経験でも大丈夫。Vue/React など SPA 開発者を対象に、API バックエンドとしての Laravel とドメイン駆動設計 (DDD)・クリーンアーキテクチャをステップバイステップで解説する全 20 章のガイド。値オブジェクト・エンティティ・集約・リポジトリの理論から、Laravel プロジェクトでの実装パターン・トランザクション・テスト・認証までを網羅します。
- [集約 — 整合性の境界と集約ルート](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/aggregates): DDD の集約 (Aggregate) を Order 集約を題材に解説。集約ルートを唯一のアクセス起点とする理由、集約境界の決め方 (ライフサイクル / 整合性 / トランザクション / 参照)、即時整合性と結果整合性の使い分け、集約間は ID 参照、スナップショットの考え方をまとめます。
- [認証・認可設計 — JWT と層別の責務分担](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/authentication): DDD とクリーンアーキテクチャでの認証 (Authentication) と認可 (Authorization) の設計を解説。認証はプレゼンテーション層、認可はアプリケーション層とドメイン層という責務分担、JWT の構造、Laravel × tymon/jwt-auth の実装、アクセス/リフレッシュトークン、ロールベース認可をまとめます。
- [DDD の基本概念 — ドメインオブジェクト・集約・リポジトリ・ユビキタス言語](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/basic-concepts): DDD の中核用語を整理。ドメイン / ドメインオブジェクト / ドメインモデル / ビジネスルールの定義、エンティティと値オブジェクトの違い、集約・リポジトリの役割、ユビキタス言語と境界づけられたコンテキスト (Bounded Context) の考え方を具体例で解説します。
- [まとめと次のステップ — DDD の段階的導入](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/conclusion): 本ガイド全 20 章の要点 (DDD の戦術的設計 / クリーンアーキテクチャ / 実践テクニック / 総合実践) を整理し、値オブジェクト → ユースケース層 → リポジトリ → ドメインイベントという段階的導入のロードマップ、よくある質問、推奨書籍・コミュニティ・学習パスをまとめます。
- [ドメインモデルとテーブル設計 — マッピングとインデックス](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/domain-and-table): ドメインモデル優先で設計する理由と、ドメインモデルとテーブルが 1:1 でない前提でのマッピングパターン (埋め込み / 1 集約複数テーブル / 技術的分割)、リポジトリによる差の吸収、複合インデックスの左端原則やトレードオフを含むインデックス設計をまとめます。
- [ドメインイベント — 集約間を疎結合に連携する](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/domain-events): DDD のドメインイベント (Domain Event) を OrderConfirmed などの実装例で解説。イベント駆動による疎結合、記録 (Record) とディスパッチ (Dispatch) の 2 フェーズ実装、Laravel Events との統合、同期 / 非同期 (ShouldQueue)、冪等性と結果整合性の設計をまとめます。
- [ドメインサービス — エンティティに属さないビジネスロジック](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/domain-services): DDD のドメインサービス (Domain Service) を割引計算・在庫引当・送料計算の実装例で解説。複数集約にまたがりインフラ非依存のロジックを配置する判断基準、ユースケース (アプリケーションサービス) との違い、貧血ドメインモデルを避ける設計指針をまとめます。
- [エンティティ — 識別子とライフサイクルを持つドメインオブジェクト](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/entities): DDD のエンティティ (Entity) を Order / OrderLine の実装例で解説。識別子による同一性判断、値オブジェクトとの違い、エンティティ ≠ テーブル、create() / reconstruct() の 2 つのファクトリメソッド、enum を使った状態遷移とビジネスルールのカプセル化をまとめます。
- [エラーハンドリング — ドメイン例外と HTTP ステータスの対応](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/error-handling): DDD アーキテクチャでのエラーハンドリングを解説。集約ごとに整理した例外階層、DomainException の設計、Exception Handler での HTTP ステータス (404/409/422 など) へのマッピング、統一エラーレスポンス、Result 型パターン、ロギング戦略と機密情報の保護をまとめます。
- [はじめに — Laravel × DDD × クリーンアーキテクチャ入門](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/introduction): Vue/React など SPA 開発経験者に向けた Laravel での DDD・クリーンアーキテクチャ入門。本ガイドの対象読者・前提知識・全 20 章の構成と、DDD / クリーンアーキテクチャの全体像を解説します。
- [Laravel API 開発の基礎 — Controller・FormRequest・Eloquent・DI](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/laravel-api-basics): Laravel 未経験者向けに API バックエンド開発の基礎を解説。ルーティング・Controller・FormRequest・API Resource・Eloquent ORM・DI コンテナ・Sanctum 認証、本書で使う PHP 8.x 構文 (readonly / enum / コンストラクタプロモーション) までをまとめます。
- [Laravel での DDD アーキテクチャ — 4 層構成と依存性逆転](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/laravel-architecture): 従来の Laravel MVC とクリーンアーキテクチャを比較し、プレゼンテーション / アプリケーション / ドメイン / インフラの 4 層構成、依存性逆転の原則 (DIP)、ディレクトリ構成、Eloquent Model とドメインエンティティの分離を解説します。
- [実践：注文システムの実装 — 全層を貫く実装例](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/practice-order-system): これまで学んだ DDD・クリーンアーキテクチャを統合し、注文作成・確定 API を題材に 4 層 (プレゼンテーション / アプリケーション / ドメイン / インフラ) を実装。各層の責務、データ変換の流れ、層別テスト (ドメイン / UseCase / Repository) を通して全体像をまとめます。
- [プレゼンテーション層の設計 — FormRequest・薄い Controller・API Resource](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/presentation-layer): HTTP リクエスト/レスポンスを扱うプレゼンテーション層の設計を解説。FormRequest による形式バリデーション、ドメイン層との役割分担、Command への変換、薄い Controller (Thin Controller)、API Resource、ミドルウェア認証と Policy 認可をまとめます。
- [リポジトリパターン — ドメインと永続化の境界](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/repository-pattern): リポジトリパターンを Laravel + Eloquent で実装。インターフェースをドメイン層に置く理由 (DIP / テスタビリティ)、1 集約 = 1 リポジトリ、エンティティと Eloquent Model のマッピング、N+1 問題と Eager Loading、Mass Assignment 対策、DI コンテナへの登録をまとめます。
- [テスト戦略 — テストピラミッドと層別テスト](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/testing-strategy): DDD アーキテクチャのテスト戦略を解説。テストピラミッド (Unit / Integration / Feature) の考え方、ドメイン層を DB なしで高速にテストする利点、モックの最小限利用、Arrange-Act-Assert、日本語テストメソッド名、テストデータビルダーパターンをまとめます。
- [トランザクション管理 — 整合性の境界をどこに置くか](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/transaction-management): Laravel の DB::transaction() を使ったトランザクション管理を解説。ACID 特性、1 集約は Repository 内・複数集約は UseCase 内という置き場所の使い分け、ネストしたトランザクション (Savepoint)、楽観的ロックと悲観的ロックの実装と使い分けをまとめます。
- [ユースケース層の設計 — Command / Query 分離と DTO](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/usecase-layer): アプリケーション層 (ユースケース層) の設計を解説。ドメインオブジェクトの調整・トランザクション管理・入出力変換の責務、CQS 原則による Command / Query 分離、Command オブジェクトと DTO、Query 専用サービス、単一責任などの設計指針をまとめます。
- [値オブジェクト — 不変でビジネスルールを内包するドメインオブジェクト](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/value-objects): DDD の値オブジェクト (Value Object) を Money / EmailAddress / ShippingAddress / OrderId などの実装例で解説。プリミティブ型に対する優位性、不変性 (イミュータビリティ) の重要性、名前付きコンストラクタ・バリデーション・equals() の設計指針をまとめます。
- [なぜ DDD か — Fat Controller / Fat Model の限界](https://notes.rewheel.dev/docs/laravel-ddd-and-clean-architecture/why-ddd): 従来の Laravel MVC で複雑なビジネスロジックを扱うと生じる Fat Controller・Fat Model・ロジック散在の問題を整理し、DDD を採用することで得られる「ビジネスルールの明確化・変更対応力・テスタビリティ・チームコミュニケーション」の 4 つのメリットを解説します。

### クリーンコード

- [はじめに](https://notes.rewheel.dev/docs/clean-code): TypeScript でクリーンで保守性の高いコードを書くための実践ガイド入門。なぜそのルールが重要か、どう適用するかを段階的に解説。型システムを活かす設計原則を 13 記事で体系化した道標。
- [クラスとインターフェース](https://notes.rewheel.dev/docs/clean-code/classes): TypeScript のクラスとインターフェース設計。情報隠蔽 (カプセル化) / 単一責任 / クラスを小さく保つ / 継承よりコンポジションを優先する原則を Bad / Good 比較で解説。凝集度と結合度の考え方も含む。
- [コメント](https://notes.rewheel.dev/docs/clean-code/comments): TypeScript のコメント術。Why はコメント、What はコードという基本原則と、保守時に古いコメントが矛盾を生まないための回避パターン。JSDoc 活用や自己説明的なコードの書き方も解説。
- [条件分岐](https://notes.rewheel.dev/docs/clean-code/conditionals): TypeScript の条件分岐ベストプラクティス。早期リターンでネストを浅く保つ、Discriminated Union と網羅性チェック、ポリモーフィズムによる if 文削減を Bad / Good 比較で解説する整理術。
- [関数の定義](https://notes.rewheel.dev/docs/clean-code/functions): TypeScript の関数設計のベストプラクティス。単一責任 / 純粋関数 / 早期リターン / 引数最小化 / 副作用回避 / DRY 原則を Bad / Good 例で比較解説。型注釈で入出力を明確化する考え方も含む。
- [繰り返し処理](https://notes.rewheel.dev/docs/clean-code/loops): forEach / map / filter / reduce の使い分けと for...of / for...in の違い。高階関数で意図を明確にする配列処理のベストプラクティスを Bad / Good 比較で解説。
- [命名規則 ① ケース規約と変数・定数](https://notes.rewheel.dev/docs/clean-code/naming): TypeScript の命名規則 第 1 部。ケバブ・スネーク・パスカル・キャメルの 4 つのケース規約の使い分けと、変数・真偽値・定数の命名を Bad / Good 比較で解説。「コードそのものがドキュメントになる」良い名前の付け方の入り口。
- [命名規則 ② 関数とクラス](https://notes.rewheel.dev/docs/clean-code/naming-functions-classes): TypeScript の命名規則 第 2 部。get / set / calculate などの動詞パターンによる関数の命名、真偽値を返す関数、クラス名のサフィックスパターン、メソッド名を冗長にしない基準を Bad / Good 比較で解説。
- [命名規則 ③ 命名の質を高める](https://notes.rewheel.dev/docs/clean-code/naming-quality): TypeScript の命名規則 第 3 部。発音可能な名前・配列の複数形・同義語の統一・対比語・意味のない単語の回避・省略の基準といった命名の質を高める原則と、総合練習問題 + クイックリファレンスのまとめ。
- [SOLID 原則](https://notes.rewheel.dev/docs/clean-code/solid): オブジェクト指向設計の SOLID 5 原則 (単一責任 / 開放閉鎖 / リスコフ置換 / インターフェース分離 / 依存逆転) を TypeScript の実例で解説。各原則の Bad / Good 比較で理解を深める入門ガイド。
- [まとめ](https://notes.rewheel.dev/docs/clean-code/summary): クリーンコード入門 (TypeScript) 全 11 記事の振り返り。命名・関数・型安全・オブジェクト指向・SOLID 原則の全体像を mindmap で可視化し、コーディング時のチェックリストとして使える総まとめ記事。
- [TypeScript 特有のベストプラクティス](https://notes.rewheel.dev/docs/clean-code/typescript-tips): TypeScript の型システムを効果的に活用するベストプラクティス。any 禁止 / unknown と never の使い分け / ジェネリクス / ユーティリティ型 / 型ガードによる絞り込みを Bad / Good 比較で解説。
- [変数の定義](https://notes.rewheel.dev/docs/clean-code/variables): TypeScript の変数定義のベストプラクティス。マジックナンバー / マジックキャラクタの定数化、const / let の使い分け、スコープ最小化、複数意味を持たせない原則を Bad / Good 比較で解説。

### デザインパターン

- [TypeScript デザインパターン](https://notes.rewheel.dev/docs/design-patterns): GoF の 23 パターンを現代の TypeScript で読み直す全 16 章のガイド。パターンごとに言語機能で代替できるかを判定し、クラスとして書き続ける価値が残る条件を並べて示します。
- [Adapter — 構造的部分型が消す境界](https://notes.rewheel.dev/docs/design-patterns/adapter): TypeScript は構造的部分型なので、形が合っていれば明示的な implements なしにそのまま渡せます。それでも変換役を挟む必要が残るのはどこからかを見ます。
- [Builder — オブジェクトリテラルと型で表す段階的な構築](https://notes.rewheel.dev/docs/design-patterns/builder): 任意引数の多いオブジェクトはリテラルで組み立てられます。一方で「この値を入れるまで build できない」という順序の制約は、TypeScript の型で表現できます。
- [Chain of Responsibility — ミドルウェアという形](https://notes.rewheel.dev/docs/design-patterns/chain-of-responsibility): 要求を順に手渡していく構造は、Node.js のミドルウェアとして広く使われています。型で文脈を積み上げる書き方まで踏み込みます。
- [Composite — 再帰的な判別可能ユニオン](https://notes.rewheel.dev/docs/design-patterns/composite): 木構造を扱うとき、共通インターフェースを継承したクラス階層の代わりに、再帰的な判別可能ユニオンで表せます。ファイルシステムを題材にします。
- [Decorator — TC39 Decorators とは別物のパターン](https://notes.rewheel.dev/docs/design-patterns/decorator): 同じ名前でも、GoF の Decorator パターンと TypeScript の Decorators 構文は別の概念です。両者を区別したうえで、高階関数による合成と比較します。
- [Factory Method と Abstract Factory — 生成を関数に寄せる](https://notes.rewheel.dev/docs/design-patterns/factory-method): 生成ロジックの切り出しは、TypeScript では多くの場合ただの関数とリテラル型のユニオンで足ります。関連する複数の生成物をまとめる制約があるときだけ Abstract Factory が意味を持ちます。
- [Iterator — 言語に取り込まれたパターン](https://notes.rewheel.dev/docs/design-patterns/iterator): 反復の抽象化は Symbol.iterator とジェネレーターとして言語仕様に入っています。自前の Iterator クラスを書く理由が残っているかを確かめます。
- [Observer — プラットフォームが持っている仕組み](https://notes.rewheel.dev/docs/design-patterns/observer): 通知の仕組みを自作する前に、EventTarget と AbortSignal という標準の道具があります。購読の解除まで含めて、どこまで標準で足りるかを見ます。
- [Proxy — 組み込みの Proxy と同じ名前の別概念](https://notes.rewheel.dev/docs/design-patterns/proxy): JavaScript には Proxy という組み込みオブジェクトがあり、GoF の Proxy パターンとは別物です。遅延読み込みとアクセス記録を題材に、両方を扱います。
- [Repository — GoF の外にある実務で頻出するパターン](https://notes.rewheel.dev/docs/design-patterns/repository): Repository は GoF ではなく PoEAA に由来します。本章は既存記事と重ならないよう、TypeScript の型でこの境界をどう表現するかに絞ります。
- [Singleton — モジュールが単一インスタンスを与える範囲](https://notes.rewheel.dev/docs/design-patterns/singleton): ES モジュールは同じ URL に解決されるかぎり 1 度しか評価されないため、Singleton クラスを書かなくても単一インスタンスが手に入ります。その保証が届く範囲と、それでも別の手段が要る条件を整理します。
- [State — 型で不正な遷移を潰す](https://notes.rewheel.dev/docs/design-patterns/state): 状態ごとのクラスを作る代わりに、判別可能ユニオンで状態を表すと、その状態で呼べない操作を型で禁止できます。自動販売機を題材にします。
- [Strategy — 関数が第一級であること](https://notes.rewheel.dev/docs/design-patterns/strategy): 振る舞いを差し替えるだけなら関数を渡せば済みます。それでもオブジェクトとして束ねたくなるのは、戦略が複数のメソッドや状態を持つときです。
- [まとめ — 章を立てなかったパターンと、判定の一覧](https://notes.rewheel.dev/docs/design-patterns/summary): 独立した章を設けなかった 8 つのパターンを短く扱い、連載全体の判定を 1 枚の表にまとめます。パターンを使うかどうかを決めるときの手順も整理します。
- [Template Method — 継承とフックの注入](https://notes.rewheel.dev/docs/design-patterns/template-method): 処理の骨組みを固定して一部だけ差し替える手段は、抽象クラスの継承だけではありません。フック関数を受け取る形との違いを整理します。
- [Visitor — 網羅チェックが代わりになる](https://notes.rewheel.dev/docs/design-patterns/visitor): 判別可能ユニオンと never を使った網羅チェックがあると、Visitor のクラス階層を組まなくても「処理し忘れ」を型で防げます。構文木を題材にします。

### AI エージェント

- [AI・エージェント](https://notes.rewheel.dev/docs/ai-agents): LLM・Claude Code・RAG・AI エージェント開発に関するノートをまとめるドメイン。Claude Code ハーネスエンジニアリング入門、Faceted Prompting で組み直したハーネスの 2 ガイドを公開中。
- [Claude Code ハーネスエンジニアリング入門](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness): Claude Code の skill・rule・memory・hooks・MCP がどう連携して動くかを、デバッグコマンド /debug の実行フローを 1 本追いながら学ぶガイド。ハーネスエンジニアリングのワークフローを実例ベースで理解します。
- [Agent = Model + Harness](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/agent-model-harness): AI エージェントの信頼性は、モデル本体ではなくその周りを固める「ハーネス」の設計品質で決まる、という中核の考え方を解説します。
- [Guide と Sensor のペア（寄り道：/grill-me）](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/guide-sensor-pair): 規範を「文章で誘導する Guide」と「機械で取りこぼしを捕まえる Sensor」のペアで守る。十字分類の最も鮮明な例を、要件詰問スキル /grill-me を題材に見ます。
- [Guides と Sensors の十字分類](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/guides-sensors): ハーネスの構成要素を「行動前/行動後」×「決定的/推論的」の 2 軸で分類し、なぜ片方だけでは不十分なのかを実例で示します。
- [~/.claude の構成要素マップ](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/harness-map): Claude Code のハーネスを構成する CLAUDE.md・rules・skills・agents・hooks・MCP・memory が、どこに置かれ、いつ働くかを一覧で押さえます。
- [まとめ — ハーネスを自分のものにする](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/harness-summary): /debug 1 本の流れで追ってきたハーネスの全体像を振り返り、自分のハーネスを小さく始めて育てるための第一歩を示します。
- [hooks の仕組み](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/hooks-system): hooks は settings.json でイベントに紐づけて登録するスクリプト。この環境で使う 8 イベントと、exit 2 による自己修正フィードバックの仕組みを整理します。
- [Step 0 — MCP の on-demand ロード](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/mcp-loading): /debug の最初の一手は MCP の読み込み。なぜ MCP は最初から使えず ToolSearch で都度ロードするのか、なぜ sequential-thinking が強制なのかを解説します。
- [MCP の 2 段ロード](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/mcp-system): MCP は「スキーマの読み込み」と「サーバーの接続」の 2 段で制御される。ToolSearch による deferred tool の読み込みと、用途テーブルに基づく自律ロードを整理します。
- [memory の 3 層](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/memory-system): セッションは終わると忘れる。learnings・プロジェクト memory・handoff の 3 層で、何をどこに、どの粒度で残すかを整理します。
- [Ratchet — 学びを恒久化する](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/ratchet): 一度踏んだ落とし穴を二度踏まないために、学びを rules / hook / fitness function へ昇格させる Ratchet の流れを /debug の再発防止判断から見ます。
- [rule のロード機構](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/rule-loading): rules は常時ロードと path-scoped の 2 種類。frontmatter の paths（glob）で「対象ファイルを開いたときだけ読み込む」仕組みを掘り下げます。
- [調査・修正中に効く rule と hook](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/rules-and-guards): ファイルを読むと path-scoped rule が自動ロードされ、書き換える瞬間には PreToolUse / PostToolUse hook が割り込む。「楽な修正」を構造的に塞ぐ仕掛けを見ます。
- [応答終了時の Stop hook](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/stop-sensors): /debug が答えを返す瞬間、Stop イベントで 7 つの hook が並列に走る。即ブロックする Sensor と、まず観測だけする log-only Sensor の違いを解説します。
- [subagent と役割分担（寄り道：/review）](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/subagents): 実装する人と評価する人を分ける Generator-Evaluator 分離と、複数の subagent を並列で走らせる multi-perspective-review を、/review への寄り道で見ます。
- [発話から skill 起動まで](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/trigger-and-skill): バグ報告の一言が UserPromptSubmit hook を通り、/debug skill を起動して SKILL.md が作業手順になるまでの最初の数百ミリ秒を追います。
- [検証ループ — 「直した」を証明する](https://notes.rewheel.dev/docs/ai-agents/claude-code-harness/verify-loop): Investigate→Fix→Verify を最大 3 回反復し、テスト出力という証跡で「直った」を裏づける。ハーネスの中核「成功を主張せず証拠を示す」原則を /debug で体感します。
- [Faceted Prompting で組み直したハーネス: 数十ファイル規模の運用](https://notes.rewheel.dev/docs/ai-agents/faceted-prompting-harness): nrslib/takt 由来の Faceted Prompting (5 関心分離) と orchestrator (takt 思想採用) を核に、数十ファイル規模で運用している Claude Code ハーネスを章別に解説する連載のトップページです。
- [autodev フローの実走](https://notes.rewheel.dev/docs/ai-agents/faceted-prompting-harness/autodev-flow): autodev-smoke の anagram-check task を例に、autodev フロー (⓪'-⑤) の各 phase で何が起きるかを spec / plan / story / done / review の実物引用付きで walkthrough します。
- [ディレクトリ構成と合成規約](https://notes.rewheel.dev/docs/ai-agents/faceted-prompting-harness/directory-structure): ハーネス再構築後の ~/.claude/ ディレクトリ構成と、criticality 3 段で配信方式を分ける合成規約を実例付きで解説します。
- [facet 詳解 (rules / skills / agents / hooks / output-contracts / knowledge)](https://notes.rewheel.dev/docs/ai-agents/faceted-prompting-harness/facet-details): rules・skills・agents・hooks・output-contracts・knowledge の各 facet ファイルの責務と境界を、実コード引用付きで辞書的に並べる詳解章です。
- [Faceted Prompting: 5 関心分離](https://notes.rewheel.dev/docs/ai-agents/faceted-prompting-harness/faceted-prompting): プロンプトを Persona / Policy / Instruction / Knowledge / Output Contract の 5 関心に分離する Faceted Prompting の整理軸を、各 facet の責務と振り分けルートと併せて解説します。
- [成長規律と逆 ratchet](https://notes.rewheel.dev/docs/ai-agents/faceted-prompting-harness/growth-discipline): ハーネス再肥大化を構造的に防ぐ 5 つの規律 (usage-driven 追加 / サイズ上限 / 1 ファイル 1 関心 / 逆 ratchet / hooks は実証後) と、反転承認による削除 default 化を実例付きで解説します。
- [改修サイクルの実例](https://notes.rewheel.dev/docs/ai-agents/faceted-prompting-harness/iteration-cycle): bootstrap 後に表面化した silent drop / 二重 worktree / 文言ズレ等の実例を、問題発見 → 分析 → 修正 → 検証の 4 段で walkthrough する実例章です。
- [なぜゼロから組み直したのか](https://notes.rewheel.dev/docs/ai-agents/faceted-prompting-harness/motivation): 再構築前の Claude Code ハーネスで観測した 4 つの症状と、ゼロ再構築という判断に至った経緯を、設計判断 4 つと併せて整理します。
- [まとめと残課題](https://notes.rewheel.dev/docs/ai-agents/faceted-prompting-harness/summary): 本連載の 3 段要約 / 4 Quality metrics の現状 / これからの道筋を整理する最終章です。
- [takt 思想の採用: nrslib/takt から Claude Code への移植](https://notes.rewheel.dev/docs/ai-agents/faceted-prompting-harness/takt-mapping): AI Agent Orchestration Framework である nrslib/takt の思想 (Faceted Prompting / Output Contracts / Worktree Isolation / 8 design principles) を、CLI を使わず Claude Code の skills + agents + handoff dir で独自移植した経緯と対応関係を解説します。

### インフラ

- [インフラ・運用](https://notes.rewheel.dev/docs/infrastructure): Docker・AWS・Terraform・CI/CD などインフラ構築と運用に関するノートをまとめるドメイン。AWS 実践ガイド連載を公開中。
- [AWS 実践ガイド: タスク管理 SaaS を Terraform で本番構築する](https://notes.rewheel.dev/docs/infrastructure/aws): VPC、Route 53、S3、ALB、ECS、RDS、IAM の 7 サービスを軸に、架空のタスク管理 SaaS「Tasuku」の本番環境を Terraform で設計から構築まで進める連載のトップページです。
- [ALB: L7ロードバランサーの基礎とHTTPでの最初の公開](https://notes.rewheel.dev/docs/infrastructure/aws/alb): ALBの役割とリスナー・ターゲットグループ・ヘルスチェックという3要素、HTTPだけでまず公開する設計判断、ALB用セキュリティグループとアクセスログ用S3バケットの実装を扱います。
- [課金構造の地図と安全な終わり方: コストの全体像とdestroy手順](https://notes.rewheel.dev/docs/infrastructure/aws/cost-and-teardown): 連載最終章です。各章に散在していたコストの話を1枚の地図にまとめ、開発環境での削減定石を示します。そのうえで、学習用インフラを安全に終わらせるdestroy手順と、この連載のスコープ外に置いた次の一歩を扱います。
- [デプロイの標準化と環境分離: 疎通確認からmodule + envs構成へ](https://notes.rewheel.dev/docs/infrastructure/aws/deploy-and-envs): 第10章までで組み上げたTasukuのインフラをE2Eで疎通確認し、ECSデプロイのタグ戦略を標準化します。そのうえで、単一環境フラット構成だったTerraformコードをmodule + envs/dev,prod構成へリファクタします。
- [ECS 前編: Fargateでコンテナ実行基盤を整える](https://notes.rewheel.dev/docs/infrastructure/aws/ecs-fargate): ECSのクラスタ・タスク定義・タスク・サービスの関係を整理し、Fargate起動タイプでコンテナを動かすための実行ロールとタスクロール、ECRリポジトリ、CloudWatch Logsによるログ収集を構築します。単発のrun-taskで基盤の動作を確認します。
- [ECS後編: web/apiサービスの公開とAuto Scaling](https://notes.rewheel.dev/docs/infrastructure/aws/ecs-service): 第8章で送ったECSサービス化を完成させます。web/apiの2サービスをホストベースルーティングでALB経由に公開し、Secrets ManagerからのDB接続情報注入、S3アクセス権限の追加、rolling更新とcircuit breaker、Auto Scalingまでを扱います。
- [IAM: ポリシー JSON の文法と Terraform 実行権限の現実解](https://notes.rewheel.dev/docs/infrastructure/aws/iam): IAM のポリシー JSON の文法と評価順序、ロールと信頼ポリシーの関係を学び、Terraform 実行専用の IAM ユーザーとグループを作って、管理者相当の認証情報から切り替えます。
- [全体像: タスク管理 SaaS「Tasuku」の要件とアーキテクチャ](https://notes.rewheel.dev/docs/infrastructure/aws/overview): 連載の題材となる架空のタスク管理 SaaS「Tasuku」の機能要件と非機能要件を定義し、VPC、Route 53、S3、ALB、ECS、RDS、IAM で組む全体アーキテクチャと、依存関係に基づく構築順序を解説します。
- [RDS: マネージドPostgreSQLの設計判断とセキュリティグループチェーンの完成](https://notes.rewheel.dev/docs/infrastructure/aws/rds): RDSがマネージドサービスとして代行する運用とTasuku側が担う設計判断を整理し、インスタンスクラス・ストレージ・Multi-AZの選定、マスターパスワードのSecrets Manager統合、セキュリティグループチェーンの完成を扱います。run-taskとpsqlによる疎通確認で締めくくります。
- [Route 53 と ACM: DNS委任とHTTPS化で独自ドメインを公開する](https://notes.rewheel.dev/docs/infrastructure/aws/route53-acm): Route 53ホストゾーンとDNS委任の基礎、ACMによるDNS検証の仕組み、443番リスナーの追加と80番のHTTPSリダイレクト化を扱います。
- [S3: バケット設計とtfstate管理の定石](https://notes.rewheel.dev/docs/infrastructure/aws/s3): S3のバケット設計4原則、Terraform stateをS3へ移すときに生じる鶏と卵の問題、添付ファイル用バケットの実装、VPCエンドポイントによるS3アクセスの経路を扱います。
- [Terraform 基礎: HCL の最小文法と最初の apply](https://notes.rewheel.dev/docs/infrastructure/aws/terraform-basics): Terraform の最小構成で HCL の文法と provider のバージョン固定、state の概念を学び、最初の apply として AWS Budgets の予算アラートを作成します。
- [VPC: CIDR設計と2 AZ×3層ネットワークのコスト判断](https://notes.rewheel.dev/docs/infrastructure/aws/vpc): VPCのCIDR設計、2つのアベイラビリティゾーンにまたがる3層のサブネット構成、NAT Gatewayの冗長化とコストのトレードオフを扱います。

### Tailwind CSS

- [Tailwind CSS ガイド](https://notes.rewheel.dev/docs/tailwind): Tailwind CSS v4 対応の体系学習ガイド全 18 章。ユーティリティファーストの考え方から、Flexbox/Grid・タイポグラフィ・カラー・レスポンシブ・ダークモード・コンテナクエリ・アニメーションまで。実践プロジェクトでランディングページを構築し、モダン CSS スタイリングを身につけます。
- [アニメーション](https://notes.rewheel.dev/docs/tailwind/animations): Tailwind CSS のアニメーション実装。transition / duration / ease / delay の基本、scale / rotate / translate / skew の Transform、v4 の 3D トランスフォーム (perspective / rotate-x/y/z)、組み込み animate-* と motion-safe/reduce アクセシビリティを実装例で整理。
- [背景・ボーダー・シャドウ](https://notes.rewheel.dev/docs/tailwind/backgrounds-borders): Tailwind CSS で背景 (グラデーション含む)・ボーダー・角丸 (border-radius)・シャドウ・リング (フォーカス)・アウトライン・分割線 (divide) を体系的に整理。カード/ボタン/ヒーローセクションなど UI 部品の実装例まで網羅。
- [カラーシステム](https://notes.rewheel.dev/docs/tailwind/colors): Tailwind CSS のカラーパレット (26 色 × 11 段階、v4.2 時点) と使い方。テキスト / 背景 / ボーダー / リング / 透明度 (color-mix の /N 記法) / v4 の oklch カラースペース / CSS 変数連携 (bg-(--my-color)) までを実践例で網羅。
- [コンポーネントパターン](https://notes.rewheel.dev/docs/tailwind/component-patterns): Tailwind CSS で再利用可能な UI コンポーネント (ボタン / カード / フォーム / ナビ / アラート / バッジ / ツールチップ / モーダル) を体系的に実装。アクセシビリティ (ARIA 属性) も整理し、本番品質のパターンを学びます。
- [コンテナクエリ](https://notes.rewheel.dev/docs/tailwind/container-queries): Tailwind CSS v4 で標準サポートされたコンテナクエリの解説。`@container` の宣言、@3xs〜@7xl のコンテナブレークポイント、名前付きコンテナ、任意値 `@[500px]:` 記法、メディアクエリとの使い分けを実装例で整理。
- [カスタマイズ](https://notes.rewheel.dev/docs/tailwind/customization): Tailwind CSS v4 の CSS-First Configuration の実践。`@theme` でカラー / フォント / スペーシング / ブレークポイント / シャドウ / アニメーションを CSS 内で定義し、`@utility` / `@custom-variant` / `@plugin` / `@layer` でテーマ拡張を実装します。
- [ダークモード](https://notes.rewheel.dev/docs/tailwind/dark-mode): Tailwind CSS の `dark:` バリアントによるダークモード実装。メディアクエリ / クラスベース / セレクターベース 3 方式の比較、FOUC 対策、推奨カラーマッピング、CSS 変数によるテーマカラー一元管理を実装例で網羅。
- [Flexbox レイアウト](https://notes.rewheel.dev/docs/tailwind/flexbox): Tailwind CSS で Flexbox レイアウトを構築する手順。flex コンテナの作成から flex-direction / flex-wrap / justify-content / align-items / gap / order までを表で整理し、ナビゲーションバー・カード・検索フォームの実装例で定着させます。
- [Grid レイアウト](https://notes.rewheel.dev/docs/tailwind/grid): CSS Grid を Tailwind CSS で活用する方法。grid-cols / grid-rows・col-span / row-span・place-items・grid-auto-flow・サブグリッド対応まで体系化し、ダッシュボード / カードギャラリー / 画像グリッドの実装で定着させます。
- [Tailwind CSS とは](https://notes.rewheel.dev/docs/tailwind/introduction): Tailwind CSS v4 対応ガイドの導入章。ユーティリティファーストの考え方、従来 CSS フレームワークとの違い、CSS-First Configuration / Oxide エンジン / コンテナクエリ標準対応など v4 新機能の概要、本ガイド全体の構成を紹介します。
- [実践プロジェクト](https://notes.rewheel.dev/docs/tailwind/project): 学んだ Tailwind CSS v4 の知識を統合し、SaaS ランディングページを構築する実践章。ヒーロー / 機能紹介 / 料金プラン / FAQ / CTA / フッターの全セクションを実装し、@theme + @keyframes でカスタムアニメーションも整備します。
- [レスポンシブデザイン](https://notes.rewheel.dev/docs/tailwind/responsive): Tailwind CSS のモバイルファーストアプローチによるレスポンシブ実装。sm/md/lg/xl/2xl のブレークポイント、max-* バリアント、v4 のカスタムブレークポイント、任意値ブラケット記法をナビ/ヒーロー/フッターの実装例で整理。
- [環境構築](https://notes.rewheel.dev/docs/tailwind/setup): Tailwind CSS v4 の開発環境を Vite / PostCSS / CLI / CDN の 4 通りでセットアップする手順。対応ブラウザ要件、VS Code 拡張 (Tailwind CSS IntelliSense)、Prettier プラグインによる class 並び替え、本番ビルドサイズの目安まで網羅。
- [サイジングと配置](https://notes.rewheel.dev/docs/tailwind/sizing-positioning): Tailwind CSS で要素のサイズ (width / height / min-* / max-* / size-*)、配置 (static/relative/absolute/fixed/sticky)、z-index、object-fit、overflow、aspect-ratio を体系化。中央配置 3 パターン・固定ヘッダー・モーダル等の実装例も整理。
- [スペーシング](https://notes.rewheel.dev/docs/tailwind/spacing): Tailwind CSS の 4px ベースのスペーシングシステム。padding / margin / gap / space-* / 論理プロパティ (ps/pe) を比較し、フルブリードレイアウトのための負マージンや v4 の任意値指定まで実践例で整理します。
- [状態バリアント](https://notes.rewheel.dev/docs/tailwind/state-variants): Tailwind CSS の状態バリアント (hover / focus / focus-visible / focus-within / active / disabled / invalid / checked) とグループ (group-*) / ピア (peer-*) / 擬似クラス (first/last/odd/even)・擬似要素 (before/after) / has-* まで体系化。
- [タイポグラフィ](https://notes.rewheel.dev/docs/tailwind/typography): Tailwind CSS でテキストをスタイリングする手順。フォントサイズ (text-xs〜text-6xl) / weight / family / 行高さ / 字間 / 装飾 / 省略 (truncate, line-clamp) / 日本語フォントの考慮事項までを実践例で整理します。
- [ユーティリティファーストの考え方](https://notes.rewheel.dev/docs/tailwind/utility-first): Tailwind CSS の核心となるユーティリティファーストの思想を従来 CSS と比較しながら解説。クラス命名規則、4px ベースのスペーシングスケール、HTML 肥大化対策 (コンポーネント化 / @apply / @reference) まで体系的に整理します。

### shadcn/ui

- [shadcn/ui Button で学ぶデザインシステム設計](https://notes.rewheel.dev/docs/shadcn-button): React 19 / Tailwind CSS v4 / 最新の shadcn/ui に対応。Button を題材に、デザイントークン・cva・cn・Radix Slot を通じて、デザインシステムに沿った再利用可能なコンポーネント設計を学ぶ全 13 章のガイド。
- [発展編：他のコンポーネントへの応用](https://notes.rewheel.dev/docs/shadcn-button/advanced-patterns): Button で学んだ cva・cn・Slot・デザイントークンのパターンを Badge・Input・Card・Alert に応用する章。コンポーネントごとのパターン選択ガイドと設計のベストプラクティスをまとめます。
- [完成形を見てみよう：Button コンポーネントの全体像](https://notes.rewheel.dev/docs/shadcn-button/button-overview): 本書で組み立てる shadcn/ui Button コンポーネントの完成形を先に確認する章。cva・cn・Radix Slot・デザイントークン・React 19 の ref など、使われている技術の全体像と基本的な使い方をつかみます。
- [cn 関数の仕組み：clsx と tailwind-merge を理解する](https://notes.rewheel.dev/docs/shadcn-button/cn-function): shadcn/ui の cn 関数を構成する clsx と tailwind-merge の内部挙動を、実際の動作結果とともに掘り下げる章。falsy の除外、conflict group による競合解決、clsx → twMerge の順序の理由を学びます。
- [cva：宣言的なバリアント管理とその仕組み](https://notes.rewheel.dev/docs/shadcn-button/cva-introduction): この章では、cva（class-variance-authority）によるスタイルバリアントの宣言的な管理について学びます。cva が内部で何をしているのか、競合解決を「やらないこと」まで理解します。
- [デザインシステムとデザイントークン](https://notes.rewheel.dev/docs/shadcn-button/design-system-and-tokens): bg-primary の色がどこから来るのかを解説する章。デザイントークンの 2 階層（プリミティブ / セマンティック）、OKLCH カラー、Tailwind v4 の @theme inline によるトークン定義、ライト / ダークテーマの仕組みを学びます。
- [環境構築：React + Tailwind CSS 開発環境のセットアップ](https://notes.rewheel.dev/docs/shadcn-button/environment-setup): Vite + React 19 + TypeScript + Tailwind CSS v4 で shadcn/ui Button 学習用の開発環境を構築する章。cva・clsx・tailwind-merge・radix-ui の導入、cn 関数の作成、パスエイリアスの設定までを手順で解説します。
- [Button からデザインシステムへ](https://notes.rewheel.dev/docs/shadcn-button/from-button-to-design-system): Button で学んだデザイントークン・cva・cn・Slot・型のパターンを、デザイントークン / プリミティブ / パターンの 3 階層からなる 1 つのデザインシステムとしてまとめる最終章。チーム運用のポイントと次のステップも紹介します。
- [実践演習：ゼロから Button コンポーネントを作る](https://notes.rewheel.dev/docs/shadcn-button/hands-on-practice): 素の button から始めて、Tailwind のデザイントークン・cva・cn・asChild (Slot)・TypeScript の型を 1 ステップずつ重ね、shadcn/ui 流の Button コンポーネントをゼロから完成させる実践演習。success バリアントやローディング状態の追加課題つき。
- [本書の目的と学べること](https://notes.rewheel.dev/docs/shadcn-button/introduction): shadcn/ui の Button を題材にデザインシステム設計を学ぶガイドの導入章。本書の目的・対象読者・全 13 章の構成と、なぜ Button がコンポーネント設計の題材として最適なのかを説明します。
- [Radix UI の Slot：asChild パターンと要素の置換](https://notes.rewheel.dev/docs/shadcn-button/radix-slot): この章では、radix-ui の Slot と asChild パターンについて学びます。スタイルを保ったままレンダリングされる HTML 要素を差し替える「合成（composition）」の考え方を解説します。
- [ref の転送：React 19 のやり方](https://notes.rewheel.dev/docs/shadcn-button/ref-forwarding): この章では、ref を使って DOM 要素にアクセスする方法について学びます。React 19 で ref が通常の prop になった新しい書き方を本筋に、従来の forwardRef も押さえます。
- [Tailwind CSS の基礎：ユーティリティファースト](https://notes.rewheel.dev/docs/shadcn-button/tailwindcss-basics): Tailwind CSS のユーティリティファーストの考え方を、shadcn/ui Button の実クラス列を分解しながら学ぶ章。レイアウト・状態修飾子 (hover / focus-visible / disabled)・スペーシングスケール・デザイントークンの入り口を解説します。
- [TypeScript との連携：型安全なコンポーネント](https://notes.rewheel.dev/docs/shadcn-button/typescript-integration): この章では、shadcn/ui の Button を支える TypeScript の型について学びます。React.ComponentProps・VariantProps・交差型による props 定義と、React 19 で forwardRef のジェネリクスが不要になった理由を解説します。

### 構造化データ・SEO

- [はじめに](https://notes.rewheel.dev/docs/structured-data): コーポレートサイトに JSON-LD 構造化データを実装するための体系ガイド。Google Search Central と schema.org の公式仕様を踏まえ、WebPage / Service / Organization / Audience / Country の型選定プロセスを再現可能な思考フローとして整理。
- [構造化データの基礎 (JSON-LD / schema.org)](https://notes.rewheel.dev/docs/structured-data/fundamentals): 構造化データ・JSON-LD・schema.org Data Model の基礎。検索エンジンとコンテンツの「契約」としての位置づけ、@context / @type / @id の意味、型階層と Property の値域、HTML への埋め込み方法。
- [Google ガイドラインと JSON-LD 推奨の根拠](https://notes.rewheel.dev/docs/structured-data/google-policies): Google Search Central が定める構造化データの一般ポリシー (コンテンツとの整合性 / 不可視マークアップ禁止 / スパム禁止) と JSON-LD が推奨される根拠を整理。違反時のペナルティと過剰マークアップのアンチパターンも併記。
- [実装 + 検証 + 運用 (架空 SaaS の完成 JSON-LD)](https://notes.rewheel.dev/docs/structured-data/implementation-and-validation): 架空の B2B SaaS 「Acme Workflow」のサービス紹介ページに JSON-LD を実装する完成例。Google Rich Results Test と Schema Markup Validator での妥当性検証手順、実装時の典型エラーと修正方法、Search Console 監視や schema.org 更新追従を含む継続運用の規範。
- [型選定の判断プロセス (WebPage / Service / Organization / Audience / Country)](https://notes.rewheel.dev/docs/structured-data/type-selection): コーポレートサイトのサービス紹介ページに JSON-LD を実装するときの型選定プロセス。WebPage をルート型、mainEntity に Service、provider に Organization、audience に Audience、areaServed に Country を選ぶ各判断の根拠と却下した代替案。@id 戦略と自サイト適用 decision tree も収録。

### メタ

- [内部リンクの貼り方ガイドライン](https://notes.rewheel.dev/docs/meta/internal-linking-guideline): Reinvent Notes の docs / blog 記事間で内部リンクを貼るための基準。ハブ&スポーク構造の考え方、推奨 3 パターン (本文文脈リンク / 末尾「次に読む」 / mermaid 図リンク)、Bad/Good 例、新規記事チェックリスト。

### その他

- [その他](https://notes.rewheel.dev/docs/misc): 特定ドメインに分類しきれない雑多な技術メモの受け皿。内容がまとまったら適切なドメインへ移動する。

## Blog

- [Claude Code ベストプラクティス集 shanraisshan/claude-code-best-practice の歩き方](https://notes.rewheel.dev/blog/claude-code-best-practice-guide): GitHub Trending #1 のキュレーション集 shanraisshan/claude-code-best-practice (445 ファイル) を、ディレクトリ構成・概念・ワークフロー・Tips・レポートの 5 軸で読み解く見取り図。自分のレベルに合った要素を選べるよう整理した。
- [日本語 Web フォントと Core Web Vitals — LCP と CLS を実測で直す](https://notes.rewheel.dev/blog/core-web-vitals-japanese-fonts): 技術的 SEO は満点なのに Lighthouse の Performance だけ伸びない。原因を chrome-devtools の実測で追うと、LCP の主犯は日本語 Web フォントの render-blocking、CLS の主犯は寸法未指定の navbar ロゴだった。フォント swap 犯人説を実測で棄却し、size-adjust を入れずに CLS を 0 にするまでの記録。
- [ハーネスエンジニアリング入門: AI エージェントの信頼性は周囲の設計で決まる](https://notes.rewheel.dev/blog/harness-engineering): AI エージェント (Claude Code 含む) の信頼性はモデル本体ではなく harness の設計品質に依存する。中核等式 Agent = Model + Harness、二分法フレーム、Phase 0-6 の段階的導入を ~/.claude/ 実例で整理。
- [hero に車が走るアニメーションを実装した](https://notes.rewheel.dev/blog/hero-car-animation): Docusaurus のトップ hero に走る車のアニメーションを自前実装した記録。SVG の線画を svgr でコンポーネント化し、タイヤ回転と背景パララックスを純 CSS で動かす。CSS mask での背景描画・継ぎ目のない無限ループ・テーマ色追従・prefers-reduced-motion 対応まで初学者向けに解説する。
- [ブログのドメインを notes.rewheel.dev に変更しました](https://notes.rewheel.dev/blog/rewheel-naming): 個人技術ブログのドメインを notes.rasshii.dev から notes.rewheel.dev に変更しました。「車輪の再発明から学ぶ」というコンセプトに合わせた命名と、検討プロセスを共有します。
- [Welcome to Reinvent Notes](https://notes.rewheel.dev/blog/welcome): Reinvent Notes ブログ開設のお知らせ。Docusaurus + Vercel で個人的な技術発信を続けていきます。