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

生徒

「TypeScriptを書いた後、どうやって動かすんですか？そのままブラウザで読み込んでも動かないって聞いたのですが……」

先生

「そうなんです。TypeScriptは『コンパイル』という作業を経て、JavaScriptに変換しないとコンピュータは理解できないんですよ。」

生徒

「コンパイル……難しそうですね。具体的にどんな仕組みで、どう設定すればいいんでしょうか？」

先生

「初心者の方でも大丈夫です！翻訳作業に例えて、その仕組みと設定方法を詳しく解説していきますね。」

1. TypeScriptのコンパイルとは？

プログラミングの世界では、私たちが書いたコードをコンピュータが理解できる形式に変換することをコンパイルと呼びます。特にTypeScriptの場合、書いたコードをそのまま実行することはできません。なぜなら、現在普及しているWebブラウザや実行環境は、主にJavaScript（ジャバスクリプト）という言葉しか理解できないからです。

例えるなら、TypeScriptは「方言の強い特別な言葉」で、JavaScriptは「共通語」のようなものです。どんなに素晴らしい機能がTypeScriptにあっても、共通語であるJavaScriptに翻訳（変換）してあげなければ、コンピュータには伝わりません。この「TypeScriptをJavaScriptに書き換える作業」こそが、コンパイルの正体です。

用語解説：トランスパイル
厳密には、あるプログラミング言語から別のプログラミング言語へ変換することを「トランスパイル」と呼びますが、TypeScriptの世界では一般的に「コンパイル」という言葉が使われています。

2. なぜコンパイルが必要なのか？

「最初からJavaScriptで書けば手間が省けるのでは？」と思うかもしれません。しかし、TypeScriptにはJavaScriptにはない強力な型チェックという機能があります。コンパイルを行う最大のメリットは、プログラムを実行する前に「間違い」を見つけられる点にあります。

例えば、数字を入れるべき場所に間違えて文字を入れてしまったとき、JavaScriptでは動かしてみて初めてエラーになります。しかし、TypeScriptはコンパイルの段階で「ここ、間違っていますよ！」と教えてくれます。いわば、本番の発表前に厳しい先生が内容を添削してくれるようなものです。これにより、バグの少ない安全なプログラムを作ることが可能になります。

3. コンパイルの仕組み：tscコマンド

TypeScriptをコンパイルするためには、TypeScript Compiler（通称：tsc）というツールを使用します。パソコンにこのツールをインストールすることで、コマンド一つで変換作業ができるようになります。

基本的な手順は以下の通りです。

拡張子が .ts のファイルを作成する。
ターミナル（黒い画面）で tsc ファイル名.ts と入力する。
同じ場所に .js ファイルが自動的に作成される。

例えば、以下のようなTypeScriptファイルを用意したとしましょう。


const message: string = "こんにちは、TypeScript！";
console.log(message);

これをコンパイルすると、型情報が取り除かれた以下のJavaScriptファイルが出力されます。


const message = "こんにちは、TypeScript！";
console.log(message);

4. 設定ファイル「tsconfig.json」の役割

開発が大規模になってくると、毎回ファイル名を指定してコンパイルするのは大変です。また、「古いブラウザでも動くようにしたい」「もっと厳しくエラーをチェックしたい」といった細かい要望も出てきます。そこで登場するのが、tsconfig.jsonという設定ファイルです。

このファイルは、いわば「コンパイルのルールブック」です。プロジェクトのルートフォルダ（一番上の階層）にこのファイルを置いておくだけで、複雑な設定を自動で適用してくれます。

設定ファイルを作成するには、ターミナルで以下のコマンドを入力します。


tsc --init

これを実行すると、設定がぎっしり書かれた tsconfig.json が生成されます。

5. 代表的なコンパイル設定を見てみよう

tsconfig.json の中にはたくさんの項目がありますが、初心者がまず知っておくべき重要なポイントを絞って解説します。

target（どのバージョンのJavaScriptにするか）

JavaScriptには「古い書き方」と「新しい書き方」があります。target を指定することで、どの年代のJavaScriptに合わせて変換するかを決められます。例えば ES5 と書けば、かなり古いブラウザでも動くコードに変換してくれます。

outDir（変換したファイルの保存先）

TypeScriptのファイルと、コンパイル後のJavaScriptファイルが同じ場所に混ざっていると、管理が大変です。 outDir を設定すると、「JavaScriptファイルは全部このフォルダに入れてね」という指定ができます。

strict（厳格なチェック）

これは非常に重要な項目です。ここを true にすると、TypeScriptのチェックがより厳しくなります。「初心者だから甘めにしたい」と思うかもしれませんが、最初から厳しく設定しておくことで、プログラミングの上達が早まり、バグも激減します。

6. 自動でコンパイルしてくれる「ウォッチモード」

コードを一行書き換えるたびに、自分でコマンドを打つのは面倒ですよね。そんな時に便利なのがウォッチモードです。このモードを起動しておくと、ファイルを保存した瞬間に、コンピュータが変更を検知して自動でコンパイルをやり直してくれます。

使い方は簡単で、コマンドの最後に -w をつけるだけです。


tsc -w

これだけで、あなたはコンパイル作業を意識することなく、コードを書くことだけに集中できるようになります。

7. パソコンを触ったことがない人へのアドバイス

プログラミングの学習を始めると、この「コンパイル」や「ターミナルでの操作」でつまずいてしまう人が多いです。しかし、これらはあくまで「道具の準備」に過ぎません。一度設定してしまえば、あとは毎日触る必要はありません。

大切なのは、「TypeScriptは、私たちが書いたコードをJavaScriptという機械がわかる言葉に直してくれる翻訳機を持っているんだ」というイメージを持つことです。最初は黒い画面（ターミナル）に呪文のようなコマンドを打ち込むことに抵抗があるかもしれませんが、一歩ずつ慣れていきましょう。

もしエラーが出たとしても、それはコンピュータがあなたを助けようとしている合図です。コンパイルが通った（成功した）時の喜びは、プログラミングの大きな醍醐味の一つですよ。