今回は、TypeScriptを実行ができる環境構築とVSCodeで実行する方法について説明していきます。※Macで環境構築する場合の説明になっていますが、流れは変わらないのでWindowsで環境構築したい方も参考にしてみてください
環境構築・VSCodeで実行してみよう！
TypeScript開発に必要なものは4つあります。
① Node.js
JavaScriptを実行するための環境。
TypeScriptをコンパイルするためにも必要です。
② npm
パッケージ管理ツール。
Node.jsをインストールすると一緒に使えるようになります。
③ TypeScript
TypeScriptをJavaScriptに変換（コンパイル）するためのツール。
npmでインストールします。
④ VSCode（Visual Studio Code）
コードを書くためのエディタ。
TypeScriptとの相性が良く、補完機能も強力です。
※エディタは何でもOKですが、TypeScriptとの相性が良いVSCodeを使うのが一般的です
では、環境構築をやっていきましょう！
環境構築
Node.jsのインストール
Node.jsをインストールするには、Node.js公式サイトにアクセスします。
インストール方法は2通り。
①「macOSインストーラー(.pkg)」をクリックしダウンロード後、ファイルをダブルクリックしてインストールします。
インストール後は、ターミナルでインストールできているかコマンドを実行します。
node -v
npm -v
②ターミナルを開き、コマンドを実行します。
# nvmをダウンロードしてインストールする：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash
# シェルを再起動する代わりに実行する
\. "$HOME/.nvm/nvm.sh"
# Node.jsをダウンロードしてインストールする：
nvm install 24
# Node.jsのバージョンを確認する：
node -v # "v24.14.0"が表示される。
# npmのバージョンを確認する：
npm -v # "11.9.0"が表示される。
これでNode.jsのインストールが完了しました。npmもNode.jsに含まれています。
VScodeのインストール
VSCode公式サイトにアクセスし、「Download for macOS」をクリックしダウンロード後、ファイルをダブルクリックしてインストールします。
インストールしたVSCodeを開いてみると…
こんな感じです！VSCodeでおすすめの拡張機能があるのでこちらもサクッと入れてみてください。
おすすめ拡張機能
- ESLint（コードの品質チェック）
エラーや問題点を教えてくれる。 - Prettier（コードの自動整形）
コードを見やすく保つ。
VSCodeでTypeScriptを実行する
え？まだTypeScriptインストールしてないけど大丈夫？
大丈夫です。なぜかというと、これから作業フォルダを作成してからTypeScriptをインストールしていきます！
作業フォルダの作成とTypeScriptのインストール
まずは、VSCodeを開いてターミナルを開きます。
Ctrl + ` で開くか、ターミナルから新しいターミナルをクリックします。
ターミナルを開いたら任意の場所に移動し、作業フォルダを作ってから「プロジェクトの作成」「TypeScriptのインストール」「TypeScript設定ファイルの作成」を行います。
#⓪作業フォルダを作成後、作業フォルダに移動
cd Desktop
mkdir TypeScript
cd TypeScript
#①プロジェクトの作成
npm init -y
#②TypeScriptをインストール
npm install -D typescript
#③TypeScript設定ファイルの作成
npx tsc --initそれぞれやっていることを説明すると…
⓪作業フォルダの作成および移動
デスクトップに移動→フォルダの作成(任意)→作成したフォルダに移動
cd Desktop
mkdir TypeScript
cd TypeScript① プロジェクトの作成
package.jsonを作成
Node.jsプロジェクトの土台を作る
npm init -y② TypeScriptのインストール
TypeScriptをインストール
node_modulesに追加される
npm install -D typescript③ TypeScript設定ファイルの作成
tsconfig.jsonを生成
コンパイル設定を管理
npx tsc --initこれでTypeScriptが実行できる環境が整いました。
| フォルダ・ファイル名 | 役割 |
|---|---|
| node_modules | ライブラリ置き場 |
| package.json | プロジェクトの設定 |
| package-lock.json | バージョン固定 |
| tsconfig.json | TypeScriptのルール |
次は、このフォルダに簡単なプログラムを入れてTypeScriptを実行してみましょう！
TypeScriptを実行してみよう！
VSCodeで新しいファイルを作成し、作業フォルダに入れてTypeScriptを実行してみます。
実行するのは以下のプログラム。
const message: string = "Hello, TypeScript!";
console.log(message);
// 日付を取得
const now = new Date();
const year = now.getFullYear();
// 0〜始まるため +1 する
const month = now.getMonth() + 1;
const day = now.getDate();
// 2桁にする（01, 02 など）
const formattedMonth = ("0" + month).slice(-2);
const formattedDay = ("0" + day).slice(-2);
console.log(`今日は${year}/${formattedMonth}/${formattedDay}です`);hello.tsとして作業フォルダに保存してください！
VSCodeのターミナルで以下のコマンドを実行してみてください。
※作業フォルダを作ったところが違う場合、作業フォルダがある場所まで移動して①②を実行してください
#⓪作業フォルダに移動し、ファイルがあるか確認
cd ~ Desktop/TypeScript
ls
#①TypeScriptをコンパイル
npx tsc hello.ts
#②TypeScriptを実行
node hello.js
メッセージが出てたら成功です！
ポイント
①のコンパイルでエラーが出なかった場合は、hello.jsができています
TypeScriptは直接動かせないので.jsに変換してから実行
今回は、コンパイルし実行しましたがパッケージを入れることで直接実行することができます。
npx ts-node hello.ts
作業フォルダを確認すると.jsができていないことがわかります。
まとめ
いかがでしたか？環境構築からTypeScriptをVSCodeで実行してみました！ぜひ、今からTypeScriptを学習しようと思っている方はこの記事を参考に環境構築からTypeScriptを実際に動かしてみてください。
