静的メンバ（`static`）

2週間 ago

user

1 minute

static キーワードを使うことで、クラスのインスタンスを生成しなくても呼び出せるメンバ（プロパティやメソッド）を定義できます。

✅ 基本構文

class MathUtil {
  static PI = 3.14;

  static square(n: number): number {
    return n * n;
  }
}

// 使用方法
console.log(MathUtil.PI);        // 3.14
console.log(MathUtil.square(5)); // 25

static を付けると、インスタンスからはアクセスできない
クラス名.メンバ名 の形式で直接アクセスする

🧱 インスタンス vs 静的メンバの違い

class User {
  static appName = "MyApp"; // ← 静的プロパティ

  constructor(public name: string) {}

  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

const u = new User("Alice");
u.greet();              // OK
// u.appName;           // ❌ エラー: staticメンバにはインスタンスからアクセスできない
console.log(User.appName); // ✅ OK

メンバの種類	アクセス方法	インスタンスからのアクセス
通常のプロパティ	`this.prop`	✅ 可能
静的プロパティ	`クラス名.prop`	❌ 不可（`User.prop`でアクセス）

📦 よくある用途

用途	例
定数の定義	`static readonly APP_NAME = "MyApp";`
ユーティリティ関数	`MathUtil.square(4)`
シリアライズ・バリデーション	`User.fromJSON()` や `User.validate()`
インスタンスのカウンター	`User.count++` などでインスタンス数を追跡

🔁 静的メソッドでクラスのインスタンスを返す

class Factory {
  static create(name: string) {
    return new Factory(name);
  }

  constructor(public name: string) {}
}

const f = Factory.create("item"); // インスタンス生成の簡略化

⚠️ 注意点

thisの参照

static メンバ内で this を使うと、その this はクラス自体を指す
インスタンス内の this とは異なることに注意

class Example {
  static showThis() {
    console.log(this); // クラス自体
  }

  showThis() {
    console.log(this); // インスタンス
  }
}

グローバル変数としての利用

staticは「グローバル変数の代替」ではありません
アプリ全体からどこでもアクセスできるという理由で静的メンバを多用すると、密結合になり、テストや保守性が著しく低下します

// ❌ グローバル変数のような使い方は避ける
class Config {
  static currentUser = ""; // アプリ全体から参照・変更されるとバグの温床に
}