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

はじめに

このガイドについて​

このガイドは、TypeScriptでクリーンで保守性の高いコードを書くための実践的な知識を提供します。単なるルール集ではなく、なぜそのルールが重要なのか、どのように適用するのかを段階的に理解できる構成になっています。

クリーンコードとは​

クリーンコードとは、以下の特徴を持つコードです：

クリーンコードの特徴
  • 読みやすい（意図が明確）
  • 理解しやすい（複雑さが最小限）
  • 変更しやすい（保守性が高い）
  • テストしやすい（疎結合で高凝集）
  • バグが少ない（予測可能な動作）

TypeScriptでクリーンコードを書く意義​

TypeScriptは静的型付けを持つJavaScriptのスーパーセットです。型システムによってバグを減らせますが、良いコード設計なしには、その効果を十分に発揮できません。

規範を文書化するという視点​

本ガイドは「TypeScript でクリーンに書く」ための具体的な規範集ですが、規範を文書化して運用に組み込む という考え方そのものに興味があれば、Blog の ハーネスエンジニアリング入門 もあわせてどうぞ。AI エージェント時代に rules / hooks / lint を harness として束ねる視点を整理しています。

5 つの学習ガイドの棲み分け​

本サイトには 5 つの体系学習ガイドがあります。本ガイドは 設計規範のベストプラクティス に focus しており、既にコードを書ける人がコード品質を上げるためのリファレンスです。

軸Clean Code (本ガイド)TypeScript ガイドJavaScript ガイドReact 入門Tailwind CSS ガイド
Focus設計規範言語仕様言語仕様 (JS)フレームワークCSS スタイリング
段階中級以上入門〜中級入門入門〜中級入門〜中級
前提言語不問JS 基礎なしTS + JSHTML/CSS 基礎
例「any を unknown + 型ガードに」「Mapped Type の使い方」「アロー関数と this の挙動」「useEffect の依存配列」「@theme で色を追加」

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