先生と生徒の会話形式で理解しよう

生徒

「先生、TypeScriptのジェネリクスってよく聞くんですけど、難しそうでよく分からないです…」

先生

「ジェネリクスは最初は少し聞き慣れない言葉ですが、考え方はとてもシンプルですよ。型を柔軟に扱うための仕組みなんです。」

生徒

「型を柔軟に扱う？具体的にはどんなことができるんですか？」

先生

「それでは、TypeScriptのジェネリクス（Generics）の基本から順番に見ていきましょう！」

1. ジェネリクスとは？

TypeScriptのジェネリクス（Generics）とは、「どんな型でも扱えるようにする仕組み」です。つまり、関数やクラスなどを定義するときに、型を固定せずに使えるようにする機能です。

たとえば、「引数を受け取ってそのまま返す関数」を考えてみましょう。普通に書くと次のようになります。


function echo(value: string): string {
    return value;
}

この関数はstring型に限定されています。しかし、もしnumber型やboolean型でも同じ処理をしたい場合、型ごとに関数を作らなければなりません。これでは効率が悪いですよね。

そこで登場するのがジェネリクスです。ジェネリクスを使うと、次のように書けます。


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

<T>という部分が「ジェネリクス型パラメータ」です。ここでTは「どんな型でも入る箱」のようなものです。実際に関数を呼び出すときに、型が決まります。


console.log(echo<string>("こんにちは"));
console.log(echo<number>(100));


こんにちは
100

このように、ジェネリクスを使うと関数を型ごとに作る必要がなくなり、ひとつの関数でさまざまな型を安全に扱えるようになります。

2. ジェネリクスの基本的な書き方

ジェネリクスを使うときは、関数名やクラス名の直後に<T>のように角括弧で書きます。このTは「Type（型）」の頭文字ですが、好きな名前でもかまいません。一般的にはT（Type）、K（Key）、V（Value）などがよく使われます。


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

let str = identity<string>("TypeScript");
let num = identity<number>(2025);


TypeScript
2025

呼び出すときに明示的に型を指定しなくても、TypeScriptの型推論（Type Inference）によって自動的に型が判断されることもあります。


let result = identity("自動で型を推論します");

この場合、TypeScriptがstring型と判断してくれるため、<string>と書かなくてもOKです。

3. ジェネリクスを使うメリット

TypeScriptでジェネリクスを使う最大のメリットは、「型の再利用性と安全性」です。

たとえば、配列を扱う関数を作るときにもジェネリクスは非常に役立ちます。


function getFirstElement<T>(arr: T[]): T {
    return arr[0];
}

console.log(getFirstElement<string>(["A", "B", "C"]));
console.log(getFirstElement<number>([10, 20, 30]));


A
10

このように、配列の中の型が違っても、ジェネリクスを使うことで1つの関数で安全に処理できます。さらに、TypeScriptが型を自動的に補完してくれるため、ミスも減ります。

たとえば、文字列の配列を渡したのに数値を扱おうとすると、コンパイル時にエラーが出ます。これが型安全（Type Safety）です。

4. 複数の型パラメータを使う

ジェネリクスでは、1つだけでなく複数の型パラメータを使うことも可能です。たとえば、キーと値のペアを返す関数を考えてみましょう。


function pair<K, V>(key: K, value: V): [K, V] {
    return [key, value];
}

const result = pair<string, number>("年齢", 30);
console.log(result);


['年齢', 30]

このように、2つの異なる型を柔軟に扱うこともできます。ジェネリクスは複雑なデータ構造を作るときにとても便利です。

5. クラスやインターフェースでも使える

ジェネリクスは関数だけでなく、クラスやインターフェースでも使えます。例えば、任意の型のデータを保持できるクラスを作ることができます。


class Box<T> {
    private value: T;

    constructor(value: T) {
        this.value = value;
    }

    getValue(): T {
        return this.value;
    }
}

const stringBox = new Box<string>("こんにちは");
console.log(stringBox.getValue());

const numberBox = new Box<number>(100);
console.log(numberBox.getValue());


こんにちは
100

このように、ジェネリクスを使うことで、型を安全に保ちながら汎用的なコードを作ることができます。

6. 型の制約（extends）を使って安全性を高める

ときには「どんな型でもOK」ではなく、「特定の型の性質を持つものだけ許可したい」場合もあります。そのときに使うのがextendsです。


function getLength<T extends { length: number }>(item: T): number {
    return item.length;
}

console.log(getLength("TypeScript"));
console.log(getLength([1, 2, 3]));


10
3

この例では、lengthプロパティを持つ型だけを受け入れるように制限しています。これにより、数値などlengthを持たない型を渡した場合はエラーになります。

このように、ジェネリクスに制約を加えることで、柔軟性と型安全性の両方を両立できます。

7. ジェネリクスは「型を後から決める仕組み」

ここまでで、TypeScriptのジェネリクスの基本的な考え方と使い方が理解できたと思います。ジェネリクスは、型を「その場で固定する」のではなく「使うときに決める」ことができる便利な仕組みです。

プログラムの再利用性を高め、エラーを減らし、より安全で効率的なコードを書くための重要な機能です。最初は少し抽象的に感じるかもしれませんが、慣れてくるとTypeScriptの強力さを実感できるはずです。

まとめ

TypeScriptのジェネリクスは、さまざまな型を柔軟に扱いながら、型安全性を確保するための強力な仕組みとして多くの開発場面で利用されます。とくに現代的なアプリケーション開発では、データ構造が複雑化しやすく、型の再利用性や保守性を重視することが増えています。そのような状況でジェネリクスは、幅広い用途に対応しつつも明確な型情報を保つことができるため、大きな役割を果たします。たとえば汎用的な配列処理、APIで受け取るデータ型の抽象化、クラス設計の統一など、場面に応じて変化するデータを正しく扱ううえで、ジェネリクスは欠かせない存在となっています。また、ジェネリクスによる型パラメータは記述の自由度も高く、TやKなどの抽象的な記号を使うことで可読性を保ちながら柔軟な使い回しが可能です。複数の型パラメータを利用することでより複雑なデータ構造を安全に表現できるため、Mapやクラス間の依存関係の管理にも適しています。さらに、extendsを用いた型制約を加えれば「受け取る型の条件」を指定できるため、誤った型を渡してしまうリスクをコンパイル時に排除できます。このように、ジェネリクスは単なる便利機能ではなく、プログラム全体の品質向上に深く関わる重要な仕組みです。堅牢で再利用性の高いコードを書くうえで欠かせない考え方であり、TypeScriptが多くの開発者から支持されている理由のひとつでもあります。実際に使いながら理解を深めることで、ジェネリクスが持つ柔軟性と強力さをより実感できるでしょう。

サンプルプログラムで振り返り

以下は、クラスとジェネリクスを組み合わせた少し高度な例です。


class DataStore<T> {
    private items: T[] = [];

    addItem(item: T): void {
        this.items.push(item);
    }

    getAll(): T[] {
        return this.items;
    }
}

const messageStore = new DataStore<string>();
messageStore.addItem("型を柔軟に扱うジェネリクスの活用");
messageStore.addItem("再利用性の高いコードを構築");

console.log(messageStore.getAll());

この例では、文字列専用のデータストアとして型Tをstringに固定し、さらに他の型にも応用できる構造になっています。ジェネリクスを使うことで、クラスの内部実装を変えずに多様なデータ型を扱えるため、実践的な開発においても強い利点になります。

先生と生徒の振り返り会話

生徒

「先生、ジェネリクスって最初は難しそうだったけど、型を後から決められるってすごく便利なんですね！」

先生

「そうですね。型の柔軟さと安全性を両立できるのがジェネリクスの魅力です。実際の開発でも頻繁に登場しますよ。」

生徒

「extendsで型の条件を付けられるのも分かりやすかったです。エラーを減らせるのは助かります！」

先生

「その通り。型制約は安全性を高める大切な工夫です。今回のサンプルのように、クラスや配列など実際に触れながら覚えていくと理解が深まりますよ。」

生徒

「はい！もっといろんなパターンでジェネリクスを使ってみます！」