2015年にpublishしたnpm modules
TRANSCRIPT
2015年に PUBLISHしたNPM MODULE
2016/01/08 Gotanda.js #2 @mizuki_r
PROFILE
@MIZUKI_R
Twitter: @mizuki_r Github: ry_mizuki npm : mizuki_r
Angular, RiotJSまわりの使い手.
最近はフロントエンドのアーキテクチャを考えることが多い.
PUBLISHED ON 2015INTRODUCE FOR NPM MODULES
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
2015年にPUBLISHしたNPM MODULE一覧
▸ hariko
▸ angular-period
▸ action-tracker
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
デビューして半年経ってないひよっこです
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
どんなライブラリを公開したか、
公開してどうだったかをつらつら語ります
hariko
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
HARIKO
▸ https://www.npmjs.com/package/hariko
▸ API-Blueprintのドキュメントに従って、APIモックサーバーを立ち上げる
▸ 「張り子」が名前の由来
▸ stubcellとeasymockの良い所を拝借してソースをAPI-
Blueprintにした
▸ 他のモックサーバになかった「やりたいこと」を詰め込んだ
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
HARIKO
# GET /api/message + Response 200 (text/plain)
{“content”: “message”}
$ npm install -g hariko $ hariko -f docs/api/message.md [INFO] Running Hariko Server ... http://localhost:3000 $ curl http://localhost:3000/api/message {“content”: “message”}
angular-period
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
ANGULAR-PERIOD
▸ https://www.npmjs.com/package/angular-period
▸ 期間を指定すると、現在日時の「過去」「現在」「未来」のパターンでDOMを出し分けるAngularJSのDirective
▸ そういう仕様で実装した際に「これ他でも使えるな」と思って外出しした
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
ANGULAR-PERIOD
angular.module('campaign', ['angularPeriod']);
<div class="campaign" ng-period ng-period-start="'2016-01-08T19:30:00'" ng-period-end ="'2016-01-08T23:59:59'"> <!-- 期間前の表示 --> <div ng-period-when="previous"> <p>五反田JS開催するよ！</p> <!-- 期間中の表示 --> <div ng-period-when=“during”> <p>絶賛LT中！</p> </div> <!-- 期間後の表示 --> <div ng-period-when="after"> <p>ブログを書くまでがごたじぇー！</p> </div> </div>
action-tracker
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
ACTION-TRACKER
▸ https://www.npmjs.com/package/action-tracker
▸ Google Analyticsのラッパー
▸ Promiseで処理できたりする
▸ もともとはトラッキングの汎用的なI/Fを目指していたんだけど、たどり着かずにただのラッパーになった
▸ 機会があればそういう感じにするかもしれない
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
ACTION-TRACKER
<script src="dist/action-tracker.min.js"></script> <script> ga('create', {YOUR PROPERTY ID}) </script> <script> var tracker = ActionTracker()
$('a[data-tracker]').on('click', function () { tracker.emit('anchor', 'click', $(this).text()) }) </script>
PUBLISHINGRECONSIDERATION ABOUT
GITHUBに上げたが、 PUBLISHしていないもの
RECONSIDE RATION ABOUT PUBLISHING
GITHUBに上げたが、PUBLISHしていないもの
▸ 途中で飽きた
▸ 作ってみたけど、別に使わないや
▸ もっといいものを見つけた
▸ とりあえずやり始めることが大事
GITHUBに 上げるメリット
RECONSIDE RATION ABOUT PUBLISHING
GITHUBに上げるメリット
▸ travis-ciや各種badgeなどの便利ツールが使いやすい
▸ 「こんなのを書いてるんだぜ」っていう紹介ができる
▸ 新しい技術に挑戦するだけする
▸ とりあえずやり始めることが大事
NPMに 上げるメリット
RECONSIDE RATION ABOUT PUBLISHING
NPMに上げるメリット
▸ `npm install` で入れやすい
▸ あっちこっちで使える、使いやすくなる
▸ 使ってもらいやすくなる
▸ 気合入れて作るようになる
▸ 気づいたらいい感じにinstallが伸びてる（かもしれない）
反省点
RECONSIDE RATION ABOUT PUBLISHING
反省点▸ issueに気づかない事があった
▸ こまめにgithubチェック
▸ 自分が使わなくなると放置しがち
▸ issue待ち
▸ blogとかでshareしないと気づいてもらえない
▸ blog書こう
全体を通して
RECONSIDE RATION ABOUT PUBLISHING
全体を通して▸ 業務とは異なる運用で知見が広がった
▸ version, changelogの運用
▸ badgeを利用したクオリティ維持
▸ DL数やStar数が増えるとモチベが上がる
▸ 普段と違うコトをカジュアルに試せてイイ
▸ 「npmに上げるぞ！」って思うとなんか気合はいる
2016ASPIRATIONS OF
ASPIRATIONS OF 2016
2016年の抱負
▸ 「縁」があればどんどんpublishしていくつもり
▸ しかしコードを書くより設計を考える方が楽しい最近
▸ 作りたいものがあったら作るし、他の人に使ってもらいたいなって思ったら公開する
よろしくお願いします。2016年も…