JavaScript (Node.js) : nvm + npm 編
概要
- JavaScript はもともとWebページの一部として書いて, 動的なページを作るためのプログラミング言語だった
- したがって実行環境はWebブラウザの中と決まっていたのだが, ブラウザ外でも通常のプログラミング言語として実行できるよう, 単体の処理系として切り出されたのが Node.js
- つまり Node.js = 普通の (ブラウザと無関係な) JavaScript の実行環境
- Python プログラムを実行するためにPython処理系 (
pythonコマンド)があるのと同じように JavaScript に対して Node.js (nodeコマンド) がある Node.jsというとまるでそれ自身がJavaScriptのプログラムのようだがそうではない (このネーミングは理解不能)
- Python プログラムを実行するためにPython処理系 (
- JavaScript で書かれたソフトウェアは npm (Node Package Manager) という仕組みで配布・インストールされることが多い
- つまりPython にとっての pip が JavaScript にとってはnpm
- Node.js は
nodeのバージョンによって動作が変わることが多いため, 複数のnodeのバージョンを切り替えられる nvm (Node Version Manager) を組み合わせて使うのが一般的 - そこで以下では nvm, npm, ビルド手順, の順に説明する
nvmをインストール
nvmコマンド自身は公式レポジトリ の指示にしたがって最新版を入れる- 2025/09/30 時点での指示は以下
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
- 実行すると以下のように, シェルのスタートアップファイル(
~/.bashrc)を「勝手に設定を書き加えたからね」と報告して勝手に書き換えるので一応確認しておく
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 16631 100 16631 0 0 291k 0 --:--:-- --:--:-- --:--:-- 300k
... <省略> ...
=> Appending nvm source string to /home/tau/.bashrc
=> Appending bash_completion source string to /home/tau/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion
- 注:
~/.bashrcはログイン時に自動的に実行されるものではない (対話的シェルを起動したときに実行される)- bash を使っている場合, ログインしたときに自動的に実行されるようにするには同じ内容を,
~/.bash_profileにも書かなければならない - bash以外のシェル (zsh, fishなど) を使っている人はメッセージを見ながら適切に設定してください
- 問題なければ一度ログアウトしてログインし直す
nvmコマンドが実行されるかを確認
$ nvm --help
Node.js (node, npm) のインストールと切り替え
node/npm のインストール = nvm install
nvmコマンドがインストールできたらnvm install ...でnode/npmをインストールできる
$ nvm install node
とすると最新版のnode, npmがインストールされる
- 特定バージョン(例: 20)をインストールしたければ,
$ nvm install 20
のようにする
- インストール先は
~/.nvmの下, バージョンごとのディレクトリ - 確認
$ which node
/home/tau/.nvm/versions/node/v24.9.0/bin/node
$ which npm
/home/tau/.nvm/versions/node/v24.9.0/bin/npm
node/npm の切り替え = nvm use
nvmで複数のバージョンのnode/npmをインストールしたらnvm use ...で, 利用するnode/npmのバージョンを切り替えられる
$ nvm use node
は最新版を使う指定
- バージョンを指定したい場合は
$ nvm use 20
など
node,npmが起動できることと, バージョンを確認
$ node -v
v24.9.0
$ npm -v
11.6.0
npm 概論
- npm は, node パッケージを管理するツールであり, パッケージをインストールするには
$ npm install パッケージ名
とする
- これで, 指定したパッケージ + それが依存する他のパッケージ もインストールされる
- ファイルはカレントディレクトリ下の
node_modulesというディレクトリにインストールされる (存在していなければ作られる) - つまり,
npmを実行したディレクトリごとに「別の環境 (Pythonのvenv相当のもの)」が作られるということになる - インストールされたパッケージ, それが依存しているパッケージは
package.json,package-lock.jsonというファイルに記録される
例
- cowsay は牛がセリフを喋っているアスキー画を生成してくれる他愛のないコマンド
$ npm install cowsay
added 41 packages in 2s
3 packages are looking for funding
run `npm fund` for details
$ ls
node_modules/ package.json package-lock.json
- コマンド (実行可能ファイル) は
node_modules/.bin下にインストールされる
$ ls node_modules/.bin
cowsay@ cowthink@
$ node_modules/.bin/cowsay "I am sleepy"
_____________
< I am sleepy >
-------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
- ライブラリとして使う場合はホームページを参考にJavaScriptを書き,
nodeコマンドで実行 - 例えば以下のようなファイル
a.jsを,npm install cowsayを実行したディレクトリ (node_modulesがあるディレクトリ) に作り,
var cowsay = require("cowsay");
console.log(cowsay.say({
text : "I'm a moooodule",
e : "oO",
T : "U "
}));
- 以下で実行
$ node a.js
参考: グローバルなインストール (この演習では不要)
node_modulesの下に全てがインストールされるという仕様は, 環境がひとりでに隔離される(開発のためのファイルが普段使う環境を汚さない), 気軽にやり直せる (node_modulesを削除すれば良い) という意味では便利だが, 普段から色々なところで使うソフトを入れる場合には不便でもある-gを使うと, グローバルなディレクトリにインストールされる
$ npm install -g パッケージ名
- 「グローバルなディレクトリ」とは,
nvmを使って導入したnpmの場合, あくまでユーザのホームディレクトリの下 (~/.nvm) の下であって, 全ユーザ共通ということではない
ソースコードのダウンロード
- Python同様, 多くのプロジェクトは github にレポジトリがある
- git clone でソースツリーを入手したら, 通常そのトップディレクトリに
package.jsonがある - ソースツリーに入って
npm install(引数なし)を実行すると, 依存しているパッケージだけ (package.json,package-lock.jsonから読み込まれる) が,node_modulesへインストールされる - 例:
$ git clone git@github.com:piuccio/cowsay.git
$ cd cowsay
$ npm install
npm install パッケージ名としたときと異なり, 本体 (cowsay自身)はインストールされないことに注意
開発用のビルド
- 一般にJavaScript処理系 (
nodeやブラウザ) はソースファイルを直接実行できるため, 特別なビルドのステップは不要な場合が多い - 必要なパッケージもあり, そのような場合は,
npm installのあと,
$ npm run build
を実行する
- これが必要か否かは,
package.jsonの"scripts"という属性の中に,"build"という属性があるかで判断する (npm run buildはpackage.json-> "scripts" -> "build" に書かれているコマンドを実行する) - この状態で, パッケージを使う準備がほぼ整っているが, 上述した動作 (ソースツリー内で
npm installを実行してもそのパッケージ自身はインストールされない) のためやや注意が必要
(a) node_modules/.bin 下にコマンドがインストールされないため, コマンドの動作を追跡したければそのソースファイルを突き止める必要がある
- それは
package.jsonの"bin"という属性を見るとわかる
"bin": {
"cowsay": "./cli.js",
"cowthink": "./cli.js"
},
:の左側がインストールされた後のコマンド名, 右側がそのソースコード(ソースツリーのトップディレクトリからの相対パス)- これを見て, ソースツリー直下の
cli.jsがcowsayコマンドの実体であるとわかる
(b) node_modules/ 下にインストールされないため, ライブラリとして使いながらデバッグする場合も, require(パッケージ名) ではダメで, require(パス名) とする必要がある
- 例えば以下の
require("cowsay")はnode_modules下にcowsayがないため失敗する
var cowsay = require("cowsay");
- 代わりに (
git cloneを実行したフォルダで実行するのであれば)
var cowsay = require("./cowsay");
とする.
- または
cowsayフォルダで実行するのであれば,
var cowsay = require(".");
でもよい
パッケージの検索
npm searchコマンドで検索することもできる
npm search キーワード
- npm ホームページで検索することもできる
練習
- JavaScript のパッケージ
cowsayのgithubレポジトリを見つけ, - 空のディレクトリを作り, コードをダウンロード (git clone),
- 開発用インストール
cowsayディレクトリに入ってnpm install- (任意)
cowsayの親ディレクトリでnpm install ./cowsayを行ってみよ