TypeScriptで開発を始める際、「ツールやコマンドが多すぎてどれを使えばいいか分からない」と悩む方は多いでしょう。
この記事では、TypeScript開発に必要なツール群を「パッケージ管理」「コンパイル・実行」「コード品質管理」の3つの役割に分類し、さらによく見かける npm run serve の役割についても体系的に解説します。
1. パッケージマネージャー（ライブラリの管理）
プロジェクトの土台となるツールです。どれか1つを選んで使います。現在新しく始める場合は npm または高速な pnpm が主流です。
| ツール | 特徴 | 代表的なコマンド |
| npm | Node.jsに標準搭載されている最も基本的なツール。迷ったらこれを使用。 | npm init (初期化)npm install <パッケージ> (追加)npm run <スクリプト> (実行) |
| pnpm | npmより動作が高速で、ディスク容量の節約に優れた現代の主流。 | pnpm init, pnpm add, pnpm dev |
| yarn | 過去にnpmの遅さを解決するために普及したツール。 | yarn init, yarn add, yarn dev |
2. コンパイラ・実行環境（TypeScriptを動かす）
TypeScriptはそのままではブラウザやNode.jsで動かないため、JavaScriptに変換（コンパイル）するか、直接実行できるツールを通す必要があります。
| ツール | 役割 | よく使うコマンド |
| tsc | TypeScript公式コンパイラ。TSをJSに変換する。 | npx tsc --init (設定ファイル作成)npx tsc (JSへ変換) |
| tsx | TSファイルを変換せずに直接実行できるモダンなツール。開発中に便利。 | npx tsx index.ts |
| ts-node | tsxの古いバージョンにあたる定番ツール。最近はtsxへの移行が進む。 | npx ts-node index.ts |
| Vite | Reactなどのフロントエンド開発で使われる超高速ビルドツール。 | npm create vite@latest |
3. コード品質管理（Lint・フォーマッタ）
コードの構文チェックや、見た目を整えるツールです。
| ツール | 役割 | コマンド例 |
| ESLint | バグになりそうなコードやルール違反を検知する。 | npx eslint . |
| Prettier | インデントや改行などのコードフォーマットを自動で整える。 | npx prettier --write . |
4. 「npm run serve」の正体と役割
npm run serve は、npmにあらかじめ用意されている標準コマンドではなく、プロジェクトの package.json に独自に登録されたスクリプトを呼び出すためのコマンドです。
ブラウザで動作確認を行う環境を作る手順は以下の通りです。
サーバー用ツールのインストール:
開発用として serve を導入します。
npm install -D servepackage.jsonの編集:
scriptsの部分にビルドとサーバー起動のコマンドを登録します。
"scripts": {
"build": "tsc",
"serve": "serve -s ."
}実行と確認:
以下のコマンドを実行し、表示されるローカルURLにアクセスします。
npm run build
npm run serve5.最短環境構築の5ステップ
バックエンドやスクリプト実行用の最もシンプルなTypeScript環境を作る手順です。
1. プロジェクトの初期化
空のディレクトリを作成し、パッケージマネージャーを初期化します。
npm init -y2. TypeScriptパッケージのインストール
開発用の依存関係としてTypeScriptをインストールします。
npm install -D typescript3. 設定ファイル（tsconfig.json）の生成
TypeScriptのコンパイル設定ファイルを生成します。
npx tsc --init4. 実行用ツール（tsx）のインストール
開発中にファイルを直接実行できるように tsx を導入します。
npm install -D tsx5. コードを書いて実行する
index.ts を作成してコードを書き、以下のコマンドで実行結果を確認します。
npx tsx index.ts
コメント