自己紹介

じゅんじゅんです。フロントエンドエンジニアです。

HAL大阪の4年です。

イベントによくいます！いまは東京にいるのでぜひお声掛けください！！

T.Rexと言えば...

この前wordの新機能でなにかと話題になりましたね。

なんかこれいるんか！！
謎い
おもしろwwwww

など、色々な感想が飛び交っていました。知らない人はこちら

そして、月日は流れ僕のアドベントカレンダーが回ってくるわけです。

じゃあやることは一つしかなく。

webでやろ

ってことでライブラリ書きました。

使い方は簡単でnpmやyarnで t-rex-web っていうpackageをinstallすればいいです。

もしくはHTMLに

<script src="https://raw.githubusercontent.com/konojunya/t.rex-web/master/lib/t-rex.js"></script>

とかけば、動きます。（いつかCDNサービスにあげます）

僕は、暴れまわるより昔の懐かしいマウスに付きまとってくるやつやりたかったんですよね...

なので、マウスのポインターに付いてきます。

このライブラリ何がすごいって、依存パッケージないんですよね（当たり前）

Qiitaのネタ的にはこのライブラリの紹介をしたいんじゃなくてnpmに自分のパッケージをあげるのをどうやるかを説明したいと思います。

自作ライブラリ、世の中に公開していこ

stepとしては3つぐらいです。

npmjsに登録する
ライブラリ書く
publishする

だけです。

順番にやっていきましょう。

1. npmjsに登録する

まずpublishする人を登録しないといけません。

https://www.npmjs.com/ で自分のアカウントをつくってください。

作ったら手元のパソコンのterminalとかで

$ npm adduser

としてください。するとユーザー名とパスワード聞かれるので打ち込みます。パスワードを打つときは何もterminalには反映されませんがセキュリティのためそうなっています。気にせずうちきってください。

これで1つ目は終わり。

2. ライブラリ書く

では実際のライブラリを書いて行きましょう。今回はwebブラウザで動作させることを前提にします。

node.jsとかで動かしたい場合、 package.json の bin ってとこを埋めないといけないのでぐぐってみてね。

まず、 package.json を作ります。npmであれば

$ npm init -y

yarnであれば

$ yarn init -y

で、初期の形のpackage.jsonが作成されます。

風習っぽいのとして、実際のライブラリのコードは lib/ に書くのが多いっぽいです。

なので、実際のライブラリのコードは lib/my_lib.js などに書いてみます。

lib/my_lib.js

(function() {
  console.log("This is My Library!!")
})()

function で即時関数にしているのは、この中で作った変数のスコープを止めるためです。

ライブラリインストールして使うときになって、グローバル環境の変数が汚染されてたら嫌ですよね。僕は嫌です。

ではproject直下に index.js を書いてみます。

index.js

const lib = require("./lib/my_lib.js")
module.exports = lib;

このindex.jsを import すると、 lib/my_lib.js が読み込まれるように書いておきます。

最後に package.json の main フィールドに　 index.js と書いておきます。

{
  "name": "my-lib",
  "version": "0.0.1",
  "name": "index.js"
}

ここまでできたら最後、このライブラリを公開する設定をします。

package.json の private というフィールドを false にします。これで準備が整いました。

3. publishする

いよいよ自分のつくったものを世の中に公開するわけですが、コマンドを実行するだけです。

$ npm publish

これだけで、npmjsに自分のライブラリが公開されます！！！！

ここで注意点があって、 package.json の name が自分のライブラリ名になるんですが、npmjsに同じ名前のライブラリがあるとpublishできません。

ライブラリの名前を変えるか、自分のアカウント名をいれます。

@konojunya/mylib みたいな感じです。

このライブラリ名には、ハイフンか英数字しか使えなかった気がします。（間違えてたらすいません）

これであなたも一人前のエンジニアですね！

あとがき

おもったより簡単にかけることがわかったのではないでしょうか。

どんどん公開して、PRくれぇ〜〜って叫びましょう。

Author: @konojunya