npm,npx,bunってどういう違いがあるんでしたっけ？？
はじめに
「npm installって何だろう？」「npxってどう違うの？」「bunの方が速いって聞いたけど本当？」
新人エンジニアの方なら、こういった疑問を持ったことがあるのではないでしょうか？
そういういえば前に聞かれたことがあったなと思い出し、この機会に整理してアウトプットしてみることにしました。
今回は、これらのツールの違いをできるだけ分かりやすく解説していきます。
それぞれのツールの歴史と背景
npmの誕生と発展
npmは2010年にIsaac Z. Schlueter氏によって作られました。当時、Node.jsのパッケージ管理の標準化が必要とされていた時期でした。
重要な出来事：
- 2010年：npmの初期バージョンリリース。Node.jsのパッケージ管理を一新
- 2014年：npm社の設立。企業としての基盤確立
- 2020年：GitHubがnpmを買収。さらなる発展へ
- 現在：世界最大のソフトウェアレジストリとして、JavaScriptエコシステムの中心的存在に
npxの登場
npxはnpm 5.2.0から標準で組み込まれるようになりました（2017年）。グローバルインストールの課題を解決する画期的なツールとして登場しました。
開発の背景：
- パッケージのグローバルインストール問題の解決
- プロジェクト初期化作業の効率化
- バージョン競合問題の解消
- 一時的なパッケージ実行のニーズへの対応
bunの開発ストーリー
bunは2022年にJarred Sumner氏によって開発が始まり、Zigプログラミング言語で書かれています。Oven社（現在のbunの開発企業）が精力的に開発を進めています。
特徴的な開発アプローチ：
- JavaScriptCoreエンジンの採用による高速化
- Zigによる効率的な実装
- Node.jsとの高い互換性維持
- オールインワンの開発環境提供
試しに、実際の開発プロジェクトでinstall時の計測を行ってみました✋
もしご自身の手元に開発中のプロジェクトがあれば、ぜひ実際に計測してみてください。
# 既存のpackage.jsonを使用
cp package.json package.json.backup
# npmでの測定
rm -rf node_modules package-lock.json
time npm install
# bunでの測定
rm -rf node_modules package-lock.json
time bun install
# テスト後に元の状態に戻す場合
mv package.json.backup package.json
今回、自分のプロジェクトでの実施結果は下記のとおりです。
驚くべき速さの差が出ました！
# bunの性能比較例
時間計測: npm install vs bun install
npm: 22.90s
bun: 0.57s
それぞれのツールについて詳しく見ていきましょう
npmって何？
npmは「Node Package Manager」の略で、Node.jsのパッケージを管理する中心的なツールです。
# よく使うnpmコマンド
npm install express # パッケージをインストール
npm run start # プロジェクトを起動
npm update # パッケージを更新
npmさんは、こんなことをしてくれます：
- プロジェクトの依存パッケージの一元管理
- パッケージのインストールと更新の自動化
- バージョン管理の効率化
- プロジェクト設定の統合管理
グローバルインストールとローカルインストール
npmでパッケージをインストールする方法は主に2種類あります：
1. ローカルインストール（プロジェクト単位）
npm install express # プロジェクトのnode_modulesにインストール
- プロジェクトフォルダ内のnode_modulesにインストール
- そのプロジェクトでのみ使用可能
- チームメンバーと同じバージョンを共有できる
- package.jsonで依存関係を管理
2. グローバルインストール（PC全体）
npm install -g typescript # PC全体にインストール
- PC全体でパッケージを使用可能
- どのフォルダでもコマンドが使える
- バージョン管理が難しい
- チームでのバージョン統一が困難
npxって何が違うの？
npxは「Node Package Execute」の略で、パッケージを一時的に実行するための専用ツールです。グローバルインストールの問題を解決する新しいアプローチを提供します。
# 従来のグローバルインストールの場合
npm install -g create-react-app
create-react-app my-app
# npxを使う場合
npx create-react-app my-app # インストール不要で直接実行
npxさんができること：
- インストール不要でパッケージを一時実行
- プロジェクトテンプレートの効率的な作成
- 特定バージョンのツール検証（
npx package@version） - グローバルインストールの問題を回避
bunって最近よく聞くけど？
bunは、次世代の統合開発ツールとして注目を集めています。
従来のNode.js開発では、以下のような複数のツールを組み合わせて使用する必要がありました：
- Node.js - JavaScriptの実行環境
- npm - パッケージ管理
- webpack/vite - ビルドツール
- nodemon - ファイル監視と自動再起動
- Jest - テストツール
- TypeScript - 型チェックとコンパイル
bunはこれらの機能を1つのツールに統合し、シンプルかつ高速な開発環境を提供します。
# bunの基本的な使い方
bun install # 高速なパッケージインストール
bun run index.ts # TypeScriptファイルを直接実行
bun create react # Reactプロジェクトの作成
bun test # テストを高速実行
bun build # 最適化されたビルド
bunの特徴：
- 圧倒的な実行速度：従来の開発ツールと比べて処理が劇的に速い
- 統合開発環境：複数のツールの機能を1つに統合
- TypeScriptサポート：追加設定なしでTypeScriptを実行可能
- 開発効率の向上：設定ファイルの削減とツール間連携の簡素化
どういうときに何を使えばいいの？
npmを使うとき
普段の開発作業で使うメインツールです：
- プロジェクトでのパッケージ管理
- 例：
npm install expressでサーバーの構築に必要なパッケージを追加 - 例：
npm installで他の開発メンバーと同じ環境を構築
- 例：
- 開発・ビルドの実行
- 例：
npm run devで開発サーバーを起動 - 例：
npm run buildで本番用のファイルを生成
- 例：
npxを使うとき
一度きりの実行や、新規プロジェクトの作成時に使います：
- 新しいプロジェクトの作成
- 例：
npx create-react-app my-appでReactの新規プロジェクトを作成 - 例：
npx create-next-app blogでブログサイトの雛形を作成
- 例：
- 一時的なツールの実行
- 例：
npx serveで現在のフォルダをサッと確認用のWebサーバーで公開 - 例：
npx json-server db.jsonで簡易的なAPIサーバーを立ち上げ
- 例：
bunを使うとき
主に開発時の実行速度を劇的に改善したい場合に使います：
- 開発環境のセットアップ
- 例：
bun installでパッケージのインストールがnpmより高速に - 例：
bun devで開発サーバーの起動が瞬時に完了
- 例：
- 開発時のテスト実行
- 例：100個のテストを
bun testで1秒以内に完了 - 例：
bun test --watchで変更を検知して即座にテスト実行
- 例：100個のテストを
まとめ
シンプルに整理すると：
- npm: 信頼性の高いパッケージ管理の基盤（2010年～）
- npx: 効率的な実行環境の提供（2017年～）
- bun: 次世代の統合開発環境（2022年～）
これらのツールは、それぞれの特長を活かして使い分けることで、より効率的な開発が可能になります。特に最近のプロジェクトでは、bunの採用を検討する価値が高まっていますね。
公式ドキュメント
いかがでしたか？これで、npm、npx、bunの違いについて少しだけでも理解が深まったのではないでしょうか？
もしそうであれば、何よりです😄
分からないことがあれば、ぜひチームの先輩に質問してみてください。
Discussion