先生と生徒の会話形式で理解しよう

生徒

「TypeScriptでnpmってよく聞くんですが、それって何ですか？」

先生

「npmは、TypeScriptやJavaScriptのパッケージ（部品）を管理したり、追加したりするためのツールなんです。色んな便利な機能を簡単に取り込めますよ。」

生徒

「そのnpmで使うコマンドって難しそう…覚える必要ありますか？」

先生

「よく使うコマンドだけ覚えればOKです！今回は初心者の方向けに、TypeScriptで使うnpmコマンドをやさしく紹介しますね。」

1. npmとは？パッケージとは？

npmとは「Node Package Manager（ノード・パッケージ・マネージャー）」の略で、プログラムに使う部品（パッケージ）を管理するためのツールです。

「パッケージ」というのは、誰かが作った便利なコードのかたまりで、自分のプロジェクトに取り入れて使うことができます。TypeScriptを書くときにも、パッケージを追加することがよくあります。

2. よく使うnpmコマンド一覧

TypeScriptで開発する際に、最低限知っておきたいnpmのコマンドをまとめました。

npm init：プロジェクトの初期化
npm install：パッケージのインストール
npm install --save-dev：開発用パッケージのインストール
npm uninstall：パッケージの削除
npx：一時的にコマンドを実行

3. npm init：プロジェクトを初期化する

まず最初に行うのが、プロジェクトの初期化です。これは、TypeScriptの設定ファイルなどを管理するpackage.jsonというファイルを作るために必要な手順です。


npm init -y

-yをつけると、質問に答えることなく自動で初期設定が完了します。

4. npm install：パッケージを追加する

外部の便利なツールやライブラリを使いたいときに使うのがnpm installです。例えば、TypeScriptをプロジェクトに追加するには、次のようにします。


npm install typescript

インストールすると、node_modulesというフォルダができ、その中にパッケージが保存されます。

5. npm install --save-dev：開発用パッケージの追加

開発中だけ使うパッケージ（本番では不要なもの）を追加する場合は、--save-devオプションを使います。

TypeScriptのコンパイラやテストツールなどが該当します。


npm install --save-dev typescript

--save-devをつけることで、devDependenciesという区分で記録されます。

6. npm uninstall：不要になったパッケージを削除

使わなくなったパッケージを削除するには、npm uninstallを使います。


npm uninstall typescript

これにより、関連するパッケージもプロジェクトから取り除かれます。

7. npx：一時的にコマンドを実行する

npxは、一時的にパッケージを使ってコマンドを実行できる便利なコマンドです。TypeScriptのコードをすぐに実行したいときに便利です。


npx ts-node index.ts

このように、npxを使うことで、インストールされていないパッケージでも一度きり実行することができます。

8. package.jsonの役割とは？

package.jsonは、npmでインストールしたパッケージやスクリプトの情報を記録する大事なファイルです。

このファイルを見ると、どんなパッケージを使っているか、バージョンはいくつかなどがわかるようになっています。


{
  "name": "my-ts-project",
  "version": "1.0.0",
  "scripts": {
    "start": "ts-node index.ts"
  },
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

このように、npmの管理はすべてpackage.jsonで記録されるのです。

9. よくある質問：グローバルとローカルの違い

グローバルにインストールすると、すべてのプロジェクトで使えるようになります。逆にローカルは、そのプロジェクト専用で使われます。

グローバルにインストールするには、-gを使います。


npm install -g typescript

グローバルで入れると、どこからでもtscなどのコマンドが使えるようになります。

まとめ

TypeScriptで開発を始めるとき、避けて通れないのが「npmコマンド」の理解です。今回の記事では、初心者がまず覚えるべきnpmの基本コマンドに焦点を当てて、ひとつずつ丁寧に紹介してきました。npm initによるプロジェクトの初期化、npm installでのパッケージ追加、--save-devでの開発用依存の整理、npxによる一時実行と、実務で頻繁に使う操作に関して、具体例と一緒に理解できたかと思います。

特にpackage.jsonの役割は重要で、パッケージの依存関係やスクリプトの管理がこの1ファイルで完結します。また、npm uninstallで不要なパッケージを綺麗に削除できることや、-gオプションによるグローバルインストールの使い分けなど、実際にプロジェクト運用を始めたときに迷いがちなポイントも確認しました。

例えば、TypeScriptを開発中だけ使いたい場合には以下のようにコマンドを実行します。