エンベーダー

  1. ホーム
  2. コース一覧
  3. Node.js環境構築コース
  4. npmの使い方をマスターしてNode.jsパッケージをインストールしよう

中級

Node.js環境構築コース

Node.js環境構築コース1/10

npmの使い方をマスターしてNode.jsパッケージをインストールしよう

今回学ぶ内容は以下の通りです。

  1. npmに関する基礎知識(JavaScriptとは、Node.jsとは、パッケージとは)
  2. npmのインストール、初期設定
  3. npmの使用方法(パッケージのインストール、アップデート、アンインストールなど)

npmとは

npmとは、NodePackageManagerの略でNode.jsのパッケージを管理するツールです。npmを使用することで、公開されているパッケージの検索やインストール、不要になったパッケージの削除などを行うことができます。 Node.jsをインストールすると同時にnpmもインストールされます。

yarnとは

yarnもnpmと同じく、Node.jsのパッケージ管理ツールの一つです。yarn.lockファイルにより、npmよりも厳密に各パッケージのインストールバージョンの固定が可能などのメリットがあります。 yarnについては別ページにて解説しています。 https://envader.plus/course/9/scenario/1085

npmに関する基礎知識

まずは、基礎知識をお伝えします。

  • JavaScriptとは
  • Node.jsとは
  • パッケージとは

JavaScriptとは

Webページなどで動的な機能（例えばブラウザ上で画面の拡大縮小をするなど）を可能にするスクリプト言語です。クライアントサイドで動作します。

クライアントサイドとは、簡単に言うと「サービスを使う側のコンピュータ」です。反対に「サービスを提供する側のコンピュータ」をサーバーサイドと呼びます。 JavaScriptはWebサーバーからの結果をブラウザ側で処理を行うため、クライアントサイドの言語です。

普段利用しているGoogleMapなどにもJavaScriptの技術が使用されており、動的なWebサイトなどを構築する上で欠かせない存在となっています。 また、似た名前でJavaがありますが、全く別の言語ですので併せて覚えておきましょう。

Node.jsとは

Node.jsはサーバーサイドで動くJavaScriptです。

先ほど クライアントサイドで動くと説明しましたが、サーバーサイドでも動作します。

クライアントサイドとサーバーサイドでは違う言語を使うことが一般的です。 ただし同じ言語で双方を構築するというメリットが大きく、サーバーサイドとクライアントサイド双方にJavaScriptを採用するといった例も昨今では多く見られます。

メリットとしては以下があげられます。

  • 処理速度が早いこと
  • メモリの消費が少ないこと

Node.jsのバージョン管理手法について

また、Node.jsはバージョン管理を行うことができます。Node.jsのバージョン管理については別ページにて解説しています。 https://envader.plus/course/9/scenario/1092

https://envader.plus/course/9/scenario/1093

パッケージとは

パッケージとは、処理やプログラムをまとめたものです。 npmにおけるパッケージは、JavaScriptの便利な機能をまとめたもの。 「プラグイン」や「モジュール」と呼ぶこともあります。

npmのinstall方法と初期設定

  • インストール方法
  • バージョンの確認方法
  • 初期設定

についてお伝えします。

npmのinstall

Node.jsをインストールすると、同時にnpmもインストールされます。

Windows,MacやLinuxなどOSにより若干の違いがあります。 Linuxの環境にnodeを導入する場合は以下のコマンドを使用します。

今回はNode.jsのバージョン16をインストールします。

# aptの更新
sudo apt update
# 外部サイトからソースをダウンロードするために使うcurlのインストール
sudo apt install -y curl
# deb.nodesource.comからnodejs ver16のセットアップをダウンロード
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - 
# build-essentialとnodejsをaptでインストール
sudo apt  install -y build-essential nodejs
# nodejsのバージョンを確認
node -v

npmのversionの確認

インストール出来たらバージョンを確認してみましょう。

npm -v

npmの初期設定(npm init)

プロジェクトの初期化を行うにはnpm initコマンドを使用します。 コマンド実行後に表示される質問に答えていくことで、npmの利用に必要な、package.jsonの設定を行うことができます。 package.jsonファイルは、カレントディレクトリに作成されます。

cd newApp #ディレクトリ移動
npm init # 初期化

(npm init実行後に質問される内容)

package name　 # パッケージの名前
version        # バージョン
description    # パッケージの説明
entry point    # 一番最初に実行されるファイル
test command   # scriptsのtestに設定されるコマンド
git repository #  gitリポジトリのURL
keywords       #  キーワード
author         #  著者
license        #  パッケージのライセンス

Is this OK? (yes)  #内容に問題なければyesと入力しEnter

後からでも修正できるため、確定している項目以外は空白のままエンターキーで進めて問題ありません。

すべての設定値をデフォルトにしておく場合は、-yオプションを指定します。

npm init -y # 質問をスキップした初期化

-yオプションを指定した場合、各項目に以下のデフォルト値が入った状態でpackage.jsonが作成されます。

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

package.jsonとは

Node.jsベースのJavaScriptアプリ開発において、npmでパッケージ／モジュール（各種フレームワークやライブラリ）を管理するために使われる構成ファイルです。

Node.jsとJavaScriptを使ってアプリケーションを開発する場合、そのプロジェクトで使用するパッケージの管理にはnpmを活用します。

npmの利用時に、アプリが依存するパッケージに関する情報（さらにはプロジェクト全体に関する情報）の記録に使用するのがこのpackage.jsonファイルです。

npm initコマンドとは

なおnpm initコマンドはpackage.jsonファイルを対話形式で作成するためのコマンドです。 そのため、npm initコマンドを割愛して、package.jsonファイルを手動で作成することも可能です。

npm init

パッケージのインストール

パッケージのインストール方法について解説します。

インストールの基本コマンド(npm install)

パッケージを新たに追加する場合は以下のコマンドを使用します。

npm install [追加したいパッケージ名]

パッケージをグローバルにインストールする

特定のプロジェクトではなく、プロジェクトを問わずによく使う可能性のあるパッケージは、-gオプションでグローバルにインストールすることができます。

npm install -g [追加したいパッケージ名]

バージョンを指定したインストール

@の後ろにバージョン(X.Y.Z)を記述し、バージョン指定を行います。

npm install [追加したいパッケージ名]@1.14.0

npm installで指定するversionについての詳細

Node.jsのパッケージのバージョンは、セマンティック・バージョニングというルールに従っています。

そのルールでは A.B.Cというように3桁の数字でバージョンが表されます。 具体的には、以下のようにルールが定められています。

A: メジャーバージョン。

後方互換性がない変更の場合にこのバージョンを上げる。

B: マイナーバージョン。

後方互換性のある変更の場合にこのバージョンを上げる。

C: パッチバージョン。

後方互換性のあるバグの修正などの場合にこのバージョンを上げる。

※後方互換性とは、新しいバージョンのものがそれより古いバージョンのものも扱えるということです。

必ずしも 3つの番号が使われるとは限りません。

  • ^（キャレット）

パッケージのバージョン番号のうち、左端の値を変更しないようなアップデートを許可するといった意味になります。書き方としては以下のようになります。

"^1.1.1"
  • ワイルドカード（x, *）

x、* をワイルドカード（任意の対象文字、ないし文字列にもマッチするもののこと）として使うことができます。書き方としては以下のようになります。

"foo": "*" // 任意のバージョンも許容する
"bar": "2.2.x" // 2.2.0以上かつ、2.3.0未満
"hoge": "17.x" // 17.０以上かつ18.0未満

開発環境のみで使うインストール

-D（—save-dev）オプションをつけるとテスト用など開発環境でのみ使うという宣言をpackage.jsonに指定することができます。

例えば以下の状況の場合‥

  • Axiosライブラリは本番環境、テスト環境どちらでも使用する。
  • prettierやeslint はテスト環境でのみ使用する

下記のようにオプションを指定しインストールを行います。

npm install axios
npm install -D prettier　eslint

パッケージのupdate方法(npm update)

パッケージのアップデートにはnpm updateコマンドを使用します。

npm update  [アップデートしたいパッケージ名]

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

npm update

インストール済みのパッケージの確認(npm list)

npm listコマンドで、一覧を確認できます。

npm list

(実行結果のサンプル)

newapp@1.0.0 /home/envader/newApp
├── husky@8.0.1
└── typescript@4.7.4

-gオプションを付けることで、グローバル環境にインストールされたパッケージも一緒に確認することができます。

npm list -g

パッケージのuninstall方法(npm uninstall)

アンインストールにはnpm uninstallコマンドを使用します。

npm uninstall  [アンインストールしたいパッケージ名]

こちらも-gオプションを付けることで、グローバル環境にインストールされたパッケージをアンインストールすることができます。

npm uninstall -g [アンインストールしたいパッケージ名]

まとめ

今回はJavaScriptやNode.js、npmなどについて説明しました。

これから、EnvaderのNode環境構築コースで学習を進めつつ、実際にご自身のパソコンにもNodeをインストールして、手を動かしてみることをオススメします。

問題を解くためには、十分な画面サイズのPC環境をご利用下さい。

次のシナリオへ進む