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

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

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

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

npmとは

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

npmに会員登録する

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

必要な情報は以下です。

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

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

npmライブラリの種類

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（偶然ですがまだありませんでした。実際にやってみたい方は試してみてください。）

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

そして以下のような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"
}

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

{
  "name": "hello-world-cli",
  "version": "1.0.0",
  "license": "MIT"
}

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

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

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

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

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

console.log('Hello World');

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

$ 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が書き換わっているはずです。

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

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

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

$ npm install --global hello-world-cli

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

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

$ hello-world-cli
Hello World

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

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

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

（偶然ですがまだありませんでした。実際にやってみたい方は試してみてください。）

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

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

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

次に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'できるようにする

公開してみます。

$ npm publish

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

$ npm install --save hello-world-script

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

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

const hello = require('hello-world-script');

hello();

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

$ node test.js
Hello World

簡単にできましたね。

まとめ

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

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

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

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