初めてのNode.jsとnpm – インストールと使用方法

日付 2019年3月4日

カテゴリーチュートリアル

タグ Node.js,npm,インストール

Gutenbergのカスタムブロックの追加方法を紹介する上で、JSXが登場するため、その変換方法を紹介する必要があるだろうと思いました。「npm既に使ってるよ」って方は引き返して頂いて何の問題もありません。

npmはパッケージを管理してくれるツールで、グローバルなリポジトリにアップロードされているパッケージを引っ張ってきて、簡単に自分のパッケージ内でそのコンテンツを使用することができたり、開発環境としてのツールをセットアップすることもできたり、それらの作業を簡単なコマンドで処理可能にしてくれます。それらのパッケージのバージョンも簡単に管理することが出来るんです。

例えば、ワードプレス関連であれば、Gutenbergに関するツールもnpmを使って簡単に自分のパッケージ内に引っ張ってきて利用することができます。そしてなにより簡単。

Node.jsをインストール

「Node.js」で検索すると自分の環境にあったセットアップ方法が出てくると思いますし、ご利用されているOSやバージョンに合った方法もあるかもしれませんが、とりあえず、「Node.js」をインストールされているか確認してみましょう。

コンソール或いはターミナルを開いて、

// インストールされているNode.jsのバージョンを確認するコマンド
node -v

// 上記のコードにより出力された、インストールされているバージョン
v10.14.1

上のようにコマンドを打ってバージョンが返ってくるようでしたら、既にインストールされている環境です。

まだインストールされていないようでしたら、公式サイトでダウンロードできますから、インストーラで無難にインストールしておきましょう。ターミナルでインストールすることもできますが、環境にもよるでしょうし、バージョン毎の保証もしかねるので、とりあえず無難な方法となります。

また、上記の方法により「npm（Node Package Manger）」というツールも一緒にインストールされると思いますのでこちらもご確認ください。編集ではnpmを使っていきます。

// インストールされているnpmのバージョンを確認するコマンド
npm -v

// 上記のコードにより出力された、インストールされているバージョン
v6.7.0

npmの使用は必須ですので、両方のインストールの確認は必ず行っておきましょう。

環境のセットアップが整いましたら、関連するnpmのコマンドはパッケージのルートにて打ちますので、パッケージのルートターミナルより管理するパッケージに移動しましょう。

npmのセットアップ

Node.jsとnpmのインストールが完了した後は、管理するパッケージ毎においてnpmを初期化・セットアップします。

コマンドは

npm init

そうするとターミナル上で、パッケージとして登録する際のデータを入力するように促されますが、公開しないテストですし、ライセンスなども気にせずエンターキーを押しまくって初期化を終わらせます。

これでパッケージ内に「package.json」というファイルと「node_modules」というフォルダが生成された筈です。

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

パッケージには、公開される側で使用されるものと開発環境として使用されるものがあり、オプションを付けることでそれぞれのインストールを区別します。

基本的なコマンドは

npm install パッケージ名

という形になります。

続けてパッケージ名をスペースで区切って書くことで、一気にインストールもできます。

npm install パッケージ名1 パッケージ名2

インストール先は「node_modules」というフォルダとなっており、インストールしたモジュールは、変換時に読ませるJavaScriptで簡単に組み込むことが出来ます。

また、パッケージのバージョンなどを管理したい場合、コマンドのオプションに「–save」を加えると、初期化時に生成された「package.json」にパッケージ名やバージョンが登録されていきます。コードを変換して、公開される側でロードできるようにする開発環境で使用するツールをインストールする場合のオプションには「–save-dev」を加えましょう。

// package.jsonに保存 （dependencies）
npm install --save パッケージ名1 パッケージ名2

// package.jsonに保存 （devDependencies）
npm install --save-dev パッケージ名1 パッケージ名2

また、オプションに「-g」を付けることで、使用する端末のグローバルな場所にインストールすることも出来ます。

逆にアンインストールする場合のコマンドは、

npm uninstall パッケージ名1

のように書きます。

具体例「Babel」

使用例の一つとして紹介する「Babel」は、JavaScriptのコードをあらゆるブラウザ環境に適用させるために、標準的なJavaScriptコードに変換させるための開発環境で使用するツールです。

npm install --save-dev babel babel-cli

と打ち込むと、「Babel」のパッケージと「Babel」のコマンドラインツールをインストールされます。

「package.json」ファイルの「devDependencies」にパッケージ名とバージョンが追加されていることが確認できるはずです。

また、「node_modules」でもインストールされたパッケージがフォルダ毎に分けてインストールされ、各パッケージが依存するパッケージを自動でインストールしてくれます。

インストール後は「babel ファイル名」のようなコマンドでファイルを変換してくれるようになるんですよ。

スクリプト

最後はスクリプトの登録です。

先程のBabelにしてもそうですが、変換処理するために毎回「babel ファイル名オプション」だったり「webpack –watch –env…」などの文字列を打つのは面倒ですが、こういったコマンドを任意のキーワードに関連付けて保存することが出来るんですよ。

そして、処理したい時はそのキーワードと一緒に以下のコマンドを入力するだけです。

npm run キーワード

こうするためには「package.json」を開いて、「scripts」というキーに配列が登録されていると思いますが、そこにキーワードとコマンドを登録することで使用可能となります。

最初は「test」というキーにコマンドが登録されていると思いますので、

npm run test

と入力してみてください。

ターミナル上で「test」に登録されたコマンドが処理される筈です。

{
  ...,
  "scripts": [
    "test": "",
    "キーワード1": "コマンド1",
    "キーワード2": "コマンド2",
    ...
  ],
  ...

}

こんな感じで登録していきます。

このようにして頻繁に使用するコマンドを予め登録しておくと作業が非常に楽になりますよ。

コマンド「npx」

また似たようなコマンドが出てきましたが、こちらはローカルにインストールされたパッケージのコマンドを使用するコマンドです。

オプション「-g」を付けずにインストールされたパッケージに該当し、グローバルにインストールされていない場合は「npx コマンド」とすることでスクリプトを読ませることが出来ます。

npmの簡単なまとめ

npm init（初期化）
npm install/uninstall package（パッケージのインストール）
npm run key（登録コマンド処理）

とりあえず、基本のこれだけ覚えておけば十分でしょう。使用するパッケージなどの依存関係がはっきりした後、自分でパッケージやコードなどを継ぎ足して開発環境を整えていってください。

利用するツールにもよるかもしれませんが、コードの編集に伴い自動生成する環境をセットアップしてしまえば作業に専念できますよ。僕は今の所「webpack」と「gulp」を使ってます。

あと、アーカイブには「node_modules」フォルダを含まないようにしましょう。公開される側で出力されるコードも、開発ツールによりインクルードして生成されるファイルを出力することを前提としている場合が殆どだと思いますので、CSSやJavaScriptなどでしたら、僕も使用している「webpack」や「gulp」を一度検索してみてください。