カテゴリ: TypeScript 更新日: 2025/12/12

TypeScriptとJavaScriptのビルド・実行環境の違いを完全解説!tscとnodeの基礎

TypeScriptとJavaScriptのビルド・実行環境の違い(tsc・nodeなど)
TypeScriptとJavaScriptのビルド・実行環境の違い(tsc・nodeなど)

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

生徒

「TypeScriptとJavaScriptって、実行するやり方は同じなんですか?」

先生

「TypeScriptはそのままでは実行できないので、実行できる形に変換する必要があります。」

生徒

「どうやって変換するんですか?難しそうです。」

先生

「変換にはtscというツールを使います。順番に説明していくので心配しないで大丈夫ですよ。」

1. TypeScriptとJavaScriptの違いは実行方法にもある

1. TypeScriptとJavaScriptの違いは実行方法にもある
1. TypeScriptとJavaScriptの違いは実行方法にもある

TypeScriptとJavaScriptの違いを理解するためには、最初にプログラムがどのように実行されるかを知ることが大切です。パソコンで動くプログラムは、そのままでは理解できない言葉を、人間が分かりやすい言葉のように、コンピュータが理解できる形へと変換する必要があります。この変換作業をコンパイルと呼びます。

JavaScriptは変換しなくてもブラウザやNode.jsでそのまま動きます。つまり、作ったファイルをそのまま実行できるという特徴があります。そのため、初心者にとって取り組みやすい言語として知られています。

それに対して、TypeScriptは変換しないと実行できません。TypeScriptで作ったプログラムは、まずJavaScriptの形に変換した後で実行する必要があります。この変換作業に使うツールがtscです。

2. TypeScriptは直接実行できない理由とは?

2. TypeScriptは直接実行できない理由とは?
2. TypeScriptは直接実行できない理由とは?

TypeScriptは、型の指定など便利な仕組みが数多く用意されています。例えば、「変数には数字しか入れない」「この関数の戻り値は必ず文字列」など、プログラムの安全性を高める仕組みがあります。しかし、ブラウザやNode.jsはこれらの型情報を理解できないため、JavaScriptに変換してから実行する必要があります。

つまり、TypeScriptで書いたコードは、まずtscでJavaScriptに変換され、そのJavaScriptをNode.jsやブラウザが実行するという流れになります。

3. tscを使ったTypeScriptファイルの変換方法

3. tscを使ったTypeScriptファイルの変換方法
3. tscを使ったTypeScriptファイルの変換方法

tscとは、TypeScript Compiler(コンパイラ)の略で、TypeScriptのファイルをJavaScriptに変換するための公式ツールです。次の例は、簡単なTypeScriptのプログラムです。


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

このコードは、次のコマンドでJavaScriptに変換します。


tsc sample.ts

このコマンドを実行すると、同じフォルダにsample.jsというJavaScriptファイルが作成されます。

4. Node.jsを使ったJavaScriptの実行

4. Node.jsを使ったJavaScriptの実行
4. Node.jsを使ったJavaScriptの実行

変換されたsample.jsは、Node.jsという実行環境を使って動かすことができます。Node.jsとは、ブラウザを使わずにパソコンでJavaScriptを実行するためのソフトです。次のコマンドで実行できます。


node sample.js

実行結果は次のようになります。


こんにちは TypeScript

5. TypeScriptとJavaScriptの実行の流れを図で理解しよう

5. TypeScriptとJavaScriptの実行の流れを図で理解しよう
5. TypeScriptとJavaScriptの実行の流れを図で理解しよう

TypeScriptとJavaScriptでは、プログラムが動くまでの流れに違いがあります。以下のように整理できます。


TypeScript (.ts)
    ↓  tsc(コンパイル)
JavaScript (.js)
    ↓  node または ブラウザで実行

つまり、TypeScriptは変換が必要な言語、JavaScriptはそのまま実行できる言語だと覚えておくと理解しやすいです。

6. なぜTypeScriptは変換が必要なのに人気なのか?

6. なぜTypeScriptは変換が必要なのに人気なのか?
6. なぜTypeScriptは変換が必要なのに人気なのか?

TypeScriptは、JavaScriptよりも多くの追加機能を持ち、大規模な開発でも安心してプログラムが書けるという大きな強みがあります。また、先にtscでチェックすることで、実行する前に間違いを見つけられるため、エラーが発生しにくくなり、トラブルも少なくなります。

そのため、企業の開発でも広く使われている言語であり、学習しておくと将来の仕事にもとても役に立ちます。

7. 初心者が覚えるべきポイント

7. 初心者が覚えるべきポイント
7. 初心者が覚えるべきポイント

TypeScriptは変換してから実行するtscが変換を担当するnodeが実行を担当する、この三つを覚えておけば大丈夫です。最初は新しい言葉が多く感じますが、慣れてくると自然に理解できるようになります。

カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.7
Java&Spring記事人気No7
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう