メインコンテンツまでスキップ

はじめに

Reinvent Notes のドキュメントセクションへようこそ。

ここでは、ブログ記事よりも体系的にまとめたリファレンスやガイドを置いていきます。 時系列ではなく、トピック別に整理されているのが特徴です。

主要トピック​

Getting Started​

JavaScript ガイド (全 11 章)​

JavaScript の基礎を変数から非同期処理まで体系的に学ぶ 全 11 章のガイド。

  • JavaScript ガイド — 変数と定数 / データ型 / 条件分岐 / ループ / 関数 / オブジェクト / 配列 / DOM 操作 / イベント処理 / 非同期処理 / ベストプラクティス

TypeScript ガイド (全 21 章)​

TypeScript を 言語仕様から実践まで体系的に学ぶ 全 21 章のガイド。

  • TypeScript ガイド — 入門 / 基本の型 / 関数 / クラス / 高度な型 / ジェネリクス / 開発環境 / 実践

React ガイド (全 30 章)​

モダンな React 開発 (Vite + TypeScript + Tailwind CSS) を基礎から体系的に学ぶ 全 30 章のガイド。

  • React ガイド — 基礎準備 / React 基礎 / Hooks / UI スタイリング / 状態管理・データ取得 / 発展 / 総合演習 / フルスタック

Tailwind CSS ガイド (全 18 章)​

Tailwind CSS v4 を基礎から実践まで体系的に学ぶ 全 18 章のガイド。

  • Tailwind CSS ガイド — 基礎 / レイアウト / スタイリング / レスポンシブ・インタラクション / 応用 (SaaS LP 実装まで)
学習ガイドの棲み分け
連載Focus段階前提例
JavaScript ガイド言語仕様 (JS)入門なし「アロー関数と this の挙動」
TypeScript ガイド言語仕様入門〜中級JS 基礎「Mapped Types の使い方」
React ガイドフレームワーク入門〜中級HTML/CSS + JS 基礎「useEffect の依存配列」
Tailwind CSS ガイドCSS スタイリング入門〜中級HTML/CSS 基礎「@theme で色を追加」
クリーンコードガイド設計規範中級以上TS 基礎「any を unknown + 型ガードに」
TypeScript デザインパターン設計カタログ中級以上TS + OOP 基礎「Strategy は関数で足りるか」

各ガイドは 補完関係 にあります。言語の土台を JavaScript ガイドで固め、言語仕様を TypeScript ガイドで身につけます。その上で UI を React ガイドで組み立て、スタイリングを Tailwind CSS ガイドで磨きます。コード品質をクリーンコードガイドで底上げし、設計の選択肢を TypeScript デザインパターンで広げる、という流れが想定動線です。

クリーンコードガイド (全 13 記事)​

体系的にクリーンなコードを書くための TypeScript 向けガイド集。

  1. はじめに — クリーンコードとは何か、TypeScript で書く意義
  2. 命名規則 ① ケース規約と変数・定数 — 4 つのケース規約の使い分け、変数・真偽値・定数の命名
  3. 命名規則 ② 関数とクラス — 動詞パターンによる関数命名、クラス名のサフィックス
  4. 命名規則 ③ 命名の質を高める — 発音可能な名前・同義語の統一・省略の基準
  5. コメント — Why を書く、What はコードで表す
  6. 変数の定義 — マジックナンバー禁止、const 優先、スコープ最小化
  7. 関数の定義 — 単一責任、純粋関数、早期リターン
  8. 繰り返し処理 — forEach・map・filter・reduce の使い分け
  9. 条件分岐 — 早期リターン、Discriminated Union、ポリモーフィズム
  10. クラスとインターフェース — 単一責任、カプセル化、合成
  11. TypeScript 特有のベストプラクティス — any 禁止、unknown 活用、ジェネリクス
  12. SOLID 原則 — 5 原則の TypeScript 実例
  13. まとめ — 全体像とチェックリスト

TypeScript デザインパターン (全 16 章)​

GoF の 23 パターンを現代の 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 がどう連携して動くかを、実行フローを追いながら学ぶガイド。

リファレンス​

ブログとの使い分け​

BlogDocs
軸時系列体系・トピック
想定読者何が起きているか追いたい人特定のトピックを調べたい人
更新頻度不定期、頻繁必要に応じて加筆

Blog の最新記事​

時系列の発信は Blog に集約しています。最新の話題 (ハーネスエンジニアリング / ドメイン刷新 等) はこちらから。

サイト内検索​

ヘッダー右の検索アイコンからサイト内全文検索ができます。日本語にも対応しています。

フィードバック​

各ブログ記事の下部に 𝕏 で感想をツイート ボタンがあります。記事の感想・誤り指摘・ご意見など、お気軽にどうぞ。Docs の内容についても X (Twitter) @rasshii1104 で受け付けています。

に最終更新