はじめに
JavaScriptを学んでいると、TypeScriptという名前を目にする機会が増えてきます。
この記事では、TypeScriptをこれから始める方に向けて、基礎知識から開発環境の構築、そして最初のプログラムを実行するまでの流れを、学習のアウトプットを兼ねて分かりやすくまとめました。
実際に手を動かしながら進めてみてください！
この記事の対象読者
- HTML/CSSを学習済みで、JavaScriptの基礎（変数・関数など）をなんとなく理解している方
- TypeScriptをこれから勉強してみたい方
- TypeScriptの環境構築で何から手をつければいいか迷っている方
- TypeScriptの開発を始めたい方
前提条件・環境
- 前提スキル: HTML/CSS/JavaScriptの基礎知識、基本的なターミナル（コマンドプロンプト）の操作
- エディタ: Visual Studio Code（VS Code）
- TypeScript: v7.0.2
- Node.js: v24.19.0
目次
1. TypeScriptって何？
TypeScriptとは、JavaScriptに「型（Type）」の仕組みを加えて作られたプログラミング言語です。
TypeScriptは、JavaScriptと互換性があり、基本的にJavaScriptの書き方をベースにコードを記述できます。
さらに、型によるチェックなど、JavaScriptにはない機能が拡張されています。
このように、既存のプログラミング言語の互換性を保ちながら、機能を拡張した言語を「スーパーセット」と呼びます。
つまり、TypeScriptはJavaScriptのスーパーセットとなります。
「TypeScriptはJavaScriptを拡張した言語。」くらいの認識でOKです
1-1. TypeScriptとJavaScriptの違い
TypeScriptとJavaScriptの大きな違いとして、以下の2つがあります。
- コンパイルの必要性
- 静的な型チェックの仕組みがある
それぞれ詳しく説明していきます。
①コンパイルの必要性
JavaScriptは、ブラウザなどの実行環境でJavaScriptの.jsファイルのままで動きますが、
TypeScriptでは、.tsファイルのままではブラウザで動かないため、JavaScriptに変換してから実行する必要があります。
TypeScriptをJavaScriptへ変換する処理を、「トランスパイル」といいます。
ただし、TypeScript公式ドキュメントや開発現場では、この変換処理をプログラムを別の形式へ変換するという広い意味で『コンパイル』と呼ぶこともあります。
この記事では、分かりやすさを優先してコンパイルという表現を使用します。
具体的な方法については、後ほど解説します。
「コンパイル」と「トランスパイル」の違いについて
詳しく知りたい方は、こちらを参考にしてください。
【IT用語解説】トランスパイルとは？コンパイルとの違いを初心者向けに解説 | Biz.Online
②静的な型チェックの仕組みがある
JavaScriptとTypeScriptではデータ型の定義が異なります。
JavaScriptでは、変数を宣言するときに型を決める必要がありません。
▼JavaScriptの例
let message = "こんにちは";
この場合、messageには文字列が入っているため、実行時にはstringとして扱われます。
このように、実行時に値の型が決まる仕組みを「動的型付け」といいます。
一方、TypeScriptでは、変数や関数などに型を指定できます。
let message: string = "こんにちは";
このように、あらかじめデータ型を指定しチェックする仕組みを「静的型付け」と呼ばれます。
データ型を指定することで、プログラムを実行する前に型の間違いを発見しやすくなります。
1-2. TypeScriptを使うメリット
TypeScriptを使うと、以下のようなメリットがあります。
・バグを早期発見できる
型を指定することで、実行する前に問題を発見しやすくなります。
・コードの可読性が上がる
変数の型を明示することで、どのような値を扱うコードなのか把握しやすくなり、可読性が上がります。
・大規模な開発でも保守しやすい
型によって変数や関数がどのような値を扱うのか明確になるため、コードの規模が大きくなっても内容を把握しやすくなります。また、複数人で開発する場合にも、コードの意図を共有しやすくなります。
2. TypeScriptの環境構築
基本知識を学んだうえで、ここからはTypeScriptを使うための環境構築をしていきます。
2-1. Node.jsのインストール
Node.jsとは、JavaScriptを実行するための環境で、TypeScriptの開発ではTypeScriptコンパイラを実行したり、npmというパッケージを管理するツールを利用するために必要です。
npmとは、Node.jsに付属するパッケージ管理システムです。
Node.jsをインストールすると、npmも自動的にインストールされます。
すでにインストール済みの方は、
■Node.js / npmがインストールされているか確認するへ進んでください。
■Node.jsのインストール方法
Node.jsのダウンロードページへアクセスし、少し下へ進むと下記の表示があります。
自身のOSを選択し、インストーラーをダウンロードします。
ダウンロードしたインストーラーを起動し、
「Next」もしくは「install」をクリックして、次々と進めていけばOKです。
途中、利用規約への同意のみチェックを求められるので、
チェックして「Next」へ進んでください。
下記が表示されたらNode.jsのインストールは完了です。
「Finish」でインストーラーを閉じます。
■Node.js/npmがインストールされているか確認する
正しくインストールされたか確認します。
VS Codeを開き、画面上部の「ターミナル」タブ > 「新しいターミナル」を選択（もしくは Ctrl + Shift + ＠ で開く）
下記を入力し、Enterを押す。
node -v
インストールしたバージョンが表示されればOKです。
同様にNode.jsに含まれているパッケージ管理ツールのnpmが正常に使えるかも確認します。バージョンが表示されればOKです。
npm -v
2-2. プロジェクトフォルダを作成する
①プロジェクトフォルダを作成
PC内の任意の場所にプロジェクトフォルダを作成します。
名前は自由に決めてください。
悩む場合は、下記を参考にしてください。
-
Windowsの場合：
C:\Users\<ユーザー名>\Documents\typescript-sample
エクスプローラーから画面左側の「ドキュメント」を開き、「typescript-sample」という名前でフォルダを作成する -
macOSの場合：
/Users/<ユーザー名>/Documents/typescript-sample
Finderから画面左側の「書類」を開き、「typescript-sample」という名前でフォルダを作成する
②package.jsonファイルを作成
作成したプロジェクトフォルダ内にpackage.jsonファイルを作成します。
package.jsonファイルとは、プロジェクトで使用するパッケージやプロジェクトの情報が記録されます。パッケージを管理する上で必要なファイルになります。
VS Codeから、先ほど作成したプロジェクトフォルダを開きます。
続いて、ターミナルを開き、下記コマンドを実行します。
npm init -y
実行すると、新しくpackage.jsonファイルがフォルダ内に生成されます。
ターミナルの開き方は、■Node.js / npmがインストールされているか確認するを参照ください
③package.jsonを設定する
作成したpackage.jsonを開き、"type": "module"に変更します。
{
"name": "typescript-sample",
"version": "1.0.0",
"type": "module",
"devDependencies": {
"typescript": "^7.0.2"
}
}
"type": "module"は、Node.jsで.jsファイルをES Modulesとして扱うための設定です。
今回は、Node.jsとブラウザの両方でES Modulesを利用するため、この設定を使用します。
2-3. TypeScriptコンパイラのインストール
TypeScriptコンパイラとは、TypeScriptのコードをチェックし、JavaScriptとして出力するためのツールです。
プロジェクトフォルダ内にTypeScriptコンパイラをインストールします。
■TypeScriptコンパイラのインストール方法
プロジェクトフォルダ内で、ターミナルを開き下記コマンドを実行します。
npm install --save-dev typescript
--save-devは、このプロジェクトの開発環境でのみ使うパッケージとしてインストールするためのオプションです。
実行すると、package.jsonのdevDependencies（開発用のパッケージ記録）内にバージョン情報が自動記録されます。
package.jsonのdevDependenciesを見ると、下記のように記載されていることが確認できます。
▼ package.json
■インストールできたか確認する
インストールが完了したら、TypeScriptコンパイラが正しくインストールできたか確認します。
ターミナルに下記コマンドを入力し実行します。
npx tsc -v
バージョンが表示されれば、TypeScriptのインストールは完了です。
ちなみに、tscはTypeScript Compilerの略です。
package-lock.jsonについて
npm installを実行すると、プロジェクトフォルダ内にnode_modulesフォルダとpackage-lock.jsonファイルが自動作成されます。
※自動管理されるため、基本的に中身を編集する必要はありません
| 名称 | 説明 |
|---|---|
node_modules |
インストールしたTypeScriptなどのパッケージ本体が格納されるフォルダ |
package-lock.json |
インストールされたパッケージの正確なバージョンや依存関係をロック（固定）して記録するファイル |
2-4. tsconfig.jsonを作成する
tsconfig.jsonは、TypeScriptの設定ファイルで、
TypeScriptコンパイラ（tsc）の動きを制御するための設定を記述します。
- どのフォルダにあるTypeScriptを対象にするか
- 変換したJavaScriptをどこに出力するか
- エラーがある場合にJavaScriptを出力するか
などを設定できます。
■tsconfig.jsonファイルを作成する
ターミナルで下記コマンドを実行します。
npx tsc --init
実行すると、プロジェクトフォルダ内にtsconfig.jsonファイルが作成されます。
■tsconfig.jsonファイルの設定をする
作成されたtsconfig.jsonファイルを開きます。
設定項目がたくさんありますが、今回は以下の4つを設定します。
-
rootDir：TypeScriptファイルを格納するルートフォルダ -
outDir：TypeScriptから変換したJavaScriptファイルが出力されるフォルダ -
noEmitOnError：エラーがある場合、JavaScriptファイルを出力しない設定 -
module：TypeScriptの出力形式に関わるモジュールの仕様
①rootDirを設定する
TypeScriptファイルを格納するルートフォルダを指定します。
今回は、srcフォルダを作成し、その中にTypeScriptファイルを格納していくので、"./src"を指定してください。
コメントアウトされている場合はコメントを外すだけでOKです。
{
"compilerOptions": {
// ～ 略 ～
"rootDir": "./src",
// ～ 略 ～
}
}
②outDirを設定する
TypeScriptから変換したJavaScriptファイルが出力されるフォルダを指定します。
今回は、distフォルダを指定します。
コメントアウトされている場合はコメントを外すだけでOKです。
{
"compilerOptions": {
// ～ 略 ～
"outDir": "./dist",
// ～ 略 ～
}
}
distフォルダの作成は不要です。
後ほどファイルを出力する際に、outDirの設定に従って自動で作成されます。
③noEmitOnErrorを設定する
noEmitOnErrorは、trueにすることで、TypeScriptのコンパイル時にエラーが発生した場合、JavaScriptファイルを出力しないように設定することができます。
任意の場所に追記します。
{
"compilerOptions": {
// ～ 略 ～
"noEmitOnError": true,
// ～ 略 ～
}
}
④moduleを確認する
moduleは、JavaScriptのモジュール方式に関する設定です。
今回は、Node.jsのモジュール方式に対応したnodenextを初期設定のまま使用します。
もし、バージョンの違い等で"module": "nodenext"になっていない場合は
下記のとおり変更してください。
{
"compilerOptions": {
// ～ 略 ～
"module": "nodenext",
// ～ 略 ～
}
}
以上でtsconfig.jsonの設定は完了です。
また、現在想定しているディレクトリ構成は下記のとおりです。
typescript-basic/
├── dist/ ※ファイル変換される際に自動で作成される
│ └── 出力後のJavaScriptファイルが出力される
├── src/
│ └── 作成予定のTypeScriptファイルを格納する
├── node_modules/
├── package-lock.json
├── package.json
└── tsconfig.json
3. ファイルの作成から実行までの流れ
環境構築ができたので、ここからは実際にコードを書いて動かしてみます。
ファイルの作成から実行までの流れは、下記のとおりです。
（1）TypeScriptを書く
↓
（2）JavaScriptに変換する
↓
（3）Node.jsで実行する
↓
（4）ブラウザの検証ツールでも確認する
3-1. ファイルの作成
srcフォルダ内にindex.tsを作成します。
TypeScriptの拡張子について
TypeScriptのファイルには、主に.tsと.tsxという2種類の拡張子があります。
| 拡張子 | 説明 |
|---|---|
| .ts | 通常のTypeScriptファイル |
| .tsx | JSXを使用できるTypeScriptファイル |
JSXとは、JavaScript XMLの略でJavaScriptの中にHTMLに似たタグを記述できる構文で、Reactなどのライブラリ・フレームワークでよく使用されます。
今回はJSXを使用しないため、.tsファイルを使用します。
index.tsに、以下のコードを記述してみましょう。
ぜひ、〇〇を自分の名前に変えて入力してみてください。
const message: string = "〇〇さん!ようこそ、TypeScriptの世界へ!!";
console.log(message);
const message: stringについて
messageという変数にstring型(文字列)の値を入れることを明示しています。
ここでの詳細は割愛しますが、このようにTypeScriptでは変数に型を指定できます。
3-2. コンパイル（変換）と実行
TypeScriptをJavaScriptに変換していきます。
①TypeScriptをJavaScriptに変換する
ターミナルで下記コマンドを実行します。
npx tsc
エラーがなければ、distフォルダが自動で作成され、その中にindex.jsが生成されます。
これで、
TypeScript → JavaScriptへの変換ができました。
②JavaScriptをNode.jsで実行する
次に、生成されたJavaScriptをNode.jsで実行して、ターミナル上で動作確認します。
ターミナルで下記コマンドを実行します。
node dist/index.js
すると、以下のように表示されます。
TypeScriptから変換されたJavaScriptをNode.js上で実行することができました。
③ブラウザの検証ツールで確認する
最後に、ブラウザでもTypeScriptから変換されたJavaScriptが実行されることを確認しましょう。
まず、HTMLファイルからindex.jsを読み込みます。
プロジェクト内にindex.htmlを作成し、以下のように記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="data:,">
<title>TypeScriptの検証</title>
</head>
<body>
<h1>TypeScriptの検証</h1>
<script type="module" src="./dist/index.js"></script>
</body>
</html>
HTML側では、<script type="module" ・・・ >を指定することで、ブラウザでJavaScriptをES Modulesとして読み込めます。
次に、index.htmlをLive Serverなどのローカルサーバーを利用してブラウザで開き、検証ツール（デベロッパーツール）の「Console」タブを開きます。
すると、
「〇〇さん!ようこそ、TypeScriptの世界へ!!」が
表示されていることを確認できます。
ブラウザでの開き方が分からない方は
4.おすすめのVS-Code拡張機能 - Live Serverを参照ください。
-
解説
index.tsでは、以下のコードを記述していました。
const message: string = "〇〇さん!ようこそ、TypeScriptの世界へ!!";
console.log(message);
console.log(message);でメッセージを表示する処理を行っているため、コンソール上でも表示が確認できたということになります。
3-3. 最終的なディレクトリ構成
これまでの作業を振り返ると、プロジェクトは以下のような構成になります。
typescript-sample/
├── dist/ ・・・変換後のJavaScriptが出力される
│ └── index.js
├── node_modules/
├── src/ ・・・TypeScriptのソースコードを格納
│ └── index.ts
├── index.html
├── package-lock.json ・・・パッケージの正確なバージョンなどを記録する
├── package.json ・・・パッケージの情報を管理する
└── tsconfig.json ・・・TypeScriptコンパイラの設定を記述する
4. おすすめのVS Code拡張機能の紹介
TypeScriptをVS Codeで開発する際におすすめの拡張機能を紹介します。
- JavaScript (ES6) code snippets
識別ID xabikos.javascriptsnippets
JavaScriptやTypeScriptでよく使うコードのスニペット（定型文）を、短い入力で呼び出せるようにする拡張機能です。
コードを一から入力する手間を減らせるため、ミスが減り効率よくコードを書くことができます。
- Code Spell Checker
識別ID streetsidesoftware.code-spell-checker
コード内のスペルミスをチェックしてくれる拡張機能です。
変数名などの英単語のスペルミスを発見するのに役立ちます。
- Prettier - Code formatter
識別ID esbenp.prettier-vscode
インデントや改行などのフォーマットを自動で整形してくれる拡張機能です。
コードをきれいに保ちやすくなります。
TypeScriptだけでなく、JavaScriptやJSON、HTML、CSSなどにも利用できます。
コードを整形するときは、コード上で下記のショートカットで実行できます。
- Windows：
Shift + Alt + F - macOS：
Shift + Option + F
- indent-rainbow
識別ID oderwat.indent-rainbow
インデントの深さを視覚的に分かりやすく表示してくれる拡張機能です。
コードの階層構造を把握しやすくなります。
- Live Server
識別ID ritwickdey.liveserver
今回は動作確認を簡単に行えるLive Serverの利用をおすすめします。
お好きな方法で確認を行ってください。
Live Serverは、HTMLファイルをローカル上のサーバーで表示するための拡張機能です。
HTMLやJavaScriptの動作確認をするときに便利です。
VS Codeの画面右下に表示される「Go Live」をクリックするとブラウザが起動し、
ローカルサーバー上でHTMLが表示されます。
まとめ
今回は、TypeScriptを始めるための環境構築から、実際にコードを書いて実行するまでの一連の流れを解説しました。「書いて、変換して、動かす」という流れが、TypeScript開発の基本になります。
また、今回登場した用語とコマンドを振り返りとしてまとめました。
■今回学んだ専門用語
| 用語 | 概要 |
|---|---|
| スーパーセット | 既存の言語との互換性を保ちながら、機能を拡張した言語 |
| トランスパイル | あるプログラミング言語のコードを、別の形式のコードへ変換すること |
| npm | Node.jsで利用するパッケージ管理システム |
| tsc | TypeScript Compilerの略。TypeScriptをJavaScriptへ変換するためのコンパイラ |
| package.json | プロジェクトで使用するパッケージやプロジェクトの情報を管理するファイル |
| tsconfig.json | TypeScriptコンパイラの設定を記述するファイル |
■使用したコマンド一覧
| コマンド | 概要 |
|---|---|
node -v |
Node.jsのバージョンを確認する |
npm -v |
npmのバージョンを確認する |
npx tsc -v |
TypeScriptコンパイラのバージョンを確認する |
npm init -y |
package.jsonを作成する |
npm install --save-dev typescript |
TypeScriptを開発用パッケージとしてインストールする |
npx tsc --init |
tsconfig.jsonを作成する |
npx tsc |
TypeScriptをJavaScriptへ変換する |
node dist/index.js |
変換したJavaScriptをNode.jsで実行する |
次回は、TypeScriptの最大の特徴である「型」について、より詳しく解説していきたいと思います。
この記事が少しでもお役に立ちましたら、ぜひ「いいね！」をお願いします！
また株式会社NEXT TECHNOLOGYでは、エンジニアが様々な技術発信をしていますので、ぜひチェックしてみてください！