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

生徒

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

先生

「TypeScriptは直接ブラウザで動かせないので、JavaScriptに変換（ビルド）する必要があります。そのときに使うのがtscというコマンドです。」

生徒

「なるほど…。そのビルドって、具体的にどうやってやるんですか？」

先生

「それでは、TypeScriptのプロジェクトをtscでビルドする基本操作を、順を追って説明していきましょう！」

1. TypeScriptのビルドとは？

TypeScript（たいぷすくりぷと）は、人が読みやすい書き方ができるうえに、 型（タイプ）という仕組みでまちがいを早く見つけられる便利な言語です。しかし、そのままではブラウザやNode.jsで実行できないため、まず JavaScriptに変換する作業が必要になります。

この「TypeScript → JavaScript」への変換が、いわゆるビルドと呼ばれる処理です。ビルドを行う道具がtsc（TypeScript Compiler）で、 TypeScriptプロジェクトでは必ず登場する基本のコマンドです。プログラミング初心者がつまずきやすい部分でもあるため、まずはここをしっかり理解しておくとスムーズに学習が進みます。

実際にビルドすると、TypeScriptのコードがJavaScriptに変わって動かせる形になります。下記はごく簡単なサンプルです。


// sample.ts（TypeScriptファイル）
let text: string = "ビルドが成功すると表示されます";
console.log(text);

このファイルを配置してtscを実行すると、次のようなJavaScriptに変換されます。「TypeScript → JavaScript」という流れが理解できれば、ビルドのしくみが自然につかめるでしょう。


// sample.js（ビルド後のJavaScript）
var text = "ビルドが成功すると表示されます";
console.log(text);

このように、TypeScriptのビルドは「コードを動かせる形に整える準備作業」です。はじめは単純ですが、プロジェクトが大きくなるほど重要になる基礎知識なので、ここでしっかり押さえておきましょう。

2. 前提：Node.jsとTypeScriptをインストールしよう

TypeScript を使うには、まずNode.js（のーどじぇーえす）というソフトをパソコンに入れる必要があります。 Node.js は「JavaScript をパソコン上で動かすための土台」のようなもので、TypeScript のビルドや実行に欠かせない存在です。はじめてプログラミングを学ぶ人でも、セットアップの流れがわかれば迷わず準備できます。

インストール方法はとても簡単で、下記の公式サイトから「LTS（安定版）」と書かれたものを選んでダウンロードするだけです。インストーラーを開くと案内が表示されるので、画面の指示に従えば誰でも問題なくセットアップできます。

公式サイト（https://nodejs.org/ja）から LTS 版をダウンロード
案内どおりに進めればインストール完了

Node.js のインストールが済んだら、次は TypeScript を使えるように準備します。コマンドプロンプトまたはターミナルを開き、下記のコマンドを入力すると TypeScript がパソコン全体に追加されます。


npm install -g typescript

npm は Node.js に付属しているツールで、アプリに必要なパッケージを管理する役目を持っています。コマンドにある -g は「グローバル（全体）」という意味で、どのフォルダからでも tsc が使えるようになります。これで TypeScript の準備はほぼ完了です。

ちゃんとインストールされているか確認したい場合は、次のコマンドを試してみてください。


tsc -v

上のようにバージョンが表示されれば、設定は成功です。これで TypeScript をビルドするための環境が整い、次のステップへスムーズに進めます。

3. プロジェクトフォルダを作ろう

次に、TypeScriptのコードを書くための「プロジェクトフォルダ」を作成しましょう。これは、ファイルをまとめて管理するための箱のようなものです。

例えば、下記のようにして作ります。


mkdir ts-project
cd ts-project

mkdirは新しいフォルダを作るコマンド、cdはそのフォルダに入るコマンドです。

4. tsconfig.jsonを作成しよう

tsconfig.json（てぃーえすこんふぃぐじぇーそん）は、TypeScriptのビルド設定をまとめたファイルです。これがあると、どのファイルをビルドするか、どのように変換するかが自動でわかるようになります。

次のコマンドで作成できます。


tsc --init

これで、プロジェクトフォルダの中にtsconfig.jsonというファイルが作られます。初期設定のままで問題ありません。

5. TypeScriptファイルを書いてみよう

実際にTypeScriptのコードを書いてみましょう。下記のようにファイルを作成します。


touch index.ts

touchは新しいファイルを作るコマンドです（Windowsの場合はメモ帳などで直接index.tsを作成してもOKです）。

その中に、次のようなコードを書いてみましょう。


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

6. tscコマンドでビルドしてみよう

いよいよビルドの操作です。コマンドプロンプトやターミナルで、次のように入力します。

tsc

すると、index.tsというTypeScriptファイルが、index.jsというJavaScriptファイルに変換されます。

中身を見てみると、次のようになっています。


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

このindex.jsを、ブラウザやNode.jsで実行することで、プログラムが動きます。

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

TypeScriptをビルドするとき、エラーが出ることもあります。たとえば：


error TS1005: ';' expected.

これは、セミコロン（;）が抜けているという意味です。TypeScriptでは、文の終わりにセミコロンを付けるのが基本です。

また、型の指定ミスもよくあります。


let num: number = "文字列"; // エラーになります

numberは数字を意味する型なので、"文字列"を代入するとエラーになります。

8. 便利なオプション：watchモード

毎回tscを打つのは面倒ですよね。そんなときは「--watch」オプションが便利です。


tsc --watch

これを実行すると、ファイルを保存するたびに自動でビルドしてくれます。まるで秘書のように、あなたの代わりに働いてくれます。

まとめ

TypeScriptでプロジェクトを作成し、実際にtscでビルドして動かすまでの流れは、最初は少しだけ長く感じますが、一度慣れるととても滑らかに作業できるようになります。たいぷすくりぷとという言語は、ただのじゃばすくりぷとではなく、より厳密に型のチェックができ、アプリケーションの規模が大きくなってもミスを減らせるという利点があります。とくに初心者がつまずきやすい「変換しないと動かない」という部分をしっかり理解しておけば、のちのち困らない開発の基礎になります。ぱっと見は同じように見えても、たいぷすくりぷととじゃばすくりぷとは全く別の形式なので、わかりやすく手順を覚えておくことが大切です。今回の流れでは、まずのーどじぇーえすを用意し、npmでたいぷすくりぷとを導入しました。そのあとでプロジェクトの箱を作り、初期化の設定ファイルとなるtsconfig.jsonを用意しました。この設定があるおかげで、どのファイルを対象にするのか、どのように変換するかが明確になり、迷いなくビルドできるようになりました。設定ファイルは初心者の段階では触る必要がありませんが、慣れてきたら、出力先を変更したり、きびしい型チェックの設定を有効にしたり、より専門的な調整をすることができます。開発環境に合わせて細かい設定を管理できるのが、たいぷすくりぷとの強みです。そして、たいぷすくりぷとのファイルであるindex.tsに、型を指定したメッセージの変数を用意して、こんそーるろぐで出力しました。こういった小さなプログラムでも、型を指定して確実な動きを作ることができます。単純な例であっても、変数に適切な型をつけるという習慣が、エラーを未然に防ぐための練習として役立ちます。最初は「文字列」「数値」などの単純な型をつけるだけで十分です。規模が大きくなると、独自の型や複雑な型も扱うことになりますが、まずはシンプルなところから確実に理解していくことが重要です。また、tscを実行してjsファイルに変換されたことを確認し、出力されたコードを動かすことで、たいぷすくりぷとが正しく動いていることを体験できました。この変換が成功すると、じっさいにブラウザでものーどじぇーえすでも実行できるので、動作確認がしやすくなります。こうして、たいぷすくりぷとを学ぶ上で最初の大きなハードルをひとつ越えたことになります。もしエラーが出てしまったら、コンパイルが教えてくれるメッセージをしっかり読むことで、どこを直せば良いか判断できます。エラーは決して悪いことではなく、正しい方向へ導いてくれる案内板のような存在です。失敗しながら、少しずつ理解を深めていけば問題ありません。よくあるつまずきとして、セミコロンの付け忘れや、型の不一致があります。とくに初心者のうちは、じゃばすくりぷとの書き方とまぜてしまうことがありますが、たいぷすくりぷとはきびしい型チェックによって誤りを見つけてくれます。このきびしいチェックこそが、たいぷすくりぷとを使う最大のメリットです。将来、大規模なシステムを扱うときに、大人数での開発でも混乱が起きにくくなり、バグの発生も少なくなります。さらに便利な機能として、watchモードの存在がありました。これは、毎回手動でビルドを実行しなくても、ファイルを保存するだけで自動的に変換してくれるという、開発作業を非常にスムーズにしてくれる機能です。小さな修正を繰り返しながら動きを確認したいときに特に役立ち、細かい調整をしながらてきぱきと開発を進められます。秘書のように働いてくれるという例えは、使ってみると本当に実感できます。次の段階としては、複数のたいぷすくりぷとファイルを扱ったり、外部のライブラリやフレームワークを導入したり、さらに実用的なアプリケーションを作ることもできます。今回学んだ手順は、その大きな一歩の土台です。てきようできる場面はとても多く、Web開発、ゲーム、教育アプリケーションの作成など、幅広い分野でこの基礎が役に立ちます。たいぷすくりぷとを習得することで、単純なプログラムだけでなく、大規模な開発にも挑戦できる可能性が広がります。下記のように、シンプルなファイルを作って、保存するたびに自動的に変換される様子を見るのも、理解を深める良い練習になります。


let text: string = "はじめてのたいぷすくりぷとびるど";
console.log(text);

はじめて学ぶ分野でも、決して難しすぎる内容ではなく、順番に理解していけば自然と身につきます。まずは簡単なプログラムで問題ありませんので、少しずつ積み重ねていきましょう。プログラミングは積み上げることで力が身につき、何度も書いているうちに手が自然と動くようになります。自分で書いたコードが動き、画面に文字が表示されるだけでも、大きな達成感を得られます。このまとめにより、たいぷすくりぷとの学習がより身近に感じられ、実際に手を動かすきっかけにつながればうれしいです。「自分にもできる」という感覚を持ちながら、ぜひチャレンジしてください。

先生と生徒の振り返り会話

生徒

「たいぷすくりぷとは、すぐに動くわけじゃなくて、まず変換する必要があるっていうのがよくわかりました。びるどって聞くと難しい印象でしたけれど、意外と簡単なんですね。」

先生

「そうなんです。手順さえ覚えればとても簡単ですし、慣れるほど早く作業できるようになります。自動的に変換してくれるうぉっちもーども活用すると、もっと楽になりますよ。」

生徒

「型を付けると、まちがえに気づきやすいっていうところも助かりますね。文字列なのに数字の型にしてしまったり、間違って書いたまま動かして、あとで気づく失敗が少なくなるって感じました。」

先生

「その通りです。たいぷすくりぷとは、まちがえを早い段階で教えてくれるので、安心して開発できます。少しずつ慣れていけば、もっと使いこなせるようになりますよ。」

生徒

「ありがとうございます。これから小さなアプリを作りながら、もっと練習してみます！」