TypeScriptのプロジェクトをtscでビルドする基本操作を解説！初心者にもわかるステップバイステップ

1. TypeScriptのビルドとは？

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をインストールしよう

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. プロジェクトフォルダを作ろう

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

Node.js と TypeScript の準備ができたら、次は作業場所となる「プロジェクトフォルダ」を作成します。 プロジェクトフォルダは、これから作る TypeScript ファイルや設定ファイルをまとめて置くための“作業机”のような役割を持っています。 あらかじめフォルダを作っておくことで、後のビルド作業やファイル管理がとてもスムーズになります。

まずは、パソコンのターミナルやコマンドプロンプトを開き、下記のコマンドを入力してフォルダを作成しましょう。 名前は自由ですが、ここではわかりやすく ts-project としています。

mkdir ts-project
cd ts-project

mkdir は新しいフォルダを作るコマンドで、cd はそのフォルダに移動するコマンドです。 まだ TypeScript のコードを書いていなくても、この段階で“自分だけの作業場所”が準備できたことになります。 ここから先は、すべてこのフォルダの中で作業していく形になります。

フォルダが正しく作られたか不安な場合は、次のコマンドを実行して確認してみましょう。

ls   // Windows の場合は dir

何も表示されていなければ成功です。これから必要なファイルを追加していく“まっさらな状態”になっている証拠です。 フォルダを整えておくと、ビルド作業やファイル管理が理解しやすくなるので、初心者ほど丁寧に進めておくことが大切です。

4. tsconfig.jsonを作成しよう

4. tsconfig.jsonを作成しよう

TypeScript のプロジェクトを本格的に扱ううえで欠かせないのが、設定ファイルである tsconfig.json です。これは「どのファイルをビルド対象にするか」「どんなルールで JavaScript に変換するか」といった重要な情報をまとめておく“設計図”のような役割を持っています。 プロジェクトが大きくなるほど、この設定があることで作業が楽になり、ビルドのミスも防ぎやすくなります。

作成方法はとても簡単で、プロジェクトフォルダの中で次のコマンドを実行するだけです。 初めて触る人でも、この一行を実行するだけで必要な設定ファイルが自動生成されます。

tsc --init

このコマンドを実行すると、フォルダ内に tsconfig.json が作成されます。 ファイルを開くと、多くの設定項目がコメント付きで並んでいますが、最初のうちはすべて覚える必要はありません。 デフォルト設定のままでも問題なくビルドできるため、まずは「設定ファイルができた」という点だけ理解しておけば十分です。

tsconfig.json が存在すると、次回以降は tsc を入力するだけでフォルダ内の TypeScript をまとめてビルドしてくれます。 いわばプロジェクト全体のルールを共有してくれる“司令塔”のようなものです。 設定ファイルを用意することで、複数ファイルを扱う開発もスムーズに進められるようになります。

以下は、ごく簡単な設定サンプルです。初心者が触っても危険のない最低限の内容で、 「こんな形のファイルなんだ」とイメージをつかむのにちょうど良いでしょう。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  }
}

このように、tsconfig.json は TypeScript プロジェクトの“動かし方”を決める中心的な存在です。 初めて扱うと難しそうに見えますが、基本的な使い方さえ覚えておけば、後から設定を追加していくことも簡単にできます。

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

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

ここまで準備が整ったら、いよいよ実際に TypeScript のコードを書いてみましょう。 まずは、新しいファイルを作成するところから始めます。ファイルは“ノート”のようなもので、 ここにプログラムを書き込んでいきます。今回は練習用として、もっとも基本的な index.ts を作成してみましょう。

touch index.ts

touch は新しいファイルを作るためのコマンドです。Mac や Linux ではそのまま使えますが、 Windows の場合はメモ帳などで空の index.ts を作るだけでも同じ結果になります。 ファイル名は自由に変更できますが、ここでは後のステップで扱いやすいため index.ts を使用しています。

ファイルが作成できたら、エディタで開いて次のようなコードを書いてみましょう。 これは TypeScript の基本である「型」を使い、画面にメッセージを表示するだけのシンプルなプログラムです。 初めてのコードとしてちょうどよく、ビルド結果が目に見えてわかるため安心して学習できます。

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

ここでのポイントは、message という変数に string という型を指定していることです。 TypeScript では、このように型を明示することで、まちがった値を入れてしまうのを防いでくれます。 実際にビルドすると、この TypeScript のコードは JavaScript に変換され、ブラウザや Node.js で実行できる形になります。 自分の書いたコードがどのように動くか確かめるための第一歩として、まずはこの簡単なプログラムから始めてみましょう。

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

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

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

tsc

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

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

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

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

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

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

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

error TS1005: ';' expected.

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

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

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

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

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

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

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

tsc --watch

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

まとめ

まとめ

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

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

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

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

TypeScriptのコードはなぜそのままでは動かないのですか？

TypeScriptはJavaScriptに型チェック機能を加えた言語で、ブラウザでは直接実行できません。必ずJavaScriptに変換（ビルド）してから実行する必要があります。

TypeScriptをJavaScriptに変換するにはどうしたらいいですか？

TypeScriptのコードは、tsc（TypeScript Compiler）コマンドを使ってJavaScriptに変換します。これを「ビルド」と呼びます。

TypeScriptを使うために必要なツールは何ですか？

TypeScriptを使うには、まずNode.jsをインストールし、その後npmコマンドでTypeScriptをグローバルにインストールする必要があります。