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

生徒

「TypeScriptで書いたコードを、どうやって動かせばいいんですか？」

先生

「TypeScriptはそのままではブラウザで動かないので、『tsc』というコマンドを使ってJavaScriptに変換（コンパイル）する必要があるんですよ。」

生徒

「コンパイル？難しそうですね…。具体的にはどのように操作するんですか？」

先生

「大丈夫です、コマンドひとつで自動的にやってくれます。それでは、基本的な使い方を詳しく見ていきましょう！」

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

プログラミングの世界では、人間が書いた言葉をコンピュータが理解できる形に変換することをコンパイルと呼びます。TypeScriptの場合、私たちが書いた.tsという拡張子のファイルを、ブラウザやサーバーが理解できる標準的なJavaScript（.js）に翻訳する作業のことです。

この翻訳作業を担当してくれる魔法の道具が、tsc（TypeScript Compiler）というコマンドです。これを使わないと、せっかく書いたTypeScriptコードもただのテキストファイルとして扱われ、動かすことができません。

例えるなら、TypeScriptは「最新の設計図」で、JavaScriptは「実際に動く機械」です。設計図を工場（tsc）に持っていって、製品（JavaScript）を作ってもらうイメージを持つと分かりやすいでしょう。

2. 準備を整えよう（Node.jsとTypeScriptのインストール）

コンパイルを始める前に、まずはパソコンに道具を揃える必要があります。パソコンを触るのが初めての方でも順番に進めれば大丈夫です。まず、Node.js（ノード・ジェーエス）というソフトをインストールします。これはTypeScriptを動かすための土台となるソフトです。

Node.jsが入ったら、次に「コマンドプロンプト」や「ターミナル」という、文字でパソコンに命令を出す画面を開きます。そこで以下の命令を入力して、TypeScriptを使えるようにします。


npm install -g typescript

ここで出てくるnpmは、新しい道具をダウンロードしてくる店員さんのような役割です。-gは「パソコン全体でいつでも使えるようにしてね」という魔法の合言葉です。これが完了すれば、あなたのパソコンでtscコマンドが使えるようになります。

3. 実際にコードを書いてコンパイルしてみよう

それでは、練習用のファイルを作ってみましょう。デスクトップなどに「test.ts」という名前のファイルを作り、以下のコードを書き込んで保存してください。まだ文法の意味が分からなくても大丈夫です。型（タイプ）を指定しているのがTypeScriptの特徴です。


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

次に、このファイルをJavaScriptに変換します。黒い画面（ターミナル）で、ファイルがある場所に移動してから、以下のコマンドを打ち込みます。


tsc test.ts

すると、同じフォルダの中に「test.js」という新しいファイルが自動で出来上がります。中を見てみると、TypeScript特有の書き方が消えて、普通のJavaScriptに書き換わっているのが確認できるはずです。

4. tsconfig.jsonで設定をカスタマイズする

毎回ファイル名を指定してコンパイルするのは大変ですよね。そこで、プロジェクトの設定をまとめて管理するtsconfig.jsonという設定ファイルを使います。これを作るには以下のコマンドを打ちます。


tsc --init

このファイルがフォルダにあると、ただtscと打つだけで、フォルダ内のすべてのTypeScriptファイルを一気にコンパイルしてくれるようになります。さらに、「どのバージョンのJavaScriptに変換するか」や「エラーをどこまで厳しくチェックするか」といった細かいルールを決めることができます。

初心者のうちは、このファイルを置いておくだけで、開発環境がぐっとプロっぽくなります。

5. 自動でコンパイルする「ウォッチモード」が便利！

コードを書き直すたびにコマンドを打つのは面倒です。そんな時に便利なのがウォッチモード（監視モード）です。以下のコマンドを使ってみましょう。


tsc -w

このコマンドを一度実行すると、パソコンがファイルをずっと見張ってくれます。あなたがファイルを保存した瞬間に、裏側で勝手にコンパイルを終わらせてくれるのです。これを使えば、まるで魔法のようにスムーズに開発が進められます。作業を終えたいときは、キーボードの「Ctrlキー」を押しながら「C」を押すと止めることができます。

6. なぜわざわざコンパイルするのか？

「最初からJavaScriptで書けばいいのでは？」と思うかもしれません。しかし、TypeScriptには型チェックという強力な機能があります。コンパイルをする瞬間に、もし書き間違いやミスがあれば「ここが間違っているよ！」と赤文字で厳しく指摘してくれます。

これは、料理を出す前に味見をして、腐っていないか、塩加減が間違っていないかを確認するようなものです。JavaScriptでは実行して初めて気づくようなミスも、TypeScriptならコンパイルの段階で見つけることができるため、結果として安全で高品質なプログラムを作ることができるのです。プログラミング未経験の方こそ、この「間違い指摘機能」の恩恵は非常に大きいと言えるでしょう。

7. よくあるエラーと対処法

初めてtscを使うときにぶつかりやすい壁がいくつかあります。まず、「コマンドが見つかりません」と出る場合は、インストールの手順が漏れているか、パソコンを再起動していない可能性があります。また、赤文字で英語のエラーが出たときは、コードに文法ミスがある証拠です。エラーメッセージには「何行目がどうおかしいか」が書いてあるので、落ち着いて読み解いてみましょう。これもプログラミング学習の大切な一歩です。

また、コンパイル後のJavaScriptファイルが上書きされないときは、ファイルの保存を忘れていないか確認してください。最初は戸惑うことも多いですが、一度やり方を覚えてしまえば、TypeScriptはあなたの強力な味方になってくれます。