npmとnpxは「似てるけど役割が違う道具」
npmとnpxは、どちらもNode.jsをインストールすると一緒についてくるコマンドです。名前が似ているのでややこしいですが、役割はけっこう違います。
ざっくり言うと、npmは「パッケージを管理する道具」、npxは「パッケージのコマンドをその場で実行する道具」です。
TypeScriptの学習や開発では、どちらもよく登場しますが、「何をするときにどっちを使うのか」が分かると、一気にスッキリします。
npmの役割：パッケージを「入れる・管理する」担当
npmは「ライブラリをインストールする人」
npmは「Node Package Manager」の略で、その名の通り「パッケージ（ライブラリやツール）を管理するためのコマンド」です。
TypeScript自体も、npmを使ってインストールします。
npm install --save-dev typescript
このコマンドは、「このプロジェクトにTypeScriptというパッケージを開発用としてインストールしてね」という意味です。
インストールされたパッケージは、通常 node_modules フォルダの中に保存され、package.json に「このプロジェクトはTypeScriptを使っていますよ」と記録されます。
ここで大事なのは、npmは「パッケージを入れる・更新する・消す」ことが仕事であって、「そのパッケージのコマンドを実行する」のは本職ではない、という点です。
TypeScriptの例で見るnpmの役割
たとえば、プロジェクトにTypeScriptを導入するとき、よく次のような流れを取ります。
npm install --save-dev typescript
npx tsc --init
このうち、最初の npm install が「TypeScriptをプロジェクトに入れる」役割です。
この時点では、まだTypeScriptコンパイラ（tsc）を「実行」してはいません。あくまで「道具箱にTypeScriptという工具を入れた」状態です。
npxの役割：パッケージのコマンドを「その場で実行」する担当
npxは「インストール済みの道具を使う人」＋「一時的に借りてくる人」
npxは、「npmでインストールしたパッケージのコマンドを簡単に実行するためのコマンド」です。
さらに、「まだインストールしていないパッケージを、一時的にダウンロードしてその場で実行する」こともできます。
TypeScriptの例でよく見るのが、次のようなコマンドです。
npx tsc --init
これは、「プロジェクトにインストールされているTypeScriptの tsc コマンドを実行して、tsconfig.json を作ってね」という意味です。
ここでnpxは、「node_modulesの中からtscを探してきて、それを実行する」という仕事をしています。
「npmで入れて、npxで使う」という関係
イメージとしては、こうです。
npmは「工具を棚に並べる人」。
npxは「棚から工具を取り出して実際に使う人」。
TypeScriptなら、npmでTypeScriptをプロジェクトに入れて、npxで tsc を実行する、という流れになります。
具体例で比べる：npmだけでやる場合と、npxを使う場合
npmスクリプトだけでやる場合
npxがなかった頃や、あえて使わない場合は、package.json にスクリプトを書いて実行します。
{
"scripts": {
"build": "tsc"
}
}
そして、次のように実行します。
npm run build
この場合、npm run が「スクリプト経由でtscを呼び出す」役割を果たしています。
つまり、「npmでインストール → npm runで実行」という形です。
npxを使うとどう変わるか
同じことを、npxを使うともっと直接的に書けます。
npx tsc
これだけで、プロジェクトにインストールされているTypeScriptのコンパイラが実行されます。npm run を経由せずに、「その場でパッケージのコマンドを叩く」イメージです。
TypeScriptの入門記事で npx tsc --init がよく出てくるのは、「インストールしたばかりのtscを、すぐに一回だけ実行したい」という場面にぴったりだからです。
「グローバルインストール」と「ローカルインストール」との関係
npmでグローバルに入れる場合
npmには、-g オプションを付けて「グローバルインストール」する機能があります。
npm install -g typescript
こうすると、どのプロジェクトからでも tsc コマンドが直接使えるようになります。
tsc --version
tsc hello.ts
この場合、npxを使わなくても tsc が叩けます。
ただし、「どのプロジェクトも同じバージョンのTypeScriptを使う」ことになるので、プロジェクトごとにバージョンを分けたい場合には向きません。
プロジェクトごとにTypeScriptを入れる場合とnpx
プロジェクトごとにTypeScriptをインストールする場合は、次のようにします。
npm install --save-dev typescript
このとき、tsc は node_modules/.bin/tsc に入ります。
パスを直接書けば実行できますが、毎回それを書くのは面倒です。
そこで登場するのがnpxです。
npx tsc
npxが「このプロジェクトのnode_modulesの中からtscを探して実行してくれる」ので、パスを意識せずに済みます。
この「プロジェクトローカルのツールを簡単に実行する」というのが、npxの一番おいしいところです。
TypeScript学習でよく出てくるnpm / npxのパターン
よく見るコマンドの意味を整理する
TypeScriptの入門でよく出てくるコマンドを、npmとnpxの視点で見直してみます。
npm install --save-dev typescript
npx tsc --init
npx tsc
最初の npm install は、「TypeScriptという工具をこのプロジェクトの道具箱に入れる」。
次の npx tsc --init は、「入れたばかりのTypeScriptコンパイラを使って、設定ファイルを作る」。
最後の npx tsc は、「TypeScriptコンパイラを実行して、.tsファイルを.jsに変換する」。
この流れが理解できていれば、npmとnpxの役割はほぼ掴めています。
初心者がまず押さえるべき感覚
npmは「インストール係」、npxは「実行係」
細かいオプションや高度な使い方は後回しで構いません。
最初のうちは、次の感覚だけしっかり持っておけば十分です。
npmは、パッケージ（TypeScriptなど）をプロジェクトに入れたり、管理したりするためのコマンド。
npxは、そのパッケージが提供するコマンド（tscなど）を、その場で実行するためのコマンド。
この二つをセットで使うことで、「TypeScriptをプロジェクトに導入して、コンパイルして、実行する」という一連の流れがスムーズに回り始めます。