TypeScript Academy · レッスン

高度なクラス機能

抽象クラス、アクセス修飾子、staticメンバーなどの高度なクラス機能を使い、クリーンでモジュール化されたオブジェクト指向のTypeScriptコードを書く方法を学びます。

「高度なクラス機能」はCoddyKit上の無料TypeScript Academyレッスンです。これはレッスン2/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

高度なクラス機能の概要

TypeScriptには、モジュール性、拡張性、保守性に優れたオブジェクト指向コードの作成に役立つ、高度なクラス機能がいくつか用意されています。

このレッスンでは、アクセス修飾子、抽象クラス、静的メンバーなどについて学びます。

高度なクラス機能の概要

TypeScriptには、モジュール性、拡張性、保守性に優れたオブジェクト指向コードの作成に役立つ、高度なクラス機能がいくつか用意されています。

このレッスンでは、アクセス修飾子、抽象クラス、静的メンバーなどについて学びます。

アクセス修飾子

TypeScriptには、クラスメンバーの公開範囲を制御する3つのアクセス修飾子があります。

public：どこからでもアクセスできます（デフォルト）。
private：クラス内からのみアクセスできます。
protected：クラス内とサブクラスからアクセスできます。

class Person {
  public name: string;
  private age: number;
  protected role: string;

  constructor(name: string, age: number, role: string) {
    this.name = name;
    this.age = age;
    this.role = role;
  }
}

class Employee extends Person {
  getRole(): string {
    return this.role; // Accessible because it's protected
  }
}

抽象クラス

抽象クラスは、他のクラスの設計図として使用します。直接インスタンス化することはできず、抽象メソッドを含めることができます。

abstract class Shape {
  abstract getArea(): number;
}

class Circle extends Shape {
  constructor(public radius: number) {
    super();
  }

  getArea(): number {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.getArea()); // 78.54

静的メンバー

静的メンバーはクラスの個々のインスタンスではなく、クラス自体に属します。クラス名を使ってアクセスします。

class MathUtils {
  static PI = 3.14;

  static calculateCircleArea(radius: number): number {
    return this.PI * radius ** 2;
  }
}

console.log(MathUtils.PI); // 3.14
console.log(MathUtils.calculateCircleArea(5)); // 78.5

ゲッターとセッター

ゲッターとセッターを使うと、クラスのプロパティへのアクセス方法や変更方法を制御できます。

class Person {
  private _name: string;

  constructor(name: string) {
    this._name = name;
  }

  get name(): string {
    return this._name;
  }

  set name(newName: string) {
    this._name = newName;
  }
}

const person = new Person('Alice');
console.log(person.name); // Alice
person.name = 'Bob';
console.log(person.name); // Bob

Readonlyプロパティ

readonly修飾子を使うと、プロパティに値を設定できるのは初期化時のみとなり、その後は変更できなくなります。

class Vehicle {
  readonly make: string;

  constructor(make: string) {
    this.make = make;
  }
}

const car = new Vehicle('Toyota');
console.log(car.make); // Toyota
// car.make = 'Honda'; // Error: Cannot assign to 'make' because it is a read-only property.

PrivateコンストラクターとProtectedコンストラクター

クラスにprivateまたはprotectedのコンストラクターを指定すると、クラスをインスタンス化できる方法と場所を制御できます。

class Singleton {
  private static instance: Singleton;

  private constructor() {}

  static getInstance(): Singleton {
    if (!this.instance) {
      this.instance = new Singleton();
    }
    return this.instance;
  }
}

const singleton = Singleton.getInstance();
console.log(singleton);

練習課題

protected コンストラクターを持つクラスを作成し、それをサブクラスで拡張してください。サブクラスでprotectedプロパティにアクセスするためのメソッドを追加してください。

おめでとうございます！

アクセス修飾子、抽象クラス、staticメンバーなど、高度なクラス機能を学びました。これらの概念を練習して、クリーンで効率的なオブジェクト指向TypeScriptコードを書きましょう！

よくある質問

「高度なクラス機能」レッスンは無料ですか？

はい。「高度なクラス機能」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「高度なクラス機能」で何を学びますか？

抽象クラス、アクセス修飾子、staticメンバーなどの高度なクラス機能を使い、クリーンでモジュール化されたオブジェクト指向のTypeScriptコードを書く方法を学びます。ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/3です。

「高度なクラス機能」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

高度な型の絞り込み
高度なクラス機能
条件型

← TypeScript Academyに戻る