こんにちは！フロントエンドからNode.jsまで、TypeScriptの深淵を日々旅しているシニアアーキテクトの先輩です。
今回は、TypeScriptの型システムにおける一つの大きな山場、「Recursive Types（再帰型）」についてお話しします。
ツリー構造のデータや、入れ子になった設定ファイルを扱うとき、「これ、どうやって型をつけたらいいんだろう？」と手が止まったことはありませんか？ 他の言語からやってきた方だと、「自分自身を型の中で呼び出すなんてできるの？」と驚かれるかもしれません。
ここをクリアすると、TypeScriptの表現力がグッと広がり、複雑なデータ構造も怖くなくなりますよ。さあ、一緒にTypeScriptの奥深い世界を覗いてみましょう！
—
1. 再帰型（Recursive Types）ってなに？
まずはイメージから入りましょう。
身の回りにある「マトリョーシカ」や「フォルダの中にフォルダが入るファイルシステム」を思い浮かべてみてください。これらはすべて、「自分自身と同じ構造を内包する（自己参照する）」という共通点を持っています。
プログラムの世界では、これをツリー構造と呼びます。例えば、JSONデータやHTMLのDOMツリー、メニューの階層構造などがこれに当たります。
TypeScriptでは、関数の引数でこうしたツリー構造を受け取るとき、型定義のなかで「自分自身の名前をもう一度使う」ことができます。これが再帰型です。
基本的なツリー構造の例
まずは、カテゴリが無限に入れ子になるような「メニュー構造」を考えてみましょう。
// メニュー項目の型定義
type MenuItem = {
title: string;
url?: string;
// ここがポイント！自分自身の配列を子要素として持てるようにする
children?: MenuItem[];
};
おっと、これだけで「自分自身を呼び出す型（再帰型）」が完成しました！
`MenuItem`の中にある `children` は、「さらにその中に `MenuItem` が入っているかもしれない配列」を意味しています。
—
2. 実践：再帰型を引数に取る関数を書く
では、この `MenuItem` を引数に取って、すべてのメニューのタイトルを再帰的にコンソールに表示する関数を作ってみましょう。
// 再帰的なメニューデータ
const siteMenu: MenuItem = {
title: “ホーム”,
url: “/”,
children: [
{
title: “製品情報”,
children: [
{ title: “ハードウェア”, url: “/products/hw” },
{ title: “ソフトウェア”, url: “/products/sw” },
],
},
{
title: “お問い合わせ”,
url: “/contact”,
},
],
};
// 引数に再帰型を取る関数
function printMenu(item: MenuItem, depth: number = 0): void {
// 階層に応じてインデントをつける演出
const indent = ” “.repeat(depth);
console.log(`${indent}- ${item.title} (${item.url ?? “リンクなし”})`);
// 子要素が存在する場合、自分自身を呼び出して深掘りする
if (item.children) {
for (const child of item.children) {
printMenu(child, depth + 1); // 再帰呼び出し
}
}
}
// 実行してみよう！
printMenu(siteMenu);
実行結果のイメージ
- ホーム (/)
- 製品情報 (リンクなし)
- ハードウェア (/products/hw)
- ソフトウェア (/products/sw)
- お問い合わせ (/contact)
見事にきれいな階層構造が出力されましたね！
コンパイラは、`item.children` が存在することを確認した瞬間に、それが `MenuItem[]` であることを完璧に理解し、ループの中の `child` に自動的に `MenuItem` 型を割り当ててくれます。これがTypeScriptの賢いところです。
—
3. ちょっと待って！「無限の深さ」がもたらすコンパイラの罠
さて、ここからが少しエンジニアとしての踏み込んだお話です。
再帰型はとても強力ですが、TypeScriptのコンパイラ（型チェッカー）に処理をさせるとき、いくつかの「限界」が存在します。
罠その1：無限ループならぬ「無限の型展開」
例えば、次のような「JSONがどこまでも深くネストできる」ような汎用型を作りたいとします。
// ⚠️ 注意：これは無限ループ（無限の深さ）を引き起こす可能性があります
type JsonValue =
| string
| number
| boolean
| null
| JsonValue[]
| { [key: string]: JsonValue };
一見、何の問題もなさそうに見えますよね。実際、これくらいのシンプルな再帰であれば、近年のTypeScriptは賢く処理してくれます。
しかし、これに「条件分岐（`extends` など）」や複雑なユーティリティ型を組み合わせると、コンパイラが「どこまで型を展開していいか分からない！」とパニックを起こし、以下のような恐ろしいエラーを吐きます。
> Error: Type instantiation is excessively deep and possibly infinite.
> （型のインスタンス化が深すぎて、無限ループの可能性があります）
コンパイラには、メモリやCPUが無制限にあるわけではありません。深すぎる再帰や、終わりの見えない自己参照は、コンパイルエラーの原因になるのです。
—
4. コンパイラの制限を華麗にかわす極意
では、複雑な再帰構造を安全に扱うにはどうすればよいのでしょうか？
プロの現場で使われるいくつかの知恵をご紹介します。
その1：「深さ（Depth）」に制限を設ける（番人をつける）
無限にネストできる型を作るのではなく、「最大でもここまで！」という制限（リミット）を設けるのは、実務において非常に有効なアプローチです。
// 再帰の深さをカウントするためのタプル型を使ったテクニック
type Prev = [never, 0, 1, 2, 3, 4, 5]; // 最大5階層まで許容する例
type NestedObject
? T // 深さが0になったら打ち切り！
: {
value: T;
child?: NestedObject
};
このように、型レベルで「終了条件」を明確にしてあげると、コンパイラは迷子にならずに安全に型を評価できます。
その2：不必要なジェネリクスを避ける
関数の引数に再帰型を使う際、むやみにジェネリクス（`
ツリー構造のような明確な実体がある場合は、ジェネリクスで抽象化しすぎず、今回紹介した `MenuItem` のように具体的な型定義をベースにする方が、コンパイラにとっても人間にとっても優しいコードになります。
—
まとめ
いかがだったでしょうか？
- 再帰型（Recursive Types）とは、自分自身を型の中で参照し、ツリー構造などの複雑なデータ（メニューや設定オブジェクトなど）を表現するための強力な武器であること。
- しかし、無限の深さはコンパイラに負担をかけ、エラー（Type instantiation is excessively deep）を引き起こすリスクがあること。
- 深さに制限を設けるなど、コンパイラの限界を意識した設計が大切であること。
ここをクリアできれば、APIから返ってくる複雑なJSONツリーの型定義や、高度なUIコンポーネントのProps設計も自信を持って書けるようになりますよ。
ぜひ、あなたのプロジェクトでも試してみてくださいね。それでは、次回の記事もお楽しみに！