🔰TypeScript実用部品工房💫第004講 Node.jsとTypeScriptを導入して開発環境を整える
【プロローグ】
ユイ「先生、いよいよTypeScriptで料金計算アプリを作り始めるんですね！ まずはどこから手を付ければいいですか？」
先生「焦るな、ユイ。料理を作る前にキッチンを整えるように、まずはTypeScriptを書くための作業場を用意しよう。今日はNode.jsとTypeScriptの導入だ」
ユイ「Node.js？ TypeScriptを動かすのに別のものが必要なんですか？」
先生「TypeScriptはブラウザやパソコンが直接理解できる言葉ではないんだ。JavaScriptに変換（コンパイル）して初めて動く。その変換作業や、手元での実行を助けてくれるのがNode.jsだ」
ユイ「なるほど、TypeScriptの通訳と実行係みたいなものですね」
先生「そういうこと。今日は道具箱の中身を確認する日だ。順番に進めよう」
【今回作るもの】
今回はコードを書きません。TypeScriptでの開発に必要な環境を構築します。
・Node.jsのインストール確認
・npm（Node Package Manager）の確認
・TypeScriptのインストール
・バージョンの確認
これらが揃えば、次回からTypeScriptを書いて動かす準備が整います。
【Node.jsとは？】
TypeScriptはJavaScriptの拡張版ですが、ブラウザは直接TypeScriptを実行できません。TypeScriptをJavaScriptに変換し、それを手元のPCで実行するための環境がNode.jsです。
ユイ「ブラウザじゃなくて、ターミナルで実行するんですね」
先生「そうだ。今回は画面を持たないコンソールアプリを作るからね。Node.jsがあれば、VS Codeのターミナル上でJavaScriptを直接動かせるんだ」
【npmとは？】
Node.jsをインストールすると、npmというツールも一緒に入ってきます。これは「Node Package Manager」の略で、世界中の開発者が作った便利なプログラム（パッケージ）を簡単に自分のプロジェクトへ追加できるツールです。
先生「TypeScript自体も、このnpmを使ってインストールするパッケージの一つなんだよ」
ユイ「アプリストアみたいに、必要な道具をダウンロードできる仕組みですね」
【必要な知識と準備】
Node.jsのインストール
まだNode.jsが入っていない場合は、公式サイト（nodejs.org）からLTS（推奨版）をダウンロードしてインストールしてください。インストール時の設定はすべて初期状態（Nextを押すだけ）で構いません。
バージョンの確認
VS Codeを開き、上部のメニューから「ターミナル」→「新しいターミナル」を選択します。ターミナルに次のコマンドを入力してEnterキーを押します。
Bash
node -v
v20.x.x のようにバージョン番号が表示されれば、Node.jsは無事にインストールされています。続いて、npmのバージョンも確認します。
Bash
npm -v
10.x.x のような数字が表示されれば準備完了です。
【TypeScriptのインストール】
環境が整ったら、主役であるTypeScriptをインストールします。今回はパソコン全体で使えるようにする（グローバルインストール）のではなく、これから作るアプリのフォルダ内だけで使えるようにします。
先生「プロジェクトごとに使う道具を分けることで、他のアプリに影響を与えないようにするんだ」
ユイ「自分専用の道具箱を作るんですね」
プロジェクトフォルダの作成
まず、アプリを保存するフォルダを作ります。名前は calc-app としましょう。ターミナルで次のコマンドを実行してフォルダを作成し、その中へ移動します。
Bash
mkdir calc-app
cd calc-app
package.jsonの作成
次に、このフォルダをNode.jsのプロジェクトとして初期化します。
Bash
npm init -y
これでフォルダ内に package.json というファイルが作られます。これはプロジェクトの設計図のようなものです。
TypeScriptのインストール
いよいよTypeScriptをインストールします。次のコマンドを実行してください。
Bash
npm install typescript --save-dev
--save-dev は「開発中だけ使う道具ですよ」という意味です。
インストールが終わると、node_modules フォルダと package-lock.json が新しく作られます。
ユイ「なんだかファイルが一気に増えました！」
先生「node_modules にはTypeScript本体が入っている。このフォルダは重いから、中身を直接いじらないようにね」
【TypeScriptのバージョン確認】
最後に、TypeScriptが正しくインストールされたか確認しましょう。今回はプロジェクト内に入れたTypeScriptを使うため、コマンドの先頭に npx を付けます。
Bash
npx tsc -v
Version 5.x.x のように表示されれば、TypeScriptの準備は完璧です！
【演習】
今日の作業が正しく完了しているか、次のコマンドを順番にターミナルへ打ち込んで、結果を確認してください。
node -v
npm -v
npx tsc -v
すべてのコマンドでバージョン番号が表示されれば、環境構築は成功です。
【演習の解答】
ターミナルの出力例です。（バージョン番号は実行した時期によって異なります）
Bash
> node -v
v20.12.2
> npm -v
10.5.0
> npx tsc -v
Version 5.4.5
【解答を一つずつ読み解く】
node -v でNode.jsが動くことを確認しました。これでJavaScriptを手元で実行できます。
npm -v でパッケージ管理ツールが使えることを確認しました。これを使ってTypeScriptをインストールしましたね。
npx tsc -v でTypeScriptのコンパイラ（tsc）が使えることを確認しました。これで次回から、TypeScriptをJavaScriptに変換できます。
【次回予告】
次回、第005講では「srcとdistを分けてTypeScriptをコンパイルする」方法を学びます。自分が書くTypeScriptのファイル（src）と、変換されて出来上がるJavaScriptのファイル（dist）の置き場所を分け、コンパイルから実行までの流れを体験しましょう。
