本当にやさしいnpmライブラリ開発入門

この記事ではJavaScriptで実際にnpmライブラリを開発し公開するところまでを説明します。

いわゆる「Hello World」記事です。

一人でも多くの方がnpmライブラリ開発で幸せになることを目的としています。

## npmとは

[Node.js](https://nodejs.org/ja)のパッケージマネージャーです。
`npm install` や `yarn` などを実際にコマンドから実行したことがある方なら、この記事はすらすらと読めると思います。

## npmに会員登録する

<https://www.npmjs.com/signup>

上記URLから会員登録できます。

必要な情報は以下です。

| 項目 | 内容 |
| --- | --- |
| Full Name | お名前 |
| Public Email | 公開メールアドレス |
| Username | ユーザー名 |
| Password | パスワード |

あとは流れに沿ってログインまでできればOKです。

「公開メールアドレス」「ユーザー名」「パスワード」はあとで必要になるので覚えておきましょう。

## npmライブラリの種類

「npmライブラリに種類があるって？」

もちろん明確に種類があるわけではありませんが、「ライブラリを公開する」にあたって以下のどれに当てはまるかは意識しておくといいでしょう。

- コマンドラインツール系npmライブラリ
    - その名の通りコマンドとしてコンソールから直接実行できるもの
- スクリプト系npmライブラリ
    - `require('xxx')` や `import xxx from 'xxx'` のようにスクリプトで読み込んで利用するもの
- またはその両方

## npmライブラリ開発の前準備

npmライブラリを公開するにはコンソールでログインした状態で公開する必要があります。

```bash
# お好きなコンソールでログインしてみましょう
# 先ほど会員登録した情報を入力します
$ npm login

# ログインできたか確認するには、以下を実行します
# 自分のnpmユーザー名が表示されれば、ログイン成功です！
$ npm whoami
```

これでnpmライブラリ開発の準備は整いました。

が、もう一つ先に決めておくことがあります。

## ライブラリの名前を決める

npmライブラリは世界中でたった一つの名前にしなければなりません。
半角英数字およびハイフンで名前を決めます。

決めた名前がnpmにすでに公開されていないか調べるには、例えばブラウザで以下のようなURLを入力します。

<https://npm.im/ライブラリ名>

ブラウザのURLバーに「npm.im/ライブラリ名」と入力すれば良いわけです。
本家サイトへリダイレクトしてくれます。

それでは名前が決まったとして、世界でたった一つのnpmライブラリを、実際に開発してみましょう。

## コマンドラインツール系npmライブラリの開発

コンソールから実行したら「Hello World」と表示されるnpmライブラリを開発してみます。
ここでは「hello-world-cli」という名前のnpmライブラリを開発してみます。

（偶然ですがまだありませんでした。実際にやってみたい方は試してみてください。）
<img width="430" alt="404-hello-world-cli.png" src="https://qiita-image-store.s3.amazonaws.com/0/32464/7a7d060e-8bd7-bbd7-3ece-4f6ac67c027e.png">

`npm init`とコンソールで実行すると、色々と質問されるのでそれに答えましょう。

| 質問 | 回答 |
| --- | --- |
| package name | hello-world-cli |
| version | 1.0.0（何も入力せずEnter） |
| description | （何も入力せずEnter） |
| entry point | index.js（何も入力せずEnter） |
| test command | （何も入力せずEnter） |
| git repository | （何も入力せずEnter） |
| keywords | （何も入力せずEnter） |
| author | （何も入力せずEnter） |
| license | MIT |

そして以下のような`package.json`が生成されますが、

```json:package.json
{
  "name": "hello-world-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}
```

以下のように綺麗にします。

```json:package.json
{
  "name": "hello-world-cli",
  "version": "1.0.0",
  "license": "MIT"
}
```

今回は「コマンドラインツール系npmライブラリ」なので、以下のように`bin`プロパティを指定します。

```json:package.json
{
  "name": "hello-world-cli",
  "version": "1.0.0",
  "bin": {
    "hello-world-cli": "index.js"
  },
  "license": "MIT"
}
```

もうお分かりかと思いますが、以下のようにコンソールで実行する名前は自由に決められます。

```json:package.json
{
  "name": "npmライブラリの名前",
  "bin": {
    "コンソールで実行するコマンドの名前": "実行するJavaScriptへの相対パス"
  }
}
```

では`index.js`を作成してみます。

```js:index.js
console.log('Hello World');
```

公開してみましょう。
コンソールで以下のコマンドを実行します。

```bash
$ npm publish
```

公開できたか、URLで確認してみましょう。
<https://npm.im/hello-world-cli>

次に、npmライブラリのバージョンアップ（更新）をしてみましょう。
npmライブラリのバージョンを上げるには、`package.json`の`version`プロパティの値を増やせば良いだけです。

ただしnpmには以下のような専用のコマンドが用意されています。

- `npm version patch`
- `npm version minor`
- `npm version major`

例えばバージョン`1.2.3`において、patchバージョンは`3`、minorバージョンは`2`、majorバージョンは`1`になります。

awesomeな変更を加えたとして、`npm version major`を実行してみましょう。
以下のように`package.json`が書き換わっているはずです。

```json:package.json
{
  "name": "hello-world-cli",
  "version": "2.0.0",
  "bin": {
    "hello-world-cli": "index.js"
  },
  "license": "MIT"
}
```

それでは、これを公開してみましょう。
`npm publish`っと。

最後に、実際に自分が作成したコマンドラインツール系npmライブラリをインストールしてみましょう。

```bash
$ npm install --global hello-world-cli
```

`--global`オプションは、特にコマンドラインツール系npmライブラリを「どこでも」実行できるようにするために必要です。

実際に以下のように実行してみます。

```bash
$ hello-world-cli
Hello World
```

無事「Hello World」が表示されましたね！

## スクリプト系npmライブラリの開発

JavaScriptファイルから`require('npmライブラリ名')`または`import xxx from 'npmライブラリ名'`で読み込めるnpmライブラリを開発してみます。
ここでは「hello-world-script」という名前のnpmライブラリを開発してみます。

（偶然ですがまだありませんでした。実際にやってみたい方は試してみてください。）
<img width="423" alt="404-hello-world-script.png" src="https://qiita-image-store.s3.amazonaws.com/0/32464/9173cb93-c1ca-5ab1-882a-11d6fece953a.png">

「コマンドラインツール系npmライブラリ」と同様に、まずは`package.json`から作成します。

```json:package.json
{
  "name": "hello-world-script",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}
```

スクリプト系npmライブラリでは、`main`プロパティにファイルを指定することに注意してください。

次に`index.js`を開発してみます。

```js:index.js
function hello() {
  console.log('Hello World');
}

module.exports = hello; // require('hello-world-script')できるようにする
module.exports.default = hello; // import xxx from 'hello-world-script'できるようにする
```

公開してみます。

```bash
$ npm publish
```

別の作業場所で、インストールして使ってみます。

```bash
$ npm install --save hello-world-script
```

`--save`オプションを指定すると、その作業ディレクトリにある`package.json`の`dependencies`プロパティに`hello-world-script`が追加されます。

`test.js`というファイルを作成してみます。

```js:test.js
const hello = require('hello-world-script');

hello();
```

`test.js`を実行してみます。

```bash
$ node test.js
Hello World
```

簡単にできましたね。

## まとめ

npmライブラリ開発の入門記事として、一番簡単と思われる手法で2種類のnpmライブラリを開発してみました。

とても簡単と思えた方は、是非いろいろなnpmライブラリ開発を実際にやってみてください。

（もし公開したら、例えばこの記事のコメント欄に報告してくださるととても喜びます。）

それでは、良いJavaScriptライフを！