Node.jsのインストール方法(Mac)とnpmのコマンド・CLIの使い方まとめ

npm-how-to

こんにちはフロントエンドエンジニアのまさにょんです!

今回は、Node.jsのインストール方法(Mac)とnpmのコマンド・CLIの使い方について解説していきます。

目次

npm(Node Package Manager)とは?

npm(Node Package Manager)とは、Node.js のパッケージ管理ツールで、

パッケージのインストール、アンインストール、バージョンの管理をするためのツールです。

他のプログラミング言語で言うならば、Pythonで言うところの pip, PHPで言うところの composer と同様の役割です。

Node.js をインストールすると合わせて、npm もインストールされます。

Node.jsのインストール方法 Ver. Mac

Node.jsのインストール方法は、Node.jsをMacにHomebrew(nodebrew)でインストールする方法 を参照させてもらっています。

HomebrewをMacにインストール

Macのパッケージ管理ツールである Homebrewをインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

nodebrewのインストール

nodebrewはNode.jsのバージョン管理ツールで、

複数のバージョンのNode.jsをインストールして、バージョンの切り替えをして利用することができます。

Node.js のバージョン管理ツールには、nvm や nodebrewなどがあります。

brew install でインストールします。

brew install nodebrew

nodebrew -v で nodebrewのバージョンやnode.jsのインストールコマンドを確認することができます。

nodebrew -v

Node.jsのインストール

次のコマンドでインストールできるNode.jsのバージョンを確認することができます。

nodebrew ls-remote

nodebrew でNode.jsを管理する(インストールする)専用のディレクトリを作成します。

mkdir -p ~/.nodebrew/src

上記までの確認が完了したら、次の3パターンのいずれかで、Node.jsをインストールします。

バージョン指定でインストールする場合

# バージョン指定でインストールする場合
nodebrew install-binary v18.12.1

最新版をインストールする場合

# 最新版をインストールする場合
nodebrew install-binary latest

安定版をインストールする場合

# 安定版をインストールする場合
nodebrew install-binary stable

Node.jsを有効化

nodebrew ls で nodebrew を使ってインストールした Node.js の一覧を確認できます。

nodebrew ls

実行結果は次のとおりです。

# 実行結果
v18.12.1

current: none

currentが、現在有効化されている Node.jsのバージョンになります。

current が noneと表示されているので、インストールしたNode.jsのバージョンを次のコマンドで有効化します。

nodebrew use v18.12.1

実行結果は次のとおりです。

v18.12.1

current: v18.12.1

PATHを通す

Node.jsを実行できるように、PATHを次のように通します。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc

ターミナルを再起動して、次のコマンドを実行してバージョンが確認できたらインストール完了です。

node -v

Node.jsのアンインストール

不要になったバージョンのnode.jsは、次のコマンドで削除することができます。

nodebrew uninstall バージョン

npmの使い方・CLIまとめ

npmのバージョンの確認 (インストール確認)

npmのバージョンの確認 (インストール確認)は、npm -v か npm –version か npm version ですることができます。

npm -v

npm --version

npm version

ヘルプを表示する

npm help や npm help コマンド で、コマンドに関するヘルプを表示することができます。

npm help

npm --help

# install に関するヘルプを表示する
npm help install

# install に関するヘルプを表示する
npm -h install

パッケージを検索する

キーワードに関連するパッケージを npm リポジトリから検索します。

npm search パッケージ名

次のコマンドのいずれかで、パッケージの詳細情報を表示します。

npm info パッケージ名
npm view パッケージ名
npm show パッケージ名

パッケージのバージョンを表示します。

# 最新バージョンを表示
npm info パッケージ名 version

# インストール可能なバージョン一欄を表示
npm info パッケージ名 versions

npm でパッケージをインストールする

npm install で package.json に記載されているパッケージをインストールする

npm install コマンドを実行すると、package.jsonに記載されているパッケージをインストールすることができます。

基本的には、package-lock.jsonでバージョンを指定していなければ最新バージョンがインストールされます。

バージョンを固定して使いたい場合は、package-lock.jsonでバージョン指定する必要があります。

npm install

グローバルインストール

パッケージをどのディレクトリからでも参照可能な場所にインストールするのが、グローバルインストールです。

  1. パッケージはすべてのプロジェクト(ディレクトリ)で参照・利用可能
  2. パッケージは指定したルートの先のnode_modulesに保存される
  3. 保存先は変更可能
npm install -g パッケージ名

npm i -g パッケージ名

ローカルインストール

パッケージを作業ディレクトリにインストールするのが、ローカルインストールです。

  1. パッケージはインストールした作業ディレクトリでのみ参照・利用可能
  2. 作業ディレクトリの node_modules に保存される
npm install パッケージ名

npm i パッケージ名

複数インストールする際は半角スペースあける

npm install パッケージ名 パッケージ名

パッケージのバージョンを指定していする際は@をつけて指定する

npm install パッケージ名@バージョン

インストールのオプションとショートカット

インストールの際に、次のようなオプションを指定することで本番環境用と開発環境用などを区別して保存することが可能です。

# 開発環境だけで使用するパッケージ
npm install パッケージ名 --save-dev
# 開発・本番、両方で使用するパッケージ
npm install パッケージ名 --save
オプションショートカット説明
–save-S• packahge.json の dependenciesに保存される
• prodはprodaction (本番環境) の意味をもつ
–save-dev-D• package.json の devDependenciesに追加される
• devはdevelopment (開発環境) の意味をもつ
引用元: npmまとめ!

インストール先のPathを確認する

# グローバルインストールのインストール先確認
npm root -g
# ローカルインストールのインストール先確認
npm root

インストールされているパッケージの確認

# グローバルインストールされたパッケージの一覧を見る
npm list -g
# ローカルインストールされたパッケージの確認
npm list
npm ls
npm la
npm ll
# 第一階層のパッケージ(直接インストールしたパッケージ)のみを表示する
npm list --depth=0

特定のパッケージがインストールされているかどうかの確認

特定のパッケージが、グローバルにインストールされているかどうかを確認する。

npm list -g <パッケージ名>

特定のパッケージが、ローカルのプロジェクトにインストールされているかどうかを確認する。

npm list <パッケージ名>

パッケージのアップデート方法

インストール済みのものより新しいものがないか確認する。

npm outdated

npm outdated -g

パッケージをアップデートします。

npm update パッケージ名
npm update パッケージ名 -g

パッケージ名を省略すると、package.json に記述されたすべてのパッケージをアップデートします。

npm update

パッケージのアンインストール方法

コマンドショートカット
uninstallun
removerm
引用元: npmまとめ!

※ 以下removeでも可能

npm uninstall -g パッケージ名
npm un -g パッケージ名
# ローカルインストールのパッケージをアンインストール
npm uninstall パッケージ名
npm un パッケージ名
# dependenciesからアンインストールする場合
npm uninstall --save パッケージ名
npm uninstall -S パッケージ名
# devDependenciesからアンインストールする場合
npm uninstall --save-dev パッケージ名
npm uninstall -D パッケージ名

npmでキャッシュの強制クリア

npmで原因不明のエラーは、キャッシュの強制クリアで解決することがあります。

npm cache clean --force

# または、、、

npm cache clean -f

package.jsonの作成(初期化)

npm init コマンドを実行すると、npm環境をセットアップして、package.json を生成します。

npm initでパッケージに関する情報が記述されている package.json が作成されます。

生成される際にプロジェクトについて、初期情報を設定する

npm init

質問に答えていき、答えた内容のpackage.jsonが作成されます。

$ npm init 
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
 
See `npm help json` for definitive documentation on these fields
and exactly what they do.
 
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
 
Press ^C at any time to quit.
package name: プロジェクト名  
version: (1.0.0)  
description:  
entry point: (index.js)  
test command:  
git repository:  
keywords:  
author:  
license: 


### 作成される package.json
{
  "name": "プロジェクト名",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": 
}
 

上記の質問をスキップするのが、-y オプションです。

npm init -y

npm init -y とすると質問をスキップして、基本的な情報だけを搭載したpackage.jsonが作成されます。

{
  "name": "プロジェクト名",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

package.json とは?

package.json とは、npm installしたパッケージのバージョン情報などが記載されたファイルで、

自身のアプリケーションが直接的に依存するパッケージを記載しています。

npm でアプリのパッケージのバージョン管理をするためのファイルであり、編集が可能です。

各項目の意味は、次のとおりです。

各項目説明
name名前
versionバージョン
description説明
mainエントリポイント
scriptsコマンドで実行するスクリプト
keywordsパッケージ検索に使用されるキーワード
author制作者
licenseライセンス
dependencies• 本番環境で使用すパッケージの一覧
• npm install [オプションなし または --save-prod]を実行した際に追加される
devDependencies• 開発環境で使用するパッケージの一覧
npm install [--save-dev]を実行した際に追加される
引用元: npmまとめ!

package-lock.json とは?

packge-lock.json とは、npm installしたパッケージのすべての依存モジュール(依存関係)が記載されたパッケージ管理ファイルです。

つまり、自身のアプリケーションが間接的に依存するパッケージがすべて記載されているわけです。

npm installnpm updateを実行する際に、packge-lock.json が存在する場合、この内容を優先して、パッケージをインストールします。

逆に packge-lock.json が存在しない場合は、package.json を元に最新のパッケージのバージョンがインストールされます。

インストールした依存関係パッケージのバージョンを記録しておき、

依存関係モジュールの新しいパッケージが出たとしてもバージョンを固定しておくためには、package-lock.json を使います。

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース(無料)

【IT道場】入校時0円! 就職目的プログラミングスクール

エンジニア転職なら100%「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

参考・引用

  1. Node.jsをMacにHomebrew(nodebrew)でインストールする方法
  2. npmまとめ!
  3. npmとyarnのコマンド早見表
  4. npm入門
  5. npmでよく使うコマンドまとめ
  6. package.jsonとpackage-lock.jsonの違い。package.jsonはなぜ必要なのか?

Twitterやってます!Follow Me!

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!

最近の投稿