TypeScriptの実行モデルと前提

TypeScriptの実行モデルと前提

TypeScriptの実行モデルと、実務で事故を防ぐための前提条件を詳しく解説します。

実行モデルとリソースの物理的制約

ブラウザ環境では、性能ではなく制約を前提に設計することが基本です。

主な物理的制約

CPU・メモリよりも先に枯渇するリソース:

1. ブラウザメモリ（ヒープメモリ）

   • モバイルデバイス: 通常512MB〜2GB
   • デスクトップ: 通常2GB〜4GB
   • メモリリークは数時間後にブラウザがクラッシュする

2. DOMノード数

   • ブラウザの制限: 通常10,000〜100,000ノード
   • 大量のDOMノードはレンダリングパフォーマンスを低下させる

3. イベントリスナー

   • 削除されないイベントリスナーはメモリリークの原因
   • クロージャーで参照が保持される

4. ネットワーク接続数

   • ブラウザの制限: 通常6〜10接続/ドメイン
   • 同時リクエスト数の制限

5. ストレージ（LocalStorage、SessionStorage）

   • LocalStorage: 通常5MB〜10MB
   • SessionStorage: 通常5MB〜10MB

実際の事故例:

10:00:00 - アプリケーション起動（メモリ使用量: 50MB）
10:00:01 - ページ遷移1（メモリ使用量: 100MB）
10:00:02 - ページ遷移2（メモリ使用量: 150MB）
...
10:30:00 - ページ遷移100（メモリ使用量: 2GB）
10:30:01 - ブラウザがクラッシュ
10:30:02 - ユーザー体験の大幅な低下

TypeScriptの実行モデル

JavaScriptの実行モデル

実行モデル:

TypeScriptコード (.ts)
    ↓ コンパイル
JavaScriptコード (.js)
    ↓ ブラウザで実行
V8エンジン（実行時）

重要な特徴:

1. 型安全性: コンパイル時に型エラーを検出（実行時には型情報がない）
2. ガベージコレクション: 自動メモリ管理（ただし、参照が保持されている場合は動作しない）
3. シングルスレッド: メインスレッドは1つだけ（UIスレッドをブロックしない）
4. イベントループ: 非同期処理の基盤

ブラウザ環境での実行

制約:

// ❌ 悪い例: ブラウザ環境で問題のあるコード
function createLargeArray() {
  // 問題: 大量のメモリを消費
  const array = new Array(1000000).fill(0);
  return array;
}

function addEventListener() {
  // 問題: イベントリスナーが削除されない
  window.addEventListener('scroll', () => {
    // 処理...
  });
}

問題点:

• メモリ制限: ブラウザのメモリ制限により、大量のデータを保持できない
• イベントリスナーのリーク: 削除されないイベントリスナーはメモリリークの原因
• DOMノード数の制限: 大量のDOMノードはレンダリングパフォーマンスを低下させる

実行環境による特性

環境	特徴	主なリスク
ブラウザ	クライアントサイド実行	メモリリーク、DOMノード数の増加、イベントリスナーのリーク、ネットワーク接続数の制限
Node.js	サーバーサイド実行	イベントループのブロック、ファイル記述子の枯渇、メモリリーク

ブラウザ環境での実行

制約:

// ❌ 悪い例: ブラウザ環境で問題のあるコード
class DataManager {
  private data: any[] = [];

  addData(item: any) {
    // 問題: データが削除されず、メモリリークが発生
    this.data.push(item);
  }
  // 問題: データを削除するメソッドがない
}

問題点:

• メモリ制限: ブラウザのメモリ制限により、大量のデータを保持できない
• イベントリスナーのリーク: 削除されないイベントリスナーはメモリリークの原因
• DOMノード数の制限: 大量のDOMノードはレンダリングパフォーマンスを低下させる

まとめ

TypeScriptの実行モデルと前提のポイント：

• リソースの物理的制約: CPU・メモリよりも先に枯渇するのは、ブラウザメモリ・DOMノード数・イベントリスナー・ネットワーク接続数・ストレージ
• TypeScript: 型安全性、ガベージコレクション、シングルスレッド、イベントループ
• ブラウザ環境: メモリ制限、イベントリスナーのリーク、DOMノード数の制限、ネットワーク接続数の制限
• Node.js環境: イベントループのブロック、ファイル記述子の枯渇、メモリリーク

重要な原則: 性能ではなく制約を前提に設計する。リソースの垂れ流しは数時間後にブラウザがクラッシュする。