npmはNode Package Manager（ノードパッケージマネージャー）の略で、コマンドラインからJavaScriptのライブラリを簡単にインストール、管理できるアプリケーションです。
ReactもVueもAxiosもすべて、このnpmのライブラリに登録されているパッケージになります。
今日は、自作したnpmパッケージを一般に公開する方法を紹介します。npmを使ったことがない人は先にこちらの動画を見ておいてください。
なぜパッケージを自作すべきか
プログラマーのツールの大多数は無料で使えます。Reactも、Linuxもソースコードを公開してオープンソースとして社会に貢献しています。もし、アイディアがあれば、オープンソースのプログラムを公開することはサイドプロジェクトとして最適です。
また、通常、下記の行からライブラリをインポートしますが、実際にその中身がどうなっていることを知ることはとても重要になります。
// ES Modules
import myPackage from 'my-package';
// CommonJS
const myPackage = require('my-package');
GitHubのリポジトリを作成
まずはGitHubとGitを準備しましょう。使ったことがない人はこちらの動画でGitのインストールの仕方と、GitHubの使い方を説明しています。GitとGitHubはなくてもできないことはないですが、バージョンコントロールと、リポジトリの管理はプログラマーにとって必須のスキルですので是非覚えておきましょう。
この作業は後からでもできますが、リポジトリが決まっている場合は先に作っておきます。
では、GitHubに行き、リポジトリを作成します。
ここで作成（Create Repository）をクリックするとGitをinit（イニシャライズ）できるコマンドがあるのでそれらをコピペしていきます。
echo "# Asameshi" >> README.md git init git add README.md git commit -m "first commit" git branch -M main git remote add origin git@github.com:TraitOtaku/Asameshi.git git push -u origin main
ではコマンドラインから上記のラインを一行ずつコピペしていきましょう。
git push でrefsのエラーが出た場合はセキュリティ対策としてSSHキーが登録されていないと使用できないものになります。
詳しいSSHキーの登録の仕方はこちらの記事を参照してください。
npmパッケージのイニシャライズ
では、git initを行ったディレクトリ内にいることを確認して、npmパッケージのイニシャライズを行います。npmがインストールされていることを確認し下記のコマンドを実行していきましょう。
#確認のため npm --version npm init #パッケージ名を聞かれるので適当に入力 #バージョン名を聞かれるので1.0.0から始める（問題なければエンター） #description（説明）を記載 #entry pointを聞かれるのでそのままエンター #test command:今回はスキップ #git repository:
- パッケージ名を聞かれるので適当に入力
- バージョン名を聞かれるので1.0.0から始める（問題なければエンター）
- description（説明）を記載
- entry pointを聞かれるのでそのままエンター
- test command:今回はスキップ
- git repository:先ほど接続したGitHubのURLが表示されるのでエンター
- keyword:ユーザーが検索するときのキーワードを入力
- author:作成者の名前（自分の名前とか）を入力
- license:調べて入力（デフォルトでISC）
すべてを入力するとおなじみのpackage.jsonが作成されました。
途中で聞かれたエントリーポイントがnpmパッケージのメインのJavaScriptのファイルになります。
早速、index.jsを作成していきます。
もしファイル名を変更したい場合は、package.jsonの中にある”main”の対象先を編集してください。
{
"name": "asameshi",
"version": "1.0.0",
"description": "asameshicode.com sample library",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/TraitOtaku/Asameshi.git"
},
"keywords": [
"あさめし"
],
"author": "Dan Nakatoshi",
"license": "MIT",
"bugs": {
"url": "https://github.com/TraitOtaku/Asameshi/issues"
},
"homepage": "https://github.com/TraitOtaku/Asameshi#readme"
}
では、index.jsにサンプルとして、下記の行を書いてみます。ストリングが一致するとtrueを返す関数です。
function isAsameshi(str) {
return str.toLowerCase() === 'asameshi'
}
module.exports = isAsameshi
npm link
npmのパッケージができたら、コマンドラインからnpm linkのコマンドを使い{prefix}/lib/node_modules/<package>の場所にリンクさせます。シンボリックリンクといいますが、これで、npmパッケージがインストールされたかのようになり毎回ビルドをすることなくテストを行うことができます。
npm link #Linuxの場合 sudo npm link
npmパッケージのテスト
では、npm linkを行ったら、適当な場所にフォルダを作成して、テストを行います。
コマンドラインで、テストディレクトリに移動して、先ほどのasameshiパッケージのリンクをインストールします。
npm link asameshi
コマンドを実行するとnpmのnode_modulesディレクトリが作成され先ほど作成したasameshiパッケージがインポートされました。
ではコマンドラインからJavaScriptファイルを実行します。
画像のようにtrueが返ってきました。これでパッケージが問題なく作動していることが確認できましたね。
npmアカウントの作成
npmのパッケージを公開するためにはアカウントが必要になります。無料でできるので作っておきましょう。
ではnpmの公式サイトからSign Upをクリックします。
では、下記の様にアカウント情報を入力していきます。
これでnpmのアカウントが作成できました！
npmのアカウントをローカルの環境に接続
では下記のコマンドでローカルのnpmにユーザーを追加します。
npm adduser #ログインできたらこれでログインしていることを確認 npm whoami
ではEmailでワンタイムパスワードを確認してnpmにユーザーを追加しましょう。
ちなみに登録したEmailは一般に公開されるので要注意！
npmパッケージの公開
ではnpmにユーザーを追加したところで、下記のコマンドでnpmのパッケージを公開しましょう。
npm publish
これで下記の様にエラーがでなければ成功です。
ちなみに、パッケージ名がすでに取られている場合はエラーが出るので、ユニークなものにしてください。
公開したnpmを確認
では公式サイトからasameshiのパッケージを確認しましょう。
https://www.npmjs.com/package/asameshi
使い道のないパッケージが公開できました！
これで、皆さんも社会に貢献できるパッケージを公開していきましょう！
ちなみにこのライブラリを使うには下記のコマンドから使用できます。
npm i asameshi
お疲れ様です。
