クラスの基本概念

クラスはオブジェクト指向プログラミング（OOP）の基盤となる仕組みで、データと振る舞いをまとめて扱うための設計図です。

JavaScriptはES6からクラス構文をサポートしましたが、内部的には依然としてプロトタイプベースの仕組みが使われています。TypeScriptでは、より完全なオブジェクト指向機能を提供しており、修飾子や抽象クラスなどJavaScriptにない機能も備えています。

クラスの構成要素

クラスは以下の要素を含むことができます：

• フィールド：クラス内で宣言された変数
• コンストラクタ：インスタンス生成時に呼ばれる特殊なメソッド
• メソッド：オブジェクトが持つ操作を定義する関数

サンプルコード

class Vehicle {
  private engineType: string;

  constructor(type: string) {
    this.engineType = type;
  }

  public showSpec(): void {
    console.log(`エンジンタイプ: ${this.engineType}`);
  }
}
  

継承とメソッドのオーバーライド

TypeScriptのクラスは、他のクラスから継承することが可能です。継承先のクラスは基底クラスのプロパティとメソッドを受け継ぎ、必要に応じて再定義できます。

継承の例

class BaseAnimal {
  move(distance: number = 0): void {
    console.log(`移動距離: ${distance}m`);
  }
}

class Hound extends BaseAnimal {
  bark(): void {
    console.log('ワンワン!');
  }
}

const dogInstance = new Hound();
dogInstance.bark();
dogInstance.move(25);
  

メソッドのオーバーライド

class BasePrinter {
  print(): void {
    console.log('基本出力');
  }
}

class EnhancedPrinter extends BasePrinter {
  print(): void {
    super.print();
    console.log('拡展出力');
  }
}
  

アクセス修飾子

TypeScriptでは、クラスメンバーに対して以下のアクセス制御が可能です：

• public：どこからでもアクセス可能（デフォルト）
• private：クラス内部からのみアクセス可能
• protected：自身と派生クラス内からアクセス可能

特殊なプロパティ

読み取り専用プロパティ

readonlyキーワードで定義され、初期化後に値を変更できません。

class Immutable {
  readonly id: number;

  constructor(id: number) {
    this.id = id;
  }
}
  

静的プロパティ

staticで定義され、インスタンスではなくクラス自体に属します。

class Dimensions {
  static unit = 'px';
}

console.log(Dimensions.unit);
  

抽象クラス

abstractキーワードで定義されるクラスで、直接インスタンス化することはできません。他のクラスの基底として使われます。

抽象クラスの例

abstract class AnimalBase {
  abstract voice(): void;

  rest(): void {
    console.log('休憩中');
  }
}

class Cat extends AnimalBase {
  voice(): void {
    console.log('ニャン');
  }
}
  

実践的な応用例

Reactコンポーネントの実装において、クラスを型定義と初期値管理の両方に利用するパターンがあります。

Propsクラスの定義

export default class ComponentProps {
  public items: React.ReactElement[] = []
  public speed: number = 300
  public height: number = 200
  public autoPlay: boolean = true
  public interval: number = 5000
}
  

コンポーネントでの利用

class Carousel extends React.Component<ComponentProps> {
  public static defaultProps = new ComponentProps();

  // コンポーネント実装
}