Node.js と npm の使い方(その1:概要)

この記事は最終更新日から 6年以上 が経過しています。

最近の Web 界隈では、UX を高めるために、UI を JavaScript でガリガリ実装するというのが普通になってます。 フロントエンドエンジニアなんていう職種が生まれるほど、この界隈は活発です。 そこでフロントエンド開発でほぼ必須となるであろう Node.js と npm について少しまとめてみます。 今更感がすごいですが。。

Node.js とは?

nodejs_thumb.png

Web 開発をしている方ならご存知だと思いますが、 JavaScript は Chrome や Firefox などの Web ブラウザに読み込ませると実行してくれますよね。 これは、Web ブラウザの中に JavaScript を解析し実行してくれる機能が含まれているからです。 では、Web ブラウザ上ではなく、PC やサーバー上で JavaScript を実行する場合はどうすれば良いでしょうか?

JavaScript はスクリプト言語なので、JavaScript ファイルそれだけでは動作しません。 JavaScript 解析し、実行してくれる"何か"が必要です。 その"何か"が Node.js です。簡単に言えば JavaScript を動かすための環境です。 Node.js に JavaScript を読み込ませると、Node.js が JavaScript を解析し実行してくれます(正確に言えば Node.js の中の JavaScript エンジンが行います)。

Web ブラウザ上ではなく、PC やサーバー上で JavaScript を実行するためには、 PC やサーバー上に Node.js をインストールし、 その Node.js 上で JavaScript を実行するという流れになります。

インストール

Node.js インストールするには公式サイトからインストーラーをダウンロードして行います。 LTS(Long Term Support。つまり安定版)と、最新版の2種類があります。 Node.js はバージョンによる差がそれなりにあり、バージョンが違うと後述のパッケージなどが正しく動かなくなることがあるので、お仕事で使用する場合は、バージョンをきちんと合わせておきましょう。 どっちが良いかわからない場合はLTSを選んでおくと無難です。

install.png

使い方

Node.js をインストールすると、コマンドプロンプトで node コマンドが使えるようになります。 Node.js で JavaScript を実行するには、対話形式(REPL。1行1行入力していく形式)や、ファイルを読み込ませる形式などいろいろあります。 詳しくは node コマンドのヘルプを表示してみましょう。

ヘルプ

node -h

対話形式(REPL。1行1行入力していく形式)

node
もしくは
node -i
出力内容
>

終了させるには Ctrl + C を2回、もしくは .exit と入力します。

コマンド引数で入力する形式

node -e "console.log('Hello, world!')"
出力内容
Hello, world!

ファイルを読み込ませる形式

node example.js

シンタックスチェック(構文チェック)

node -c example.js

npm とは?

npm_thumb.png

Node.js には、世界中のエンジニアが作成してくれたツール(パッケージ)を追加することで、機能を追加することができます。 例えば、JavaScript を綺麗に整形したり、最小化(minify/uglify)したりすることも、それを行うパッケージを追加すれば簡単に行うことができます。

npm は Node Package Manager の略で、Node.js 上で動作するパッケージを管理するためのツールです。 大抵のパッケージは、別の特定のパッケージの特定のバージョンに依存しているのですが、 npm はそれらパッケージの依存関係を考慮してインストールやアンインストールを行ってくれます。

npm は Node.js をインストールすると最初から含まれています。コマンドプロンプトで npm と打つと実行できます。

ローカルパッケージとグローバルパッケージ

npm でパッケージをインストールする際には2つの方法があります。 使った方法によってパッケージがインストールされるディレクトリが異なります。 npm コマンドを実行したディレクトリにインストールするローカルパッケージと、共通のディレクリにインストールするグローバルパッケージです。 例えばプロジェクトごとに使っているパッケージが違う場合は、ローカルパッケージでそれぞれのプロジェクト専用のディレクトリへインストールした方が便利でしょうし、 プロジェクトにかかわらず共通で使いたいパッケージはグローバルパッケージでインストールした方が便利でしょう。 ちなみにインストールしたパッケージは node_modules という名前のディレクトリに保存されます。

ローカルパッケージのインストール、アンインストール

npm install <package_name>
npm uninstall <package_name>

グローバルパッケージのインストール、アンインストール

npm install -g <package_name>
npm uninstall -g <package_name>

package.json と package-lock.json

複数人で開発をしている場合など、全員が同じパッケージを1つ1つインストールして環境をそろえるのは大変です。 そこで、package.json と package-lock.json を使用すると、全てのパッケージを一度にまとめてインストールすることができます。

package.json

package.json は インストールするパッケージの一覧が記載されたファイルです。 大抵のパッケージは別のパッケージに依存していますが、その全てのパッケージを手で記載していく必要はありません。 それらの依存パッケージは npm が自動でインストールしてくれるので、このファイルには本当に必要なパッケージのみを記載します。

このファイルは、手動または npm init コマンドで作成する必要があります。

npm init

package-lock.json

package-lock.json は package.json ととても良く似たファイルですが、 実際にインストールされる(された)全てのパッケージの一覧が記載されているという点が異なります。 このファイルは npm によって自動生成されるので手動で作成する必要はありません(というかきっとできません)。

パッケージはインストールされるタイミングによって、インストールされるバージョンが異なる場合があります。 例えば、Aさんがインストールした後に、パッケージがバージョンアップされ、その後にBさんがインストールしたというような場合は、 AさんとBさんの使っているパッケージは微妙に異なってしまいます。 そこで、Aさんがインストールした時点の全てのパッケージの一覧を使ってBさんがインストールすると、AさんとBさんは完全に同じ環境が作成できます。 package-lock.json は、環境を固定化(lock)させるためのファイルです。

--save-prod と --save-dev

パッケージには、開発環境のみに必要で、本番環境などでは不要なものがあったりします。 そこで package.json にそれぞれ別々に記載することができます。 常に必要なパッケージは dependencies 、開発時に必要なパッケージは devDependencies に記載します。

package.json
{
	"name": "example",
	"version": "1.0.0",
	"dependencies": {
		"imagemin": "^5.3.1"
	},
	"devDependencies": {
		"js-beautify": "^1.7.5"
	}
}

--save-prod--save-dev はパッケージをインストールする際のオプションです。 このオプションをつけると、パッケージをインストールした際に自動で package.json に追記されます。

ローカルパッケージをインストールして、package.json の dependencies に追記

npm install --save-prod <package_name>
# --save-prod オプションは省略可
npm install <package_name>

ローカルパッケージをインストールして、package.json の devDependencies に追記

npm install --save-dev <package_name>

ローカルパッケージをまとめてインストール

npm install

ローカルパッケージのうち開発時のパッケージ(devDependencies)を除いたものをまとめてインストール

npm install --production

参考サイト

関連記事

前回、「Node.js と npm の使い方(その1:概要)」の続きです。今回はパッケージの更新についてです。パッケージの最新化npm でインストールした各パッケージですが、インストールした後にバグフィックスや機能追加などが行われて、パッケージが更新されている可能性があります。そこで、インストールされているパッケージを ...
前回、「Node.js と npm の使い方(その2:パッケージの更新)」の続きです。今回は npm-scripts についてです。npm-scripts とは?npm で 使用している package.json にスクリプトを定義しておくと、npm コマンドからそのスクリプトを実行できるというものです。npm では各 ...
前回、「Node.js と npm の使い方(その3:npm-scripts)」の続きです。今回は npm にたくさんあるコマンドのうち、便利そうなコマンドを紹介します。npm ci コマンドnpm install コマンドではパッケージの依存関係などを確認しパッケージがインストールされていましたが、テストプラットフォ ...
最近のアプリケーションは開発効率を上げるために大量のライブラリを組み合わせて作成することが多くなっています。そういった状況下では、たった1つのライブラリがバージョンアップすることで、そのライブラリに依存している他のライブラリが正常に動作しなくなり、やがてアプリケーション全体が正常に動作しなくなるというような状況に陥りま ...

記事検索

最新記事

人気記事

RSSフィード

フィードバック

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

匿名でフィードバックする
匿名でフィードバックする

要望などあれば、お気軽にどーぞ。 不具合やバグを発見した場合も、連絡をいただけると助かります。

なお、このフォームから入力された内容について、管理者から返信はできませんので注意してください。 もし、管理者からの返信が必要であれば、X(旧 Twitter) もしくは、お問い合わせより、お願いします。