コマンド操作でパッケージ管理ツール「npm」を使ってみよう！

はじめに

こんにちは、かずん(@kazoonLab)です。

前回の記事では、パッケージ管理ツール「npm」についてとインストール方法にについてご説明しました。

blog.mimipen.net

今回の記事では、npmを使ってパッケージをインストールし、コードの中で使ってみようと思います。

この記事を読むと、コマンドを使用したパッケージのインストール方法とその使い方がわかるよ！

こんな人に読んで欲しい

・JavaScript勉強したての方

・Webアプリケーションを作ってみたい方

・パッケージを使ってみたい方

はじめに
パッケージインストールの準備
パッケージを実際に使ってみよう
package.jsonの使い方
まとめ

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

npmをインストールしたら、まずはパッケージをインストールしてみましょう。

まず作業フォルダを作り、ターミナルでその中に移動しましょう。

今回は、フォルダ名をテストとしています。

cd test

移動したら、プロジェクトの初期化(package.jsonの作成)を行います、package.jsonについては後ほど説明します。

下記コマンドで、プロジェクトを初期化しましょう。

npm init

コマンドを叩くと以下のことを聞かれるが、全てenterキーでパスできる。

package name: (test) test
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC)

最後にこのようなことを聞かれたら、「yes」を入力します。

About to write to /Users/.../package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

全て完了すると、package.jsonというファイルが生成されているかと思います。これでパッケージインストールの準備ができました。

パッケージを実際に使ってみよう

では、パッケージをインストールして実際に使用してみましょう。今回インストールするのは、コマンドラインで色をつける「chalk」というパッケージです。 www.npmjs.com 先ほどと同じディレクトリで、以下のコマンドを入力します。

npm install -D chalk

-Dをつけることで、そのフォルダの中でのみインストールさせることができます。-Dの代わりに-gをつけることでパソコン本体にインストールすることもできますが、ごちゃごちゃになる(環境を汚してしまう)ため、-Dをつけてインストールしましょう。

コマンドを入力すると、作業フォルダの中身が以下のようになったかと思います。

test
└node_modules
└package-lock.json
└package.json

node_modulesは、パッケージそのものが入っているフォルダです。この中に入っているパッケージをrequireやimportすることで、コードの中で使うことができます。

テスト用に、test.jsを作成します。

touch text.js

「npmスクリプト」でパッケージを動かせるように、package.jsonに追記します。

{
(省略)
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "chalk": "node test.js"
  },
(省略)
}

「npmスクリプト」とは、スクリプトをタスクランナーのように実行できるnpmの機能です。「npm run (好きな名前)」で、複雑なコマンドにも名前をつけて簡単に実行させることができます。

今回は、chalkを試すためのJSファイルを実行するコマンドに、「chalk」という名前をつけています。

次にtest.jsを開いて、以下のように編集します。

const chalk = require('chalk');
console.log(chalk.bgRed('テスト'));

ここで注目してほしいのは、require('(パッケージ名)')でパッケージそのものを呼び出し、変数に代入していることです。

変数に代入することで、パッケージで使えるメソッド(今回だとbgRed)を使えるようになります。

JSファイルを編集したら、早速ターミナルで試してみましょう。以下のコマンドを入力します。

npm run chalk

console.log()内に書いた文字が、赤背景で表示されたら成功です！

package.jsonの使い方

現在のpackage .jsonを開くと以下のようになっているかと思います。インストール時と比べると、追記したscriptsと、新たにdevDependenciesが書き換わっています。

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "chalk": "node test.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chalk": "^3.0.0"
  }
}

先ほどnpm installした時はパッケージ名を指定していましたが、package.jsonがある状態でnpm installすると、package.jsonに記載のあるパッケージをまとめてインストールしてくれます。

Webアプリなどを作ってGitサービスに公開する時、先ほど紹介したnode_modules(パッケージの実態)もリモートにあげてしまうと、容量がとてつもなく大きくなってしまいます。なので通常は、.gitignoreにnode_modulesを記載し、package.jsonをgitにpushします。git cloneした後に、各々にnpm installしてもらうことで、node_modulesフォルダが生成され、それぞれの環境でアプリを動かせるようになります。

まとめ

今回は、パッケージ管理ツールの実際の使い方と、package.jsonの使い方についてご説明しました。

今回の内容でところどこと出てきた内容は、実は結構重い内容だったりします。npmでできることに関してもっと深い内容を、今後の記事でご紹介していければと思います！

この記事がいいなっと思ったら読者登録をお願いいたします！

【ツイッターでは主に、仕事や技術系の内容をつぶやいています】技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)