Node.jsを使った開発では、npm、Yarn、n、Viteといった名前がまとめて出てきます。
どれもJavaScript開発に関係するため混同しやすいものの、担当している役割は同じではありません。大きく分けると、Node.jsはJavaScriptを動かすためのランタイム環境、npmとYarnはパッケージを管理するツール、nはNode.js本体のバージョンを切り替えるツール、Viteはフロントエンド開発を効率化するビルドツールです。
この記事では、まず全体像を整理し、そのあとで「どの場面で何を使うのか」を開発の流れに沿って説明します。Node.js周辺の言葉が一気に出てきて混乱している方は、まず「何を管理するツールなのか」に注目して読んでみてください。
先に結論：それぞれが管理するものは違う
Node.js周辺のツールは、次のように分類すると理解しやすくなります。
| ツール | 分類 | 管理するもの | 主な使いどころ |
|---|---|---|---|
| Node.js | ランタイム環境 | JavaScriptを実行する環境 | API、Webサーバー、開発ツールの実行 |
| npm | パッケージマネージャー | ライブラリ、開発ツール、依存関係 | パッケージの追加、スクリプト実行、依存関係管理 |
| Yarn | パッケージマネージャー | ライブラリ、開発ツール、依存関係 | チームや既存プロジェクトでYarnを採用している場合 |
| n | Node.jsバージョン管理ツール | Node.js本体のバージョン | プロジェクトごとにNode.jsのバージョンをそろえたい場合 |
| Vite | ビルドツール | 開発サーバー、変更反映、本番用ビルド | Vue.js、Reactなどを使うフロントエンド開発 |
つまり、Node.jsが土台になり、その上でnpmまたはYarnが必要なパッケージを管理します。プロジェクトごとにNode.jsのバージョンをそろえたい場合はnを使い、フロントエンド開発を進める場面ではViteが開発サーバーやビルドを担当します。
混同しやすい用語を先に押さえる
各ツールの違いを理解するには、先に基本用語を押さえておくと読みやすくなります。
- ランタイム環境: プログラムを実行するための環境です。Node.jsは、JavaScriptを実行するランタイム環境です。
- パッケージ: プロジェクトに追加して使うライブラリや開発ツールのまとまりです。
- 依存関係: あるパッケージやアプリケーションが、動作するために別のパッケージを必要とする関係です。
- バージョン管理: プロジェクトに合うNode.jsやパッケージのバージョンをそろえる作業です。
- ビルド: 開発中のコードを、公開や配布に向いた形へまとめる処理です。
たとえば、npmとViteはどちらもコマンドで使うため同じ種類に見えます。しかしnpmはパッケージを管理するためのツールで、Viteは開発サーバーやビルドを扱うツールです。このように「何を管理するのか」を分けて考えると、混同しにくくなります。
Node.jsとは何か
Node.jsとは、JavaScriptをブラウザの外でも実行できるようにするランタイム環境です。
JavaScriptはブラウザ上で使われることが多い言語ですが、Node.jsを使うと、サーバー側の処理、API、リアルタイムアプリケーション、開発ツールの実行などにもJavaScriptを使えます。
Node.jsの主な役割
- サーバーサイドアプリケーションの構築: Webサーバー、APIサーバー、リアルタイムアプリケーションなどを作るときに使われます。
- 非同期I/Oによる処理: リクエスト処理やファイル操作などを、全体を止めにくい形で扱える設計が特徴です。
- 開発ツールの実行基盤: Viteなどのフロントエンド開発ツールもNode.js上で動くため、ブラウザ向け開発でもNode.jsが必要になります。
Node.jsは、アプリケーションそのものを動かすためにも、開発に必要なツールを動かすためにも使われます。この点を押さえると、npm、Yarn、Viteとの関係が理解しやすくなります。
npmとは何か
npmは、Node.jsプロジェクトで使うパッケージを管理するためのツールです。
外部ライブラリや開発ツールをインストールしたり、package.jsonに定義されたスクリプトを実行したり、プロジェクトに必要な依存関係を管理したりします。
npmでできること
- パッケージのインストール: プロジェクトで必要なライブラリや開発ツールを追加できます。
- 依存関係の管理:
package.jsonを使い、プロジェクトに必要なパッケージを管理します。 - スクリプトの実行:
npm runで、開発サーバーの起動、ビルド、テストなどの処理を実行できます。
代表的なnpmコマンド
| コマンド | 用途 |
|---|---|
npm install |
依存パッケージをインストールします。 |
npm init |
新しいプロジェクトのpackage.jsonを作成します。 |
npm run <script> |
package.jsonに定義されたスクリプトを実行します。 |
npm update |
既存パッケージの更新に使います。 |
npmは、Node.jsプロジェクトを始めるときに最初に触れることが多い基本的なパッケージ管理ツールです。Node.jsをインストールして終わりではなく、実際の開発ではnpmを通じて必要なライブラリや開発ツールを入れていく場面が多くなります。
Yarnとは何か
Yarnは、npmと同じくパッケージを管理するためのツールです。
npmとは別のパッケージマネージャーですが、目的は近く、プロジェクトで使うライブラリや開発ツール、依存関係を管理します。
Yarnの主な特徴
- 依存関係を管理できる:
package.jsonとロックファイルを使い、チーム内で同じ依存関係を再現しやすくします。 - npmに近い目的で使える: パッケージの追加、インストール、スクリプト実行などを扱えます。
- プロジェクト方針に合わせて選ぶ: npmとYarnのどちらを使うかは、チームや既存プロジェクトの方針に合わせるのが安全です。
代表的なYarnコマンド
| コマンド | 用途 |
|---|---|
yarn add <package> |
指定したパッケージを追加します。 |
yarn install |
依存関係をインストールします。yarnだけで実行できる場合もあります。 |
yarn up |
依存関係の更新に使います。 |
npmとYarnは、どちらもパッケージマネージャーです。同じプロジェクト内でむやみに混在させると、ロックファイルやインストール結果が分かれ、依存関係の管理が分かりにくくなります。
まずはプロジェクトのREADMEや既存のロックファイルを確認し、チームで使うツールをそろえることが大切です。
nとは何か
nは、Node.js本体のバージョンを管理するためのツールです。
npmやYarnがパッケージを管理するのに対して、nはNode.jsそのもののバージョンを切り替えます。ここを混同すると、「パッケージを入れたいのにnを調べている」「Node.jsのバージョンを変えたいのにnpmの設定を見ている」といった迷いが起きやすくなります。
nが役立つ場面
- 古いプロジェクトと新しいプロジェクトで、必要なNode.jsのバージョンが違う場合
- 動作確認のために、別のNode.jsバージョンで実行したい場合
- チーム内でNode.jsのバージョンをそろえたい場合
代表的なnコマンド
| コマンド | 用途 |
|---|---|
n <version> |
指定したNode.jsバージョンをインストールし、利用対象にします。 |
n lts |
LTS系のNode.jsを利用したい場合に使います。 |
n |
インストール済みのNode.jsバージョンを選択します。 |
nは、npmやYarnのようにライブラリを追加するツールではありません。管理対象はパッケージではなく、Node.js本体のバージョンです。
Viteとは何か
Viteは、フロントエンド開発向けのビルドツールです。
開発中のサーバー起動、ファイル変更の反映、本番用ビルドなどを扱い、Vue.jsやReactなどを使った開発でよく利用されます。
JavaScriptフレームワーク全体を見渡したい場合は、主要なJavaScriptフレームワーク・ライブラリ一覧も参考になります。
Viteの主な特徴
- 開発サーバーをすばやく起動できる: 開発中の画面確認を効率化できます。
- 変更をすばやく反映できる: ファイルを変更したときに、その変更を確認しやすくします。
- 本番用ビルドを行える: 開発時だけでなく、公開前に必要なビルドにも使われます。
代表的なViteコマンド
| コマンド | 用途 |
|---|---|
vite |
開発サーバーを起動します。 |
vite build |
本番用のビルドを実行します。 |
vite preview |
ビルド済みのアプリケーションをローカルで確認します。 |
ViteもNode.js上で動作する開発ツールです。そのため、Viteを使う場合でも、前提としてNode.jsとパッケージマネージャーの理解が必要になります。
実際の開発ではどうつながるか
それぞれの関係を、実際の開発の流れで見ると次のようになります。
- Node.jsを用意する: JavaScriptを実行する土台を準備します。
- 必要に応じてnでNode.jsのバージョンをそろえる: プロジェクトに合うNode.jsバージョンを使います。
- npmまたはYarnで依存関係を入れる:
package.jsonに基づいてライブラリや開発ツールをインストールします。 - Viteでフロントエンド開発を進める: 開発サーバー、変更反映、本番ビルドを利用します。
- 必要なスクリプトを実行する:
npm run devやyarn devのように、プロジェクトで用意されたコマンドを実行します。
Node.jsとVue.js、Nuxt.js、Next.jsなどの関係もあわせて整理したい場合は、Node.jsとVue.js・Nuxt.js・Next.jsの関係を整理した記事も役立ちます。
どのツールをいつ使うべきか
迷ったときは、ツール名からではなく「やりたいこと」から逆算すると選びやすくなります。
| やりたいこと | 使うツール | 理由 |
|---|---|---|
| JavaScriptをサーバー側や開発環境で動かしたい | Node.js | JavaScriptを実行する土台になるため |
| ライブラリや開発ツールを追加したい | npmまたはYarn | パッケージと依存関係を管理するため |
| Node.jsのバージョンを切り替えたい | n | Node.js本体のバージョンを管理するため |
| Vue.jsやReactなどでフロントエンドを効率よく開発したい | Vite | 開発サーバーやビルドを扱うため |
初心者のうちは、まずNode.jsとnpmの関係を押さえると理解しやすくなります。そのうえで、プロジェクトの方針に応じてYarnを使うか、Node.jsのバージョン管理にnを使うか、フロントエンド開発でViteを使うかを判断するとよいでしょう。
よくある混同と整理のしかた
最後に、混同しやすい組み合わせを整理します。
- Node.jsとnpm: Node.jsはJavaScriptを実行する環境です。npmはNode.jsプロジェクトのパッケージを管理するツールです。
- npmとYarn: どちらもパッケージマネージャーです。同じプロジェクトでは、基本的にどちらか一方にそろえると管理しやすくなります。
- nとnpm: nはNode.js本体のバージョンを管理します。npmはプロジェクト内のパッケージを管理します。
- ViteとNode.js: ViteはNode.js上で動く開発ツールです。Vite自体がJavaScriptのランタイム環境になるわけではありません。
まとめ
- Node.jsは、JavaScriptを実行するためのランタイム環境です。
- npmは、Node.jsプロジェクトのパッケージと依存関係を管理する基本的なツールです。
- Yarnは、npmと同じ目的で使えるパッケージマネージャーです。
- nは、Node.js本体のバージョンを管理するツールです。
- Viteは、フロントエンド開発を効率化するビルドツールです。
これらのツールは、すべてNode.jsを中心とした開発環境を支えるものです。役割を混同せず、ランタイム、パッケージ管理、バージョン管理、ビルドツールという分類で整理すると、どの場面で何を使うべきかが判断しやすくなります。
私たちgreedenは、アイデアを形にするシステム開発やソフトウェア設計をサポートしています。
開発環境の整理、Webアプリケーション開発、業務システムの設計などでお困りのことがあれば、お気軽にご相談ください。
お問い合わせはこちらからどうぞ。