ガイド目次

このページでは、「TypeScript で Web Components を学ぶ」ための学習ガイドの全体像を示します。以下の各セクションは、段階的に理解と実装を深めていくために構成されています。

1. 基本知識

• WebComponentsとは？
• Custom Elements
• Custom Element のライフサイクル
• Shadow DOM
• HTML Templates
• Template と Slot の連携
• ES Modules
• Web標準としての位置づけ
• TypeScriptを使う理由とメリット

2. TypeScriptで Web Components の実装方法

• Web Component の実装フロー
• Custom Elementsの実装
• ライフサイクルメソッドと型安全なイベント処理
• Shadow DOM構造をTSで記述
• 属性とプロパティのバインディング

• slotsとcontentの投影

3. CSS設計とベストプラクティス

• BEM（Block Element Modifier）設計の基本
• Host-based CSS と Shadow DOM
• Scoped CSS と Shadow DOM
• CSS Variables を用いたテーマ管理

4. ユースケース別パターン集

• 入力部品（<ts-input>）
• ボタン／トグル（<ts-toggle>）
• 状態を持つ部品とステート管理
• ストリーム連携（RxJSとの統合）
• イベント発火とカスタムイベントの型定義

5. テストとデバッグ

• Unit Test（Vitest / Web Test Runner）
• Shadow DOM内の要素テスト
• E2Eテスト事例（Playwrightなど）

6. 実践アーキテクチャ

7. 補足情報