npm はフロントエンドで使用するパッケージのバージョン管理を行うのに用いられます。
この記事では npm の概要から使い方まで丁寧に解説します。
概要
npmとは？
Node Package Manager の略で、Node.js のモジュールを管理するツールです。
package.json
npm はフロントエンドで使用するパッケージのバージョン管理を行うのに用いられます。
npm では、npm でインストールしたパッケージのバージョン情報を package.json に格納します。
この package.json からパッケージを一括でインストールすることが出来るため、package.json を一元管理することによりフロントエンドで使用するパッケージのバージョン管理を一元化することが出来ます。
インストールの種類
npm ではパッケージをインストールする方法が、グローバルインストールとローカルインストールの2種類存在します。
グローバルインストールでは npm のルート配下にある node_modules にパッケージがインストールされます。
Node.js インストール時に Node.js の実行モジュールのインストール先にパスが通されているため、グローバルインストールされたパッケージを全てのプロジェクトで使用することが出来ます。
ローカルインストールではプロジェクトのルート配下にある node_modules にパッケージがインストールされます。
ローカルインストールされたパッケージは対象のプロジェクトのみで使用することが出来ます。
導入
Node.js をインストールすると同時に npm もインストールされます。
使用方法
バージョン確認
下記コマンドで、npm のバージョンを確認出来ます。
npm -–version初期化
プロジェクトのルートディレクトリで下記コマンドを実行します。
npm initこれにより、プロジェクトのルートディレクトリ配下に package.json が作成されます。
パッケージの復元
プロジェクトのルートディレクトリにパッケージ情報が記載された package.json を置き、下記コマンドを実行します。
npm installこれにより、package.json に記載されたパッケージが一括でインストールされます。
パッケージのインストール
グローバルインストールする場合は下記コマンドを実行します。
npm install –g typingsローカルインストールする場合はプロジェクトのルート配下で下記コマンドを実行します。
npm install jquery–save オプションを付与すると package.json の dependencies に依存関係が追記されます。
dependencies には公開する際に必要なパッケージを記録します。
npm install --save jquery–save-dev オプションを付与すると package.json の devDependencies に依存関係が追記されます。
devDependencies には開発時に必要なパッケージを記録します（テストツールやタスクランナー等）。
npm install --save-dev jqueryバージョンを指定してインストールする場合はパッケージ名の後にバージョン名を指定します。
npm install jquery@1.1.0 パッケージのバージョン確認
リリースされたパッケージのバージョン一覧を下記コマンドで取得出来ます。
npm info jquery versionsローカルインストール済みのパッケージのバージョン一覧は下記コマンドで確認することが出来ます。
npm list --depth=0グローバルインストール済みのパッケージのバージョン一覧は下記コマンドで確認することが出来ます。
npm list --depth=0 -gパッケージの更新
下記コマンドで未更新のパッケージを確認出来ます。
npm outdated下記コマンドで package.json に記載されているパッケージのバージョンに更新されます。
npm updateただし、最新のバージョンを使用するには、package.json に記載されているパッケージのバージョンを更新する必要があります。
これを手動で一つ一つ最新か確認するのは大変です。
そこで、npm-check-updates を使用します。
npm-check-updates をグローバルインストールします。
npm install -g npm-check-updates下記コマンドで package.json のパッケージのバージョンを一括で最新にすることが出来るようになります。
npm-check-updates -uこの後に npm update を実行することで、一括で最新にすることが出来ます。
パッケージのアンインストール
下記コマンドで、グローバルインストールしたパッケージをアンインストールすることが出来ます。
npm uninstall -g jqueryローカルインストールしたパッケージをアンインストールする場合は下記コマンドを実行します。
npm uninstall jquerypackage.json の dependencies から依存関係を削除する場合は –save オプションを付与します。
npm uninstall --save jquerypackage.json の devDependencies から依存関係を削除する場合は –save-dev オプションを付与します。
npm uninstall --save-dev jquery関連情報
フロントエンドに関連する記事を以下にまとめています。
テレワークしている方には以下の記事がおすすめです。
私のお気に入りは REALFORCE と R&F BELX のルイボスティーです。
エンジニア初心者向けに本当に使えるツールを紹介しています。
特に Notion はタスク管理に本当に便利です。
