レイズソフトウェア

Node.js と npm 再入門

はてなブックマーク
2017/12/24 08:07:07

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

Node.js とは?

nodejs.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.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 に記載します。

{
	"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

参考サイト

関連記事