TypeScriptで出力先outDirを設定！ファイル構成を整理して開発効率アップ

TypeScriptで出力先（outDir）やファイル構成を整理する方法

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

生徒

「TypeScriptの学習を始めましたが、コンパイルすると元のファイルと変換後のファイルが混ざって、フォルダの中がごちゃごちゃになってしまいます。きれいに整理する方法はありますか？」

先生

「それは管理が大変ですよね。TypeScriptにはoutDirという設定があり、これを使えば出力されるJavaScriptファイルを特定のフォルダに自動でまとめることができますよ。」

生徒

「出力先を分けるだけで、ファイル構成がスッキリするんですね！具体的にはどこを触ればいいんですか？」

先生

「tsconfig.jsonという設定ファイルを少し書き換えるだけです。初心者の方でも迷わないように、手順を詳しく解説していきますね！」

1. TypeScriptのコンパイルとファイル整理の重要性

プログラミングを始めたばかりの方がTypeScriptを触るとき、最初に驚くのが「TypeScriptはそのままでは動かない」という点です。TypeScriptで書かれたプログラムは、コンピュータが理解できるJavaScriptという言葉に翻訳する必要があります。この翻訳作業をコンパイルと呼びます。

初期状態のままコンパイルを行うと、TypeScriptファイル（拡張子が.ts）と同じ場所にJavaScriptファイル（拡張子が.js）が作成されます。最初は数個のファイルなので気になりませんが、学習が進んでファイルが増えてくると、どのファイルが自分が編集しているものか、どれが翻訳後のものかが見分けにくくなります。これは、机の上に教科書とノート、そしてコピーしたプリントがバラバラに散乱しているような状態です。

整理整頓ができていないと、間違えて翻訳後のJavaScriptファイルを編集してしまったり、必要なファイルを見失ったりする原因になります。そこで、本棚を用意して教科書とプリントを分けるように、プログラムの世界でも「ソースコード（元の設計図）」と「ビルド成果物（完成品）」をフォルダで分けるのが一般的なルールとなっています。この整理を行うために必要なのが、今回解説するoutDirという設定項目です。

2. tsconfig.jsonとは何かを理解しよう

TypeScriptの設定を管理する司令塔の役割を果たすのが、tsconfig.jsonというファイルです。このファイルは、プロジェクトのルールブックのようなものです。例えば、「どのフォルダにあるファイルを翻訳対象にするか」「どのバージョンのJavaScriptに変換するか」「エラーのチェックをどこまで厳しくするか」といった細かい指示をこのファイルに書き込みます。

パソコンの操作に慣れていない方にとって、「設定ファイル」と聞くと難しく感じるかもしれませんが、中身はただのテキストデータです。特定の項目を探して、その値を書き換えるだけで、TypeScriptの挙動を自由に変えることができます。このファイルを作成するには、ターミナルやコマンドプロンプトで特定の命令を入力します。


// tsconfig.jsonを作成するためのコマンド（ターミナルで入力します）
// npx tsc --init

このコマンドを実行すると、自分のプロジェクトの中にtsconfig.jsonが生成されます。中にはたくさんの設定項目が並んでいますが、そのほとんどはコメントアウト（プログラムとして動作しないように無効化された説明書き）されています。私たちは、この中から必要な項目だけを探して有効にしていきます。

3. 出力先を指定するoutDirの設定手順

それでは、具体的に出力先を整理してみましょう。最も一般的な構成は、元のプログラムをsrcフォルダに入れ、変換後のファイルをdistフォルダに出力する構成です。srcはSource（ソース：源泉）、distはDistribution（ディストリビューション：配布）の略称としてよく使われます。

まず、tsconfig.jsonを開き、outDirという文字を検索してください。多くの場合は、compilerOptionsという大きな塊の中に隠れています。見つけたら、先頭にある//を消して有効化し、値を"./dist"に変更します。


{
  "compilerOptions": {
    /* 他の設定項目は省略 */
    "outDir": "./dist",    // コンパイル後のファイルの保存先を指定
    "rootDir": "./src"     // 元のプログラム（tsファイル）が入っている場所を指定
  }
}

ここで登場したrootDirも非常に重要です。これは「どこを基準にしてファイルを読み込むか」を教える設定です。これを"./src"に設定することで、TypeScriptは「srcフォルダの中にあるものだけを見てね」と理解してくれます。この二つをセットで設定することで、フォルダ構成が劇的に綺麗になります。これにより、開発者はsrcフォルダの中だけに集中して作業ができるようになります。

4. 実際にフォルダを作ってコンパイルしてみよう

設定が終わったら、実際にフォルダを作成して動作を確認しましょう。まずは、プロジェクトのフォルダの中に新しくsrcという名前のフォルダを作ります。その中に、試しにindex.tsというファイルを作成してみてください。中身は何でも構いませんが、簡単なメッセージを表示するコードを書いてみましょう。


// src/index.ts の中身
const message: string = "TypeScriptの整理整頓が完了しました！";
console.log(message);

準備ができたら、ターミナルでtscとだけ入力して実行します。すると、不思議なことに、今までなかったdistというフォルダが自動的に作成され、その中にindex.jsが出現します。これがoutDirの力です。


project/
├── dist/
│   └── index.js      (自動でここに作成される！)
├── src/
│   └── index.ts      (あなたが書いたファイル)
├── tsconfig.json
└── package.json

このように、入力（src）と出力（dist）がハッキリ分かれることで、納品したり公開したりする際はdistフォルダの中身だけを渡せば良くなり、作業ミスを減らすことができます。パソコンのフォルダ管理が苦手な人こそ、この自動化設定は必須と言えるでしょう。

5. 複数のファイルがある場合の構成

プロジェクトが大きくなると、ファイルが1つだけということはありません。例えば、計算用のファイルや、画面表示用のファイルなど、役割ごとにファイルを分けるのが一般的です。outDirを設定している場合、srcフォルダの中にある階層構造がそのままdistフォルダにも再現されます。

例えば、src/utils/math.tsというファイルを作った場合、コンパイルすると自動的にdist/utils/math.jsが作られます。わざわざ手動でフォルダをミラーリングする必要はありません。これは、TypeScriptが元のフォルダ構造を維持したまま、賢く中身だけをJavaScriptに書き換えてくれているからです。


// src/utils/math.ts の例
export const add = (a: number, b: number): number => {
    return a + b;
};

// src/main.ts の例
import { add } from "./utils/math";
console.log(add(10, 20));

このような構成にしておけば、プログラムが100個、1000個と増えていっても、迷子になることはありません。整理整頓された環境は、エラーを見つけやすくし、学習のストレスを大幅に軽減してくれます。初心者の方は、まず「srcとdistに分ける」という基本パターンを指に覚え込ませてしまいましょう。これがプロの現場でも使われる標準的なスタイルです。

6. 困ったときのチェックポイント

設定をしてもうまく動かないときは、いくつか確認すべきポイントがあります。まず、tsconfig.jsonの記述に間違いがないか見てください。カンマを忘れていたり、綴りが間違っていたりすると正しく認識されません。特に、"outDir"を"outputDir"と書き間違えてしまうミスがよくありますので注意しましょう。

次に、コマンドを実行する場所です。ターミナルで作業するときは、必ずtsconfig.jsonがあるフォルダと同じ場所でコマンドを打つ必要があります。これを「カレントディレクトリ」と呼びます。今自分がどこのフォルダにいるのかは、プログラミングにおいて非常に重要な感覚です。エクスプローラーなどでフォルダの場所を確認し、正しい位置で実行するようにしましょう。

また、古いJavaScriptファイルが残っているせいで混乱することもあります。一度思い切ってdistフォルダを削除してから、もう一度tscコマンドを実行してみてください。真っさらな状態から正しくファイルが生成されれば、設定は完璧です。このように「一度消してやり直す」というのも、プログラミングでは有効な解決手段の一つです。失敗を恐れずに、何度も試行錯誤することが上達への近道です。

7. ファイル構成をさらに便利にする応用設定

ファイル構成が整理できたら、さらに一歩進んだ設定も紹介します。それは「コンパイル対象外のファイルを指定する」方法です。例えば、テスト用のコードや、下書きのメモなどはJavaScriptに変換してほしくないですよね。そのようなときは、excludeという項目を使います。

tsconfig.jsonにexcludeを追加すると、特定のフォルダやファイルを無視するように指示できます。これにより、distフォルダの中に不要なファイルが混ざるのを防ぐことができます。また、逆に「このファイルだけは絶対に含めてほしい」という場合はincludeを使います。これらの設定を組み合わせることで、自分の理想通りのフォルダ構成を作り上げることができます。


{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],    // srcフォルダ以下のすべてのファイルを含める
  "exclude": ["node_modules", "**/*.test.ts"] // ライブラリフォルダやテストファイルを除外
}

初心者のうちは、無理にすべての項目を覚える必要はありません。まずは「outDirで出力先を変えられる」ということを知っているだけで十分です。必要になったときに少しずつ設定を足していくことで、自分だけの快適な開発環境が育っていきます。プログラミングは道具を使いこなす技術でもありますから、こうした設定の知識も自分の武器にしていきましょう。

8. 開発をスムーズにする自動監視モード

毎回tscと入力するのは大変ですよね。そんなときに便利なのが「監視モード」です。これは、ファイルを保存した瞬間に、TypeScriptが変更を察知して自動的にコンパイルを行ってくれる機能です。コマンドはとても簡単で、後ろに-wをつけるだけです。wはWatch（ウォッチ：監視する）の頭文字です。


// ファイルの変更を自動で監視してコンパイルするコマンド
// npx tsc -w

このコマンドを実行しておけば、srcの中にあるファイルを編集して保存するたびに、distの中にあるJavaScriptファイルが最新の状態に更新されます。まるで魔法のように、自分が書いたコードがリアルタイムで変換されていく様子は見ていて楽しいものです。これで、コマンドの打ち忘れによる「変更したのに動かない！」というトラブルともおさらばです。

このように、TypeScriptには開発を楽にするための機能がたくさん備わっています。最初は設定ファイルの多さに圧倒されるかもしれませんが、基本さえ押さえればこれほど心強い味方はありません。今回学んだoutDirの設定をきっかけに、整理整頓された綺麗なコードの世界を楽しんでください。一歩ずつ、着実にスキルを磨いていきましょう。

現役テックリードが直接指導【TypeScript設計実践セミナー】

TypeScript型安全設計・実践セミナー｜React/Next.js時代の堅牢なコード構築術

累計120万PV超の専門メディアが監修。商用フロントエンド開発の「設計の型」を最短習得。

「型」を味方にする。TypeScript基礎とモダン開発の第一歩。

本講座では、モダンフロントエンドの標準であるTypeScriptの真価を体験し、初心者が陥りがちな「型の迷子」を卒業して、堅牢なコードを書くための土台を築きます。単なる文法の解説ではなく、React等のフレームワークで必須となる型推論の活用や非同期処理（Async/Await）の本質を60分で濃縮体験します。