こんにちは！TypeScriptの世界へようこそ。
新しい技術を学ぶとき、最初は誰だって「設定ファイル」という見えない壁にぶつかるものです。特に `tsconfig.json` と向き合った瞬間の「何これ、呪文？」という感覚、痛いほどよくわかります。
今日は、その中でも特に重要で、かつ多くの初学者が「あれ？なんでこうなるの？」と迷子になりやすい `rootDir` と `outDir` について、一緒に紐解いていきましょう。
肩の力を抜いて、身近な例え話から入りますね。
—
整理整頓の魔法：rootDirとoutDir
TypeScriptのコンパイル（変換）って、実は「料理」にすごく似ているんです。
- `rootDir`（冷蔵庫の中身）：あなたの材料（ソースコード）がどこに入っているかを決める場所。
- `outDir`（出来上がったお皿）：完成した料理（JavaScript）をどこに盛り付けるかを決める場所。
もし、この「冷蔵庫」と「お皿」の場所を正しく伝えないと、TypeScriptというシェフは、完成した料理を適当な場所に散らばせたり、最悪の場合は作り方を間違えてしまいます。
1. rootDir：材料の隠し場所を教える
`rootDir` は、「ここから先が、コンパイル対象のソースコードだよ！」と指定する場所です。
通常は `src` フォルダを指定することが多いですね。これを設定することで、TypeScriptは無駄なファイルを探し回らずに済みます。
2. outDir：盛り付け先を指定する
`outDir` は、「完成したJavaScriptは、ここにまとめてね！」という指示です。
よく使われるのは `dist`（Distributionの略）という名前のフォルダです。完成品はここにあるものだけを公開すればいいので、プロジェクトがとてもスッキリします。
—
実際に設定してみよう
では、実際に `tsconfig.json` を見てみましょう。エディタを開いて、このように設定してみてください。
{
“compilerOptions”: {
// コンパイル後のJavaScriptを「dist」フォルダに入れるよ！
“outDir”: “./dist”,
// ソースコードは「src」フォルダの中にあるよ！
“rootDir”: “./src”,
// 使うJavaScriptのバージョンやルール（基本セットです）
“target”: “ESNext”,
“module”: “CommonJS”,
“strict”: true
},
// srcフォルダの中身を全部コンパイル対象にするよ！
“include”: [“src//”]
}
なぜこの設定が「伝説的」に大事なのか？
もし `rootDir` を指定しなかったらどうなると思いますか？
TypeScriptは、あなたがプロジェクト内に置いた「メモ帳」や「設定ファイル」まで勝手に解釈して、`dist` フォルダの中に変な階層構造を作ってしまうことがあります。
`rootDir` を指定することで、「srcの中身の構造を、そのままdistにも再現してね」という秩序が生まれるんです。これこそが、大規模な開発になってもプロジェクトが崩壊しないための「守り」の技術なんですよ。
—
つまずきポイント：フォルダが生成されない時は？
「設定したのに、`dist` フォルダができない！」という時、よくある原因は2つです。
1. コマンドを叩いていない：設定ファイルを書くだけでは動きません。ターミナルで `npx tsc` と打って、「さあ、調理開始！」とシェフを呼んであげてください。
2. ファイルが空っぽ：`src` フォルダの中に、一つでも `.ts` ファイルはありますか？何もない冷蔵庫では料理は作れませんからね。
—
最後に：完璧を目指さなくて大丈夫
ここまで読んで「なるほど！」と思えたら、もうあなたはTypeScriptの基本の「型」を一つ身につけたようなものです。
最初は失敗して、フォルダが散らかってもいいんです。その度に「あ、ここを整理すればいいんだな」と気づいていく。それがエンジニアとしてのスキルアップです。
まずは `src` と `dist` というシンプルな構成から始めて、自分だけのプロジェクトを育ててみてください。応援していますよ！
もし何か分からなくなったら、いつでもこのページに戻ってきてくださいね。あなたのコードが、美しくビルドされることを願っています！
コメント