インターネット上には、便利なリソースが数多く配布されています。
例えば、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だけで自動的にインストールすることができるようになります。