【TypeScript】開発環境の基本｜npm・tsc・tsx・ESLintの役割と、npm run の仕組み、最小の環境を作る手順

TypeScriptで開発を始めると、npm、npx、tsc、tsx、ESLint と、いろいろなツールやコマンドの名前が出てきます。組み込みのC言語なら、コンパイラと make があれば始められますが、TypeScriptでは役割ごとにツールが分かれているので、最初はどれが何をしているのか分かりにくいところです。

この記事では、ツールを「パッケージ管理」「変換と実行」「コードの品質」の3つに分けて整理し、npm run serve のようなコマンドの仕組みと、最小の環境を作って動かすまでの手順をまとめます。私は、自宅サーバーで TypeScript と Express のAPIを動かしたときに、npm、tsx、tsc の組み合わせを使いました。

ツールの全体像

パッケージ管理：npm

npmは、Node.jsを入れると一緒に入るパッケージ管理ツールです。プロジェクトで使うライブラリ（パッケージ）を入れたり、package.json に書いたコマンドを実行したりします。

npmのほかに、pnpm や yarn というパッケージ管理ツールもあります。できることはほぼ同じで、コマンドの書き方が少し違います（pnpm add、yarn add など）。初めてなら、Node.jsに最初から入っている npm で十分です。ただし、既存のプロジェクトでは、使われているものに合わせます（pnpm-lock.yaml があれば pnpm、yarn.lock があれば yarn）。

変換と実行：tsc・tsx・Node.js・Vite

TypeScriptのコードは、そのままではブラウザでは動きません。JavaScriptに変換するか、変換しながら実行するツールを使います。

大事なのは、tsx や Node.js の直接実行は、型のチェックをしないことです。型の書き方を取り除いて実行するだけなので、型が間違っていてもそのまま動いてしまいます。型の間違いは、tsc --noEmit（チェックだけして、ファイルは作らない）で確かめます。

Node.jsの直接実行は、enum のように型を取り除くだけでは動かない書き方には対応していません。また、2026年7月に公開された TypeScript 7.0 では、tsc 自体がGo言語で作り直されて速くなっています。使い方は変わらず npx tsc です。バージョンごとの変更点の調べ方は「公式サイト typescriptlang.org の使い方」で紹介しています。

コードの品質：ESLint・Prettier

どちらも、先に npm install -D で入れ、設定ファイルを用意してから使います。ESLintは、npm init @eslint/config@latest を実行すると、質問に答えていくだけで設定ファイルを作れます。VS Codeにそれぞれの拡張機能を入れると、保存したときに自動でチェックや整形をしてくれます。Prettierでクォートをそろえる設定は、「文字列の ‘ と ” と ` の違い」でも紹介しています。

npm run serve の正体：package.json の scripts

npm run serve や npm run dev は、npmに最初からあるコマンドではありません。package.json の scripts に登録されたコマンドを、名前で呼び出しているだけです。C言語の Makefile で make build と書くのに似ています。

{
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "check": "tsc --noEmit",
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

{
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "check": "tsc --noEmit",
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

こう書いておくと、次のように使えます。

名前は自由なので、serve という名前で何が動くかはプロジェクトごとに違います。他の人のプロジェクトで npm run serve を見かけたら、まず package.json の scripts を開いて、中身を確かめるのが確実です。npm run とだけ入力すると、登録されているスクリプトの一覧も表示されます。

ブラウザで動く画面を作る場合は、npm create vite@latest でViteのプロジェクトを作ると、開発サーバーを起動する npm run dev などが最初から登録されています。ブラウザだけで簡単に試したいときは、「CodePen」のようなオンラインエディタも使えます。

最小の環境を作って動かす

Node.jsを入れたパソコンで、TypeScriptを書いて実行するまでの手順です。

1. プロジェクトを作る

mkdir ts-practice
cd ts-practice
npm init -y

mkdir ts-practice
cd ts-practice
npm init -y

2. TypeScript と tsx を入れる

npm install -D typescript tsx

npm install -D typescript tsx

3. 設定ファイル（tsconfig.json）を作る

npx tsc --init

npx tsc --init

作られた tsconfig.json の compilerOptions に、ソースの置き場所と出力先を書き足します。すでに同じ項目がある場合は、その値を書き換えます。

"rootDir": "src",
"outDir": "dist",

"rootDir": "src",
"outDir": "dist",

各項目の意味は、公式サイトのTSConfigリファレンスで調べられます。

4. コードを書く

src フォルダを作り、src/index.ts に次のコードを書きます。

const add = (a: number, b: number): number => a + b;

console.log(add(2, 3));

const add = (a: number, b: number): number => a + b;

console.log(add(2, 3));

5. 実行する

npx tsx src/index.ts   # 5 と表示されればOK

npx tsx src/index.ts   # 5 と表示されればOK

6. 型チェックの違いを試す

src/index.ts の add(2, 3) を add("2", 3) に変えて、両方のコマンドを実行してみます。

npx tsx src/index.ts   # 23 と表示される（型チェックしないので、そのまま動いてしまう）
npx tsc --noEmit       # エラー："2" は number 型の引数に渡せない

npx tsx src/index.ts   # 23 と表示される（型チェックしないので、そのまま動いてしまう）
npx tsc --noEmit       # エラー："2" は number 型の引数に渡せない

tsxは文字列の "2" と数値の 3 をそのままつなげて「23」と表示しますが、tscは型の間違いとしてエラーを出します。開発中は tsx で動かし、ときどき tsc --noEmit で型を確かめる、という使い分けになります。さきほどの scripts を package.json に書いておけば、npm run dev と npm run check で同じことができます。

まとめ

• npmはパッケージ管理。-D は開発のときだけ使うパッケージ、npx は入れたツールの実行
• tscは型チェックと変換。tsx と Node.js の直接実行は、型チェックをしない
• ESLint は問題のある書き方を見つけ、Prettier は見た目をそろえる
• npm run 名前 は package.json の scripts を実行するだけ。中身は package.json で確かめる
• 開発中は tsx、型の確認は tsc --noEmit、公開するときは tsc で変換

TypeScriptハンズオン

Amazon

楽天市場

Yahooショッピング

ポチップ

プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで (Software Design plus)

Amazon

楽天市場

Yahooショッピング

ポチップ

TypeScriptコードレシピ集

Amazon

楽天市場

Yahooショッピング

ポチップ