TypeScriptを使いこなして開発をもっとスマートに！インターフェース、クラス、モジュール、プログラム、関数の役割と使い分け

2024-06-16

TypeScriptにおける「Interface」「Class」「Module」「Program」「Function」の詳細解説

本記事では、TypeScriptにおける以下の5つの基本概念について、分かりやすく詳細に解説します。

Interface（インターフェース）: 設計図のような役割を果たし、オブジェクトが持つべきプロパティやメソッドを定義します。具体的な実装は関係なく、オブジェクトの型のみを定義します。
Class（クラス）: オブジェクトの設計図であり、プロパティ、メソッド、コンストラクタなどを定義することで、共通の性質や振る舞いをを持つオブジェクト群をひとまとめにします。
Module（モジュール）: コードを分割し、名前空間を整理するための仕組みです。コードの再利用性や保守性を高め、大規模なプロジェクトを効率的に管理することができます。
Program（プログラム）: 複数のモジュールを組み合わせ、実行可能なアプリケーションを構成します。
Function（関数）: 特定の処理をまとめた再利用可能なコードブロックです。入力を受け取り、処理結果を返します。

Interface（インターフェース）

Interfaceは、オブジェクトが持つべきプロパティとメソッドを定義する設計図のようなものです。具体的な実装内容は関係なく、オブジェクトの型のみを定義します。

例えば、Personインターフェースを以下のように定義できます。

interface Person {
  name: string;
  age: number;
  greet(message: string): void;
}

このインターフェースは、nameプロパティ (型: string)、ageプロパティ (型: number)、greetメソッド (引数: message (型: string)、戻り値: なし) を持つオブジェクトを表します。

インターフェースは、以下の利点があります。

コードの共通性を保つ: 同じインターフェースを実装するオブジェクトは、共通の性質や振る舞いを持ちます。
型安全性を向上させる: コンパイラは、インターフェースと一致しないオブジェクトを検出することができます。
柔軟性を高める: 具体的な実装を意識せずに、オブジェクトの型のみを定義できます。

Class（クラス）

class Person implements Person {
  constructor(public name: string, public age: number) {}

  greet(message: string): void {
    console.log(`${this.name} says: ${message}`);
  }
}

このクラスは、Personインターフェースで定義されたプロパティとメソッドを実装しています。

コードの再利用性を高める: 同じクラスのインスタンスは、共通の性質や振る舞いを持ちます。
保守性を向上させる: コードをモジュール化することで、変更や修正が容易になります。
オブジェクト指向プログラミングを実現する: 継承や多態性などの機能を利用できます。

Module（モジュール）

TypeScriptでは、以下の2種類のモジュールシステムが提供されています。

CommonJS: Node.jsなどで広く使用されているモジュールシステムです。
ES Modules: ブラウザやNode.jsで利用可能な、より新しいモジュールシステムです。

モジュールを使用することで、以下の利点を得ることができます。

コードの再利用性を高める: モジュールをインポートすることで、他のコードで使用することができます。
名前空間の衝突を回避する: モジュールごとに名前空間を区別することで、名前の衝突を回避することができます。

Program（プログラム）

Programは、通常、以下の手順で実行されます。

TypeScriptコンパイラを使用して、TypeScriptコードをJavaScriptコードに変換します。
JavaScriptエンジンを使用して、変換されたJavaScriptコードを実行します。

アプリケーションを構成する: 複数のモジュール

TypeScript サンプルコード

Interface

interface Person {
  name: string;
  age: number;
  greet(message: string): void;
}

class Student implements Person {
  constructor(public name: string, public age: number, public major: string) {}

  greet(message: string): void {
    console.log(`${this.name} says: ${message}`);
  }

  study(): void {
    console.log(`${this.name} is studying`);
  }
}

let student: Student = new Student('Alice', 20, 'Computer Science');
student.greet('Hello!');
student.study();

Class

class Person {
  private name: string;
  private age: number;

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

  getName(): string {
    return this.name;
  }

  setName(name: string): void {
    this.name = name;
  }

  getAge(): number {
    return this.age;
  }

  setAge(age: number): void {
    this.age = age;
  }
}

let person = new Person('Bob', 30);
console.log(person.getName()); // Bob
person.setName('Alice');
console.log(person.getName()); // Alice
console.log(person.getAge()); // 30
person.setAge(31);
console.log(person.getAge()); // 31

このコードは、nameとageのプロパティを持つPersonクラスと、そのインスタンスであるpersonオブジェクトを定義します。

Module

// module.ts
export interface Person {
  name: string;
  age: number;
}

export class Student implements Person {
  constructor(public name: string, public age: number, public major: string) {}

  greet(message: string): void {
    console.log(`${this.name} says: ${message}`);
  }

  study(): void {
    console.log(`${this.name} is studying`);
  }
}

// main.ts
import { Student } from './module';

let student: Student = new Student('Alice', 20, 'Computer Science');
student.greet('Hello!');
student.study();

このコードは、module.tsモジュールでPersonインターフェースとStudentクラスを定義し、main.tsモジュールでStudentクラスをインポートして使用しています。

Program

// index.ts
import { Student } from './module';

let student: Student = new Student('Alice', 20, 'Computer Science');
student.greet('Hello!');
student.study();

このコードは、module.tsモジュールからStudentクラスをインポートし、studentオブジェクトを作成して使用しています。

Function

function greet(person: { name: string; age: number }): void {
  console.log(`Hello, ${person.name}! You are ${person.age} years old.`);
}

let person = { name: 'Bob', age: 30 };
greet(person); // Hello, Bob! You are 30 years old.

このコードは、personオブジェクトを受け取り、その名前と年齢を出力するgreet関数定義します。

上記は、TypeScriptにおける基本的な概念のほんの一例です。より複雑な機能や高度なコーディング手法については、TypeScriptの公式ドキュメントやその他の学習リソースを参照してください。

TypeScriptにおけるその他の重要な概念

型エイリアスは、既存の型に新しい名前を付けるための仕組みです。コードの可読性とメンテナンス性を向上させるために役立ちます。

type Person = { name: string; age: number };

let student: Person = { name: 'Alice', age: 20 };

この例では、Person型エイリアスが{ name: string; age: number }型に定義されています。これにより、student変数にPerson型を割り当てることができます。

ジェネリック型は、型パラメータを使用して、さまざまな型のデータに適用できる型を定義する仕組みです。コードの再利用性と柔軟性を高めるために役立ちます。

function identity<T>(value: T): T {
  return value;
}

let number: number = identity(10);
let string: string = identity('Hello');

この例では、identity関数は、型パラメータTを持つジェネリック型として定義されています。これにより、number型やstring型など、さまざまな型の引数を受け入れることができます。

ミックスインは、複数のインターフェースまたはクラスの機能を組み合わせるための仕組みです。コードの再利用性と柔軟性を高めるために役立ちます。

interface Logger {
  log(message: string): void;
}

interface Person {
  name: string;
  age: number;
}

class Student implements Person, Logger {
  constructor(public name: string, public age: number) {}

  log(message: string): void {
    console.log(`${this.name}: ${message}`);
  }

  greet(message: string): void {
    console.log(`${this.name} says: ${message}`);
  }
}

let student: Student = new Student('Alice', 20);
student.log('Hello!');
student.greet('Hello!');

この例では、Studentクラスは、PersonインターフェースとLoggerインターフェースをミックスインしています。これにより、Studentクラスは、nameとageのプロパティ、logメソッド、greetメソッドを持つことになります。

非同期プログラミング

TypeScriptは、Promiseやasync/await構文などの機能を使用して、非同期プログラミングをサポートしています。

async function fetchUserData(userId: number): Promise<User> {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();
  return data;
}

(async () => {
  const user = await fetchUserData(123);
  console.log(user.name); // Alice
})();

この例では、fetchUserData関数は非同期関数として定義されています。この関数は、Promiseオブジェクトを返します。(async () => {...})構文を使用して、非同期関数を呼び出すことができます。

デコレータは、クラス、メソッド、プロパティなどの機能を拡張するための仕組みです。

function logger(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with args: ${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`Returning result: ${result}`);
    return result;
  };
}

class Calculator {
  @logger
  add(a: number, b: number): number {
    return a + b;
  }
}

const calculator = new Calculator();
const sum = calculator.add(10, 20);
console.log(sum); // 30