インターネット上には、便利なリソースが数多く配布されています。
例えば、JavaScriptフレームワークCSSのライブラリHTMLのテンプレートなど…。

そのようなリソースの配布先では、大抵GitHubのリポジトリのURLか、次のようなコマンドが書かれています。

npm install [ツール名]

「一体、これはなんだ?」
そう思われている方も多いのではないでしょうか。

今回は、新人Webデザイナーでもポイントを押さえれば今日から活用できる、npmについて概要から便利な使い方までをご紹介します。

npmとは?

npm.jpeg

npmとは、「Node Package Manager」の略で、その名の通りNode.jsのパッケージを管理するためのシステムのことです。
ここでいうパッケージとは、JavaScriptプラグインやモジュールのことです。

便利なツールは公式サイトやGitHubからダウンロードして使うことが多いかもしれません。
しかし、npmをインストールしておけば、簡単なコマンドを入力するだけでダウンロードからインストールまでワンストップで行うことができます。

npmの使い方

Node.jsのインストール

nodejs.jpeg
https://nodejs.org/en/

Node.jsは、一言でいえばサーバーサイドで動くJavaScriptです。
上記のページで、ダウンロードを行うことができます。

もちろんパソコンにインストールして立ち上げることもできますが、サーバーに命令するのと同じでコマンドを使って命令を出していきます。

nodeinstall.png

Node.jsは1分程度でインストールが完了します。
npmも自動的にインストールされます。

インストールされているかの確認

Node.jsがインストールされているかを調べるには、ターミナルを起動して、次のコマンドを入力します。

node -v

これで、インストールされているNode.jsのバージョンが表示されていたらインストール成功です。
同じく、下記のコマンドを入力してみましょう。

npm -v

これで、インストールされているnpmのバージョン情報が表示されれば、npmも無事にインストールされています。

フロントエンド関連で覚えたい2つのコマンド

monitor.jpeg

実は、Node.jsを使えばさまざまなことができるのですが、npmの基本的な使い方をマスターするだけでも生産性が上がるでしょう。
ターミナルにコマンドを打つことで命令を実行していきます。
新人Webデザイナーとして覚えておきたいコマンドは、次の2つです。

1. npm init

「npm init」とは、簡潔にいえば「このディレクトリをnpmの管理下に置く」という命令です。

まず、ターミナルを起動して、必要な場所に移動します。
移動する際には、「cd」というコマンドを使います。
ここでは分かりやすくデスクトップに移動してみましょう。

 cd Desktop

次に、デスクトップに「test」というフォルダを作成してみます。
フォルダの作成には、「mkdir」というコマンドを使います。

mkdir test

そして、再度「cd」コマンドでtestに移動し、次のコマンドを実行します。

npm init

これで、このフォルダの中にパッケージをインストールする準備ができました。
このフォルダの中には、「package.json」と呼ばれる、パッケージに関する情報などを格納するファイルが自動的に生成されます。

2. npm install

「npm install」とは、「このフォルダに次のパッケージをnpmリポジトリからダウンロードし、インストールしなさい」という命令です。

initで初期化したフォルダの下で、例えば次のようなコマンドを入力します。

npm install jquery

これで、jQueryがインストールされました。

ちなみに、「save」オプションをつけて実行することで、package.json内にどのパッケージを取ってきたのかを記述することができます。
ここに記述すると、あとでビルドを簡単に行うことができます。

$ npm install jquery --save

これを実行すると、package.json内に次のような記述が追加されます。

{
  "dependencies": { "jquery": "^2.1.3" }
}

以後、dependencies内に入ったパッケージは、npm installだけで自動的にインストールすることができるようになります。

npmを使うメリットとは?

code.jpeg

npmを使うメリットはどこにあるのでしょうか。
ダウンロードして使う場合と、どのような違いがあるのでしょうか。

1. インストール・アンインストールが簡単

先ほど見てきたように、*「npm install」というコマンドを実行するだけで、パッケージを簡単にインストールすることができます。
逆に、
「npm uninstall」*というコマンドを実行すれば、アンインストールも行ってくれます。

2. オープンソースにしやすい

もともとnpmは、パッケージのコードを複数のプログラマでオープンソースで管理できるように作られたものです。
したがって、さらにnpmのことを勉強して使いこなすことができれば、既存のパッケージだけでなく、自分で制作しているコードもチームで共有しながら開発を行うことができます。

3. 使えるパッケージが豊富

2017年2月1日現在、使えるパッケージの数は40万を超え、実に7万人以上ものプログラマーがパッケージ提供に貢献しています。
逐一便利なパッケージを探してくるよりも、npmを使ってパッケージを操作したほうが簡単ですね。

まとめ

Webデザイナーを始めとする非エンジニアの場合は、Node.jsやnpmの細かい機能については必要ないことの方が多いでしょう。
しかし、使いたいプラグインを管理したりインストールしたりする、といった使い道であれば、知っていて損することはありません。

その他のコマンドなど、さらに詳しい内容が知りたい方は、公式ドキュメントをご覧ください。