こんにちは。TypeScriptの世界へようこそ。
「大規模なプロジェクトをどう管理するか」という壁にぶつかっているのですね。大丈夫、それはあなたが成長している証です。今日は、そんな悩みを抱えるあなたに、TypeScriptの「Composite（コンポジット）プロジェクト」という、ちょっと賢い整理術を伝授します。
「巨大なクローゼット」を想像してみてください
想像してみてください。あなたは今、服も、本も、工具も、思い出の写真も、すべてを一つの巨大な箱（プロジェクト）に詰め込んでいます。これだと、何かを探すたびに箱の中を全部ひっくり返さないといけませんよね？
TypeScriptも同じです。プロジェクトが大きくなると、小さな変更を加えただけでも、TypeScriptは「全部やり直し！」とばかりに、プロジェクト全体のコードを解析し始めます。これではビルドが終わるのを待っている間にコーヒーを飲み終わってしまいます。
そこで登場するのが「Compositeプロジェクト」です。これは、巨大な箱を「衣類ケース」「本棚」「工具箱」というふうに、小さな箱に分けて管理する仕組みのことなんです。
—
Compositeプロジェクトの魔法：参照関係を整理する
Compositeプロジェクトの最大のメリットは、「必要なところだけをビルドする」という賢さです。
たとえば、「UIパーツ（ボタンや入力欄）」と「API通信（データ取得）」という2つの機能があるとします。これらを別々のプロジェクトとして切り出しておけば、UIパーツを修正したとき、API通信のコードまでいちいちチェックする必要がなくなります。TypeScriptは「あ、UIだけ直したのね。じゃあAPIのほうは前の結果を使い回すよ！」と判断してくれるんです。
—
実践！設定ファイルを書こう
では、実際にどうやって「小分け」にするのか。鍵を握るのは `tsconfig.json` の中のたった一つの魔法の言葉、`”composite”: true` です。
1. 小分けにしたプロジェクト（例：UIパーツ用の設定）
まずは、小さな箱（サブプロジェクト）の設定ファイル `ui/tsconfig.json` です。
{
“compilerOptions”: {
“composite”: true, // これが「自分は独立した箱ですよ」という合図
“declaration”: true, // 他のプロジェクトが自分を使えるように、設計図を作る
“outDir”: “./dist” // ビルドした結果をここに置く
},
“include”: [“src”]
}
2. 全体をまとめる親プロジェクトの設定
次に、これらの箱を束ねる親玉の設定ファイル `tsconfig.json` です。
{
“files”: [], // 親自身にはコードを書かないので空っぽでOK
“references”: [
// 「これらの箱を使ってますよ」と宣言する
{ “path”: “./ui” },
{ “path”: “./api” }
]
}
これだけで、TypeScriptは「なるほど、UIとAPIという箱があるんだな」と理解し、効率的にビルドを開始します。
—
つまずきやすいポイント：大丈夫、焦らなくていいんです
初めて設定するとき、こんなエラーに出くわすかもしれません。「パスが解決できない」「宣言ファイルが見つからない」。
これらは、TypeScriptが「箱同士の繋がり」を必死に確認しているサインです。もしエラーが出たら、一度深呼吸してください。多くの原因は、「`composite: true` を書き忘れている」か「`declaration: true` が漏れている」かのどちらかです。
現場のアーキテクトとして一つアドバイスをするなら、「最初から細かく分けすぎないこと」。
最初は「共通機能」と「メインのアプリ」の2つに分けるくらいから始めてみてください。プロジェクトの規模が大きくなって、「あ、ここも独立させておくと楽だな」と感じたタイミングで、また新しい箱を一つ作ればいいのです。
最後に
TypeScriptの環境構築は、まるで自分好みの作業机を整えるようなものです。Compositeプロジェクトという考え方を知ったあなたは、もう「巨大な箱」に振り回されることはありません。
最初は難しく感じるかもしれませんが、一度この快適さを知ってしまったら、もう元のやり方には戻れないはずです。少しずつ、あなたのペースで、整理整頓された美しいコードベースを育てていってくださいね。
もしまた壁にぶつかったら、いつでもここに戻ってきてください。応援していますよ！
コメント