こんにちは。TypeScriptの世界へようこそ。
型システムという強力な武器を手にすると、これまで「実行してみるまでバグが潜んでいるか分からない」と不安だったデータ構造が、まるで揺るぎない石碑のように堅牢なものに変わります。
今日は、TypeScriptを学ぶ上で一つの大きな壁であり、同時に最強の武器となる「再帰的型定義（Recursive Type Alias）」についてお話しします。JSONツリーやメニュー構造のような「どこまで深くネストされるか分からないデータ」を、どうやって安全に飼い慣らすか。その極意を伝授しましょう。
—
1. なぜ「再帰」が必要なのか？
例えば、Webサイトのサイドバーメニューを想像してみてください。メニューの中にサブメニューがあり、その中にさらにサブメニューがある……。これらは「自分自身を内包する構造」をしていますよね。
// 直感的に書くとこうなるかもしれないけれど…
type MenuItem = {
label: string;
children: MenuItem[]; // 自分自身を型の中で使っている！
};
これが「再帰的型定義」です。TypeScriptのコンパイラは、この定義を読み込む際、まるで無限ループのような恐怖を感じる……わけではありません。TypeScriptは「遅延評価」の仕組みを持っているため、`MenuItem`という名前が解決される前に、その型定義を安全に参照できるのです。
—
2. 実践：階層型データのバリデーション
では、実際に「ファイルシステムの構造」を模した階層データを作ってみましょう。
type FileNode = {
name: string;
type: ‘file’ | ‘directory’;
// ディレクトリなら子供（FileNode）の配列を持つ、という再帰構造
children?: FileNode[];
};
const myProject: FileNode = {
name: ‘root’,
type: ‘directory’,
children: [
{ name: ‘package.json’, type: ‘file’ },
{
name: ‘src’,
type: ‘directory’,
children: [{ name: ‘index.ts’, type: ‘file’ }]
}
]
};
ここでのポイントは、`children?: FileNode[]` という部分です。
「`FileNode`は`children`を持つかもしれない。そしてその`children`は`FileNode`の配列である」という再帰的な定義によって、深さが無限のツリー構造であっても、すべて型チェックの網が掛かるようになります。
もし、間違えて `children` の中に `number` を入れてしまったら？ コンパイラが即座に「それは `FileNode` じゃないよ」と赤線を引いて教えてくれます。これが型安全の恩恵です。
—
3. 型安全にツリーを走査（トラバース）する
再帰的な型を定義したら、次はそれを使って「データを取り出す」番です。ここでも再帰関数が活躍します。
/
- ツリー全体を走査して、すべてのファイル名を表示する関数
/
function printAllFiles(node: FileNode, depth: number = 0): void {
const indent = ‘ ‘.repeat(depth);
console.log(`${indent}- ${node.name}`);
// もし子供がいたら、再帰的にこの関数を呼ぶ
if (node.children) {
for (const child of node.children) {
printAllFiles(child, depth + 1);
}
}
}
// 実行！
printAllFiles(myProject);
このコードの賢いところは、TypeScriptが `node.children` の存在をチェックしている限り、再帰呼び出しの引数も自動的に `FileNode` 型として推論される点です。あなたが意識せずとも、再帰の深さに関わらず型が保証され続けます。
—
4. 陥りやすい罠：その型、本当に終わる？
再帰型を書くときに一つだけ注意点があります。それは「再帰の出口（ベースケース）を忘れないこと」です。
もし、すべてのノードに必ず `children` が必須だと定義してしまうと、どこかで終わらせようとしても「子供がいないのに子供が必要です」というエラーが出てしまいます。
- ダメな例: `children: FileNode[]` （これだと永遠に子供を書き続けなければならない）
- 良い例: `children?: FileNode[]` または `children: FileNode[] | null`
このように、「ここで再帰を止めてもいいですよ」というルートを必ず明示してあげてください。
—
先輩からのアドバイス
再帰的型定義をマスターすると、JSONの深い階層のAPIレスポンスを扱うのも、複雑なUIコンポーネントのツリー構造を管理するのも、怖くなくなります。
最初は「自分自身を呼び出すなんて……」と頭がこんがらがってしまうかもしれません。でも、「これは構造の定義であって、実行（ループ）ではない」と割り切って考えてみてください。TypeScriptのコンパイラは、あなたの代わりにその構造が整合しているかを、光の速さで検証してくれます。
ここをクリアすれば、あなたはもうTypeScriptの初級者を卒業です。次は「ジェネリクス」というさらなる深淵へ一緒に進んでいきましょう。TypeScriptの旅は、ここからが一番面白いですよ。
何か詰まったら、いつでも戻ってきてくださいね。応援しています！