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

生徒

「先生、TypeScriptでプログラムを作っていたら、急にエラーが出て動かなくなっちゃいました。ファイル同士でデータを読み込み合っているのが原因みたいなんです……。」

先生

「それは『循環参照（じゅんかんさんしょう）』という問題かもしれませんね。お互いがお互いを必要としすぎて、身動きが取れなくなっている状態です。」

生徒

「お互いを呼び出し合うとダメなんですか？具体的にどう解決すればいいのか教えてください！」

先生

「プログラミングではよくある落とし穴です。解決策を一緒に学んでいきましょう！」

1. 循環参照（Circular Import）とは？

TypeScriptやJavaScriptの開発において、「循環参照（じゅんかんさんしょう）」は非常に重要なテーマです。まず「参照（さんしょう）」とは、他のファイルに書かれたプログラム（変数や関数、クラスなど）を、自分のファイルで使えるように呼び出すことを指します。

例えば、ファイルAがファイルBの中身を使いたいとき、ファイルAの冒頭でファイルBを読み込みます。これを「インポート（Import）」と呼びます。通常はこれで問題ありませんが、もしファイルBも「ファイルAの中身を使いたい！」となって、お互いに読み込み合ってしまうとどうなるでしょうか。

これが「循環参照」の状態です。パソコンは「Aを読み込むためにBを見て、Bを読み込むためにAを見て……」という無限ループのような状態に陥り、最終的に「どちらを先に読み込めばいいのかわからない！」とパニックを起こしてエラーになったり、中身が空っぽ（undefined）の状態で処理が進んでしまったりします。

モジュール（ファイルを分割する仕組み）を細かく分ければ分けるほど、この問題は発生しやすくなります。

2. なぜ循環参照がいけないのか？

循環参照が起きると、プログラムの依存関係（いぞんかんけい）が複雑になります。「依存関係」とは、ある部品が動くために他の部品を必要としている状態のことです。

想像してみてください。朝起きるために「目覚まし時計」が必要ですが、その「目覚まし時計」をセットするために「あなたの手」が必要です。ここまでは普通ですね。しかし、もし「あなたが動くためには目覚まし時計が鳴らなければならない」かつ「目覚まし時計が鳴るためにはあなたが先に動いてボタンを押さなければならない」というルールがあったらどうでしょう？どちらも動き出せなくなってしまいますね。これがプログラムの世界で起きる循環参照の弊害です。

具体的なデメリットは以下の通りです。

実行エラー： プログラムが起動時にクラッシュすることがあります。
予期せぬ動作： 変数の中身が空（undefined）になり、計算が合わなくなります。
保守性の低下： どこを直すとどこに影響が出るか分からなくなり、修正が怖くなります。

3. 循環参照が発生するコードの例

実際にどのようなコードで循環参照が起きるのか見てみましょう。ここでは「ユーザー（User）」と「注文（Order）」という2つのファイルがある場面を想定します。

User.ts（ユーザーの情報を管理するファイル）


import { Order } from "./Order"; // Orderを読み込む

export class User {
    name: string = "たろう";
    lastOrder?: Order; // 最後の注文情報を保持する
}

Order.ts（注文の情報を管理するファイル）


import { User } from "./User"; // Userを読み込む

export class Order {
    id: number = 123;
    customer?: User; // 注文したユーザー情報を保持する
}

このように、UserクラスがOrderを知りたがり、OrderクラスがUserを知りたがっている状態です。これが典型的な循環参照です。

4. 回避策その1：第三のファイルへ抽出する

一番おすすめの解決方法は、「共通の型やインターフェースを別のファイルに切り出す」ことです。「お互いに直接見つめ合う」のではなく、「共通のルール（インターフェース）が書いてある掲示板を二人で見に行く」というイメージです。

新しいファイル types.ts を作成してみましょう。

types.ts（共通のルールだけを書く場所）


export interface UserInterface {
    name: string;
}

export interface OrderInterface {
    id: number;
}

こうすることで、User.ts も Order.ts も、この types.ts だけを見ればよくなります。ファイル同士が直接依存しなくなるため、循環が解消されます。

5. 回避策その2：import type を活用する

TypeScriptには import type という特別な書き方があります。これは「データそのものを読み込むのではなく、形（型）の情報だけを教えてね」というお願いです。

通常の import は、プログラムを実行するときにその中身を全部持ってこようとしますが、import type は、プログラムを翻訳（コンパイル）するときにチェックするだけで、実行時の動作には影響を与えません。


// Order.tsの中でUserの「型」だけを読み込む
import type { User } from "./User"; 

export class Order {
    id: number = 101;
    customer?: User; // 型として使うだけならこれでOK！
}

この type というキーワードを付けるだけで、循環参照による実行エラーを劇的に防ぐことができます。

6. 回避策その3：ディレクトリ構造を見直す

循環参照が起きるということは、そもそも「役割分担（設計）」がうまくいっていないサインかもしれません。プログラムを整理する際、「上位のモジュールは下位のモジュールを知っているが、下位は上位を知らない」という一方通行のルールを作ることが大切です。

例えば、「学校（School）」と「生徒（Student）」という関係なら、学校は生徒のリストを持っているべきですが、生徒自身が学校の全機能（学校の設立、閉鎖など）を知っている必要はありません。もし生徒が学校の機能を使いたくなったら、それは設計が少し複雑になりすぎているかもしれません。

「このファイルは何をするためのものか？」を明確にし、できるだけシンプルな一方通行の流れ（依存の方向）を意識しましょう。

7. 循環参照を見つけるツール

プログラムが大きくなってくると、どこで循環が起きているか目で見つけるのは大変です。そんな時は madge というツールなどを使って、依存関係をグラフ（図）にして確認することができます。

また、開発ツールである ESLint（エスリント） という機能を使えば、「循環参照がありますよ！」とコードを書いている最中に赤線で警告してくれるように設定することも可能です。初心者のうちは、こうしたツールの力を借りるのが上達の近道です。

8. まとめとしての考え方

TypeScriptでの開発において、モジュールと名前空間を適切に設計することは、家を建てる際の設計図を書くことと同じくらい重要です。循環参照は、設計図がごちゃごちゃになって、柱と屋根のどちらを先に作るべきか分からなくなっている状態です。

もし循環参照にぶつかったら、以下の3点を思い出してください。

共通化： 別のファイルに共通部分を移せないか？
型のみの利用： import type で解決できないか？
役割分担： ファイルの役割が混ざっていないか？

これらを意識するだけで、あなたの書くコードはぐっとプロフェッショナルで、壊れにくいものになります。最初は難しく感じるかもしれませんが、一つずつ整理していく習慣をつけましょう。

TypeScriptでCircular Import（循環参照）を避ける方法