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

生徒

「先生、TypeScriptで“ジェネリクス”ってよく聞くんですけど、どういうものなんですか？」

先生

「良い質問ですね。TypeScriptのジェネリクス（Generics）は、型を柔軟に扱える便利な機能です。同じ関数やクラスを、さまざまな型で再利用できるようにしてくれますよ。」

生徒

「型を柔軟に？再利用できる？ちょっと難しそうです……。」

先生

「大丈夫です。まずは、ジェネリクスを使わない場合と使う場合の違いを見てみましょう。」

1. ジェネリクスとは？TypeScriptの型を柔軟に扱う仕組み

TypeScript（タイプスクリプト）のジェネリクス（Generics）とは、関数やクラス、インターフェースで「型を変数のように扱う」仕組みです。これにより、同じロジックをさまざまな型で使い回せるようになります。

たとえば、配列から最初の要素を取り出す関数を考えてみましょう。文字列の配列でも、数値の配列でも同じ処理でOKですよね。でも、型が違うので別々の関数を作るのは面倒です。


// 型を決め打ちしている例
function getFirstString(items: string[]): string {
    return items[0];
}

function getFirstNumber(items: number[]): number {
    return items[0];
}

これでは、型ごとに関数を作らないといけません。ここで登場するのがジェネリクスです。ジェネリクスを使うと、型を「引数のように受け取る」ことができます。


// ジェネリクスを使った例
function getFirst<T>(items: T[]): T {
    return items[0];
}

この関数は、Tという「型の変数」を使っています。呼び出し時に、Tが具体的な型（stringやnumber）に置き換わる仕組みです。


const names = ["太郎", "花子"];
const firstName = getFirst(names); // Tはstringに推論される

const numbers = [10, 20, 30];
const firstNumber = getFirst(numbers); // Tはnumberに推論される

このように、ジェネリクスを使うことで、同じ関数を型に依存せずに再利用できるのです。

2. ジェネリクスを使うメリットとは？

ジェネリクスを使う最大のメリットは、型安全性を保ちながら再利用できることです。型安全性とは、「意図しない型のデータを扱わないようにすること」です。TypeScriptの大きな特徴でもあります。

たとえば、ジェネリクスを使わずに型をanyにしてしまうと、どんな型でも受け取れてしまうため、エラーに気づけません。


function getFirstAny(items: any[]): any {
    return items[0];
}

この関数は便利そうに見えますが、戻り値の型もanyなので、TypeScriptの型チェックが効かなくなります。

一方、ジェネリクスを使えば、「渡された配列の中身の型」に応じて、自動的に戻り値の型も変わります。これにより、コード補完（自動補完）も効くようになり、ミスを防げます。

3. 型引数の指定と推論

ジェネリクスを使うときは、型引数（たとえば<T>）を指定します。多くの場合は、TypeScriptが自動で推論してくれますが、明示的に指定することも可能です。


const result = getFirst<string>(["りんご", "みかん"]);

このように書くと、明確に「Tはstring型ですよ」と伝えています。自動推論が効くので通常は省略できますが、複雑なケースでは手動指定が役立ちます。

4. ジェネリクスに制約をつける（extendsの活用）

ジェネリクスは自由度が高い反面、「どんな型でも受け取れる」と安全性が下がる場合があります。そこで、extendsを使って「特定の型を持つものだけ」に制限をかけられます。

たとえば、「nameプロパティを持つオブジェクトだけを扱いたい」としましょう。


function printName<T extends { name: string }>(obj: T): void {
    console.log(obj.name);
}

この関数では、Tが必ず{ name: string }を含む必要があります。


printName({ name: "太郎" }); // OK
printName({ age: 20 }); // エラー：nameプロパティがない

このように、ジェネリクスに制約を加えることで、安全かつ柔軟な設計ができます。

5. ジェネリクスをクラスやインターフェースで使う

ジェネリクスは、関数だけでなくクラスやインターフェースにも使えます。特にデータ管理やAPIレスポンスを扱うときに便利です。


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

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

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

const stringStore = new DataStore<string>();
stringStore.addItem("りんご");
stringStore.addItem("みかん");

const numberStore = new DataStore<number>();
numberStore.addItem(100);
numberStore.addItem(200);

このように、DataStoreクラスをどんな型のデータにも使い回せるようになります。文字列専用でも数値専用でも、ひとつのクラスで対応可能です。

6. ジェネリクスで柔軟な設計を実現

TypeScriptのジェネリクスは、同じ処理をさまざまな型に対応させるための強力な仕組みです。型安全性を保ちながら、コードの再利用性を高めることができます。

最初は「T」などの記号が難しく感じるかもしれませんが、実際に使ってみると非常に便利です。配列、APIレスポンス、フォームデータなど、どんな型でも使える汎用的なコードを書けるようになります。

まとめ

ここまでの内容で、TypeScriptのジェネリクスがどのような仕組みで動き、どんな場面で活躍し、なぜ開発者にとって欠かせない機能になっているのかを一つひとつ整理してきました。ジェネリクスは、型を柔軟に扱いながらも、型安全性を失わずにコードを組み立てられるという大きな利点があります。たとえば配列の最初の要素を取り出す単純な処理でも、文字列の配列、数値の配列、オブジェクトの配列など、さまざまな型で同じ関数を再利用できるのは、ジェネリクスのおかげです。これまで型ごとに複数の関数を用意していた場面でも、ジェネリクスを使えば一つの関数だけで十分になります。

またジェネリクスは、型推論と相性が良く、TypeScriptが自動的に適切な型を判断してくれることも理解していただけたと思います。たとえば、配列から最初の要素を返す関数では、自分で型を明示しなくても「渡した配列の型をそのまま利用する」ようにTypeScriptが推論してくれます。こうした性質は、コードを書くときの負担を減らしながら、意図した動きをより正確に反映させるために重要です。

さらに、extendsを使った制約（ジェネリック制約）によって、特定の構造を持つ型だけを扱うように制限できる点も大きな特徴でした。これは現実的な場面でとくに役に立ち、APIレスポンスのような「構造が決まっているデータ」を扱う際に、安全に型を管理できるようになります。ジェネリクスを使わないと、データの形が曖昧になり、どこかで不具合が出る可能性も高くなりますが、ジェネリクスの制約を使うことで、事前にエラーを防ぐことができます。

そして、ジェネリクスは関数だけでなく、クラス、インターフェース、型エイリアスなど、TypeScriptのあらゆる場面で応用が可能です。たとえば、データを管理するためのクラスにジェネリクスを使えば、文字列だけを保存するクラス、数値だけを保存するクラス、独自の型を保存するクラスなど、用途に応じて柔軟に再利用することができます。これは開発効率の向上だけでなく、コードの品質やメンテナンス性の面でも大きな効果があります。

▶ ジェネリクスの理解を深めるサンプルコード

ここでは、この記事で学んだ内容をさらに深めるために、少し応用的なジェネリクスの使い方を紹介します。複数のデータ形式を一つの関数やクラスで安全に扱うための仕組みを、サンプルコードを用いて確認してみましょう。


// 複数の型をまとめて扱う汎用的なラッパークラス
class Wrapper<T> {
    constructor(private value: T) {}

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

    map<U>(transform: (v: T) => U): Wrapper<U> {
        return new Wrapper<U>(transform(this.value));
    }
}

// 文字列を扱うWrapper
const stringWrapper = new Wrapper("こんにちは");
const upper = stringWrapper.map(v => v.toUpperCase());
console.log(upper.getValue());

// 数値を扱うWrapper
const numberWrapper = new Wrapper(42);
const doubled = numberWrapper.map(v => v * 2);
console.log(doubled.getValue());

このようにジェネリクスを活用すると、柔軟かつ強力で、再利用性の高いコードを書くことができます。同じロジックをさまざまな型に対して安全に適用できるのは、ジェネリクスの大きな魅力です。実務でも頻繁に登場する機能なので、早い段階から慣れておくと、開発全体の理解が深まるでしょう。

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

生徒

「先生、ジェネリクスって最初は難しそうでしたけど、実際に使い方を見てみるとすごく便利なんですね！」

先生

「その通りです。型を柔軟に扱いながらも、安全性を失わずにコードを書けるようになるので、TypeScriptの大きな魅力のひとつですよ。」

生徒

「extendsで制約をつける方法も、データの形を間違えないようにするためにすごく役に立ちそうだと思いました。」

先生

「良い視点ですね。ジェネリクスは自由度が高い分、制約を上手に使うことでさらに安全で役立つコードになります。たくさん触って、ぜひ慣れていきましょう。」