はじめに
Reinvent Notes のドキュメントセクションへようこそ。
ここでは、ブログ記事よりも体系的にまとめたリファレンスやガイドを置いていきます。 時系列ではなく、トピック別に整理されているのが特徴です。
主要トピック
Getting Started
- ローカル開発環境 — このサイトをローカルで動かすための手順
JavaScript 基礎ガイド (全 11 章)
JavaScript の基礎を変数から非同期処理まで体系的に学ぶ 全 11 章のガイド。
- JavaScript ガイド — 変数と定数 / データ型 / 条件分岐 / ループ / 関数 / オブジェクト / 配列 / DOM 操作 / イベント処理 / 非同期処理 / ベストプラクティス
TypeScript ガイド (全 21 章)
TypeScript を 言語仕様から実践まで体系的に学ぶ 全 21 章のガイド。
- TypeScript ガイド — 入門 / 基本の型 / 関数 / クラス / 高度な型 / ジェネリクス / 開発環境 / 実践
React 入門 (全 29 章)
モダンな React 開発 (Vite + TypeScript + Tailwind CSS) を基礎から体系的に学ぶ 全 29 章のガイド。
- React 入門 — 基礎準備 / React 基礎 / Hooks / UI スタイリング / 状態管理・データ取得 / 発展 / 総合演習 / フルスタック
Tailwind CSS ガイド (全 18 章)
Tailwind CSS v4 を基礎から実践まで体系的に学ぶ 全 18 章のガイド。
- Tailwind CSS ガイド — 基礎 / レイアウト / スタイリング / レスポンシブ・インタラクション / 応用 (SaaS LP 実装まで)
| 軸 | TypeScript ガイド | React 入門 | Tailwind CSS ガイド | Clean Code |
|---|---|---|---|---|
| Focus | 言語仕様 | フレームワーク | CSS スタイリング | 設計規範 |
| 段階 | 入門〜中級 | 入門〜中級 | 入門〜中級 | 中級以上 |
| 前提 | JS 基礎 | TS + JS | HTML/CSS 基礎 | 言語不問 |
| 例 | 「Mapped Type の使い方」 | 「useEffect の依存配列」 | 「@theme で色を追加」 | 「any を unknown + 型ガードに」 |
4 ガイドは 補完関係 にあります。型を TypeScript ガイドで固め、UI を React 入門 で組み立てます。続いてスタイリングを Tailwind CSS ガイドで磨き、コード品質を Clean Code で底上げする、という流れが想定動線です。
Clean Code (TypeScript)
体系的にクリーンなコードを書くためのガイド集 (全 13 記事)。
- はじめに — クリーンコードとは何か、TypeScript で書く意義
- 命名規則 ① ケース規約と変数・定数 — 4 つのケース規約の使い分け、変数・真偽値・定数の命名
- 命名規則 ② 関数とクラス — 動詞パターンによる関数命名、クラス名のサフィックス
- 命名規則 ③ 命名の質を高める — 発音可能な名前・同義語の統一・省略の基準
- コメント — Why を書く、What はコードで表す
- 変数の定義 — マジックナンバー禁止、const 優先、スコープ最小化
- 関数の定義 — 単一責任、純粋関数、早期リターン
- 繰り返し処理 — forEach・map・filter・reduce の使い分け
- 条件分岐 — 早期リターン、Discriminated Union、ポリモーフィズム
- クラスとインターフェース — 単一責任、カプセル化、合成
- TypeScript 特有のベストプラクティス — any 禁止、unknown 活用、ジェネリクス
- SOLID 原則 — 5 原則の TypeScript 実例
- まとめ — 全体像とチェックリスト
shadcn/ui Button で学ぶデザインシステム設計 (全 13 章)
React 19 / Tailwind CSS v4 / 最新の shadcn/ui に対応。Button を題材にデザイントークン・cva・cn・Radix Slot を学ぶガイド。
構造化データ実装ガイド (全 4 章)
JSON-LD 構造化データを Google Search Central と schema.org の公式仕様を踏まえて実装する体系ガイド。
Claude Code ハーネスエンジニアリング入門 (全 17 章)
Claude Code の skill・rule・memory・hooks・MCP がどう連携して動くかを、実行フローを追いながら学ぶガイド。
リファレンス
- Markdown 記法リファレンス — このサイトで使える Markdown / Docusaurus 拡張記法
ブログとの使い分け
| Blog | Docs | |
|---|---|---|
| 軸 | 時系列 | 体系・トピック |
| 想定読者 | 何が起きているか追いたい人 | 特定のトピックを調べたい人 |
| 更新頻度 | 不定期、頻繁 | 必要に応じて加筆 |
Blog の最新記事
時系列の発信は Blog に集約しています。最新の話題 (ハーネスエンジニアリング / ドメイン刷新 等) はこちらから。
サイト内検索
ヘッダー右の検索アイコンからサイト内全文検索ができます。日本語にも対応しています。
フィードバック
各ブログ記事の下部に 𝕏 で感想をツイート ボタンがあります。記事の感想・誤り指摘・ご意見など、お気軽にどうぞ。Docs の内容についても X (Twitter) @tekuteku_1104 で受け付けています。