Zenn
🐧

npmと仲良くなる

2024/06/08に公開
Node.js
npm
tech

はじめに

最近、クライアントから頂く案件で、npm scriptで環境開発されたパッケージを頂くことが増えました。これらの案件に対応していくためにも、npmの使い方を覚えようと思い、その備忘録となります。

Node.js

まず、npmを知るにあたり、Node.jsの知識が必要です。

Node.jsはサーバーサイドで動くJavaScript（以下、JS）のこと。通常JSはブラウザ上で動く言語であり、OSへのアクセスは許可されていません。Node.jsはパソコン上（OS上）で機能するプログラムを記述できるようにしたJS実行環境のことを指します。
ですので、よく「サーバーサイド側のJS実行環境」と説明されますが、半分正しく、正確にはサーバーサイド/クライアントサイド両方のJS実行環境として利用されます。

Node.jsとはなにか？なぜみんな使っているのか？ #JavaScript - Qiita https://qiita.com/non_cal/items/a8fee0b7ad96e67713eb

npm

Node.jsのパッケージを管理するシステム
ここで言うパッケージとは、複数のモジュールをまとめたもの。
パッケージを構成するモジュールとは、特定の機能を提供するためのコードのパーツを指します。1つ（以上）の機能をもつので、ものによってはモジュール単体でも使用できます。しかし、基本的に複数の小さな機能（モジュール）を合わせた普遍的な機能（パッケージ）を使用します。ときどき「ライブラリ」という言葉を耳にするかと思いますが、パッケージとほぼ同義語です。npmの世界ではパッケージという呼び名で統一されており、npm上からインストールするのはパッケージだという認識で問題ないです。

npmの役割

プロジェクトごとに必要なパッケージをnpmからインストールして、組み合わせることで環境構築します。ここでのnpmを利用するメリットは以下の2点です。

  • 依存関係の解決
    パッケージの依存関係を自動的に解決してインストールします。たとえば、あるパッケージが他のパッケージに依存している場合、npmはそれらの依存関係を自動的にインストールします。
  • バージョン管理
    パッケージのバージョン管理が容易です。特定のバージョンを指定してインストールできます。また、異なるバージョンのパッケージを複数のプロジェクトで同時に使用することもできます。
    他にも自作したパッケージを公開して、メンバーに共有するといったこともできます。

Node.js, npmのバージョン管理

Node.jsやnpmはバージョン変更も活発なので、これらの管理を行う必要があります。
パッケージのバージョン管理を行うシステムをさらに管理するといったかたちです。
私はVoltaというバージョン管理ツールを使用しています。詳しくは以下サイトを参考

【Voltaの導入から使い方まで】NodeとYarnのバージョン管理を手に入れる | ギークの逆襲 🐟 https://www.geeklibrary.jp/counter-attack/volta/

利用方法

初期化

適当な場所にプロジェクトを作成し、npmの管理のため初期化を行います。以下のコマンドで初期化を行います。

npm init -y

すると、カレントディレクトリ直下にpackage.jsonが作成されます。"-y"を末尾につけることで、対話形式での各項目の記述を飛ばすことができます。後からいくらでも変更できるので、とくにこだわりがなければ飛ばしで問題ないと思います。

{
  "name": "multi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

↑ 作成されたpackage.jsonの中身はこんな感じ

インストール

初期化が完了したらいよいよパッケージのインストールです。インストールの方法は以下の2通りです。

  • ローカルインストール
    プロジェクトごとにパッケージのバージョン変更が伴う、または特定のプロジェクトにしか使用しないパッケージの場合はローカルインストールにします。ほとんどのパッケージはローカルインストールで問題ないです。
npm install <パッケージ名>
または
npm i <パッケージ名>

バージョン指定するときは、@バージョンとする
npm i <パッケージ名>@1.1.1
  • グローバルインストール
    PC上にパッケージをインストールします。自動でパスが通ります。この場合、パスはnode_modules内ではなくnodeやnpmを管理するツールを基準としたパスなどになります。installコマンドの後に"-g"でグローバルインストールできます。
npm install -g <パッケージ名>

dependenciesとdevDependencies

パッケージのインストール時にもう1点気を付けることがあります。
下記のように、インストールされたパッケージが"dependencies"と"devDependencies"に分かれています。

{
	※一部省略
	・・・
  "devDependencies": {
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "dependencies": {
    "normalize.css": "^8.0.1",
    "sass-mq": "^6.0.0"
  }
}
  • dependencies：本番環境のビルド時に利用するパッケージ
  • devDependencies：開発環境、テスト環境で利用するパッケージ。本番では必要ないパッケージが当てはまります。

参考

Discussion