2015年にpublishしたnpm modules
?
0 likes?720 views
2016/01/08に開催された「GotandaJS #2 ?JS新年会?」での発表資料です
![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”}](https://image.slidesharecdn.com/2016-01-08-160107133947/85/2015-publish-npm-modules-9-320.jpg)
![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>](https://image.slidesharecdn.com/2016-01-08-160107133947/85/2015-publish-npm-modules-12-320.jpg)
![INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
ACTION-TRACKER
<script src=/slideshow/2015publishnpm-modules/56783654/"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>](https://image.slidesharecdn.com/2016-01-08-160107133947/85/2015-publish-npm-modules-15-320.jpg)
2015年にpublishしたnpm modules
- 1. 2015年に PUBLISHしたNPM MODULE 2016/01/08 Gotanda.js #2 @mizuki_r
- 2. PROFILE @MIZUKI_R Twitter: @mizuki_r Github: ry_mizuki npm : mizuki_r Angular, RiotJSまわりの使い手. 最近はフロントエンドのアーキテ クチャを考えることが多い.
- 3. PUBLISHED ON 2015 INTRODUCE FOR NPM MODULES
- 4. INTRODUCE FOR NPM MODULES PUBLISHED ON 2015 2015年にPUBLISHしたNPM MODULE一覧 ? hariko ? angular-period ? action-tracker
- 5. INTRODUCE FOR NPM MODULES PUBLISHED ON 2015 デビューして半年経ってないひよっこです
- 6. INTRODUCE FOR NPM MODULES PUBLISHED ON 2015 どんなライブラリを公開したか、 公開してどうだったかをつらつら語ります
- 7. hariko
- 8. INTRODUCE FOR NPM MODULES PUBLISHED ON 2015 HARIKO ? https://www.npmjs.com/package/hariko ? API-Blueprintのドキュメントに従って、APIモックサーバーを 立ち上げる ? 「張り子」が名前の由来 ? stubcellとeasymockの良い所を拝借してソースをAPI- Blueprintにした ? 他のモックサーバになかった「やりたいこと」を詰め込んだ
- 9. 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”}
- 10. angular-period
- 11. INTRODUCE FOR NPM MODULES PUBLISHED ON 2015 ANGULAR-PERIOD ? https://www.npmjs.com/package/angular-period ? 期間を指定すると、現在日時の「過去」「現在」「未来」 のパターンでDOMを出し分けるAngularJSのDirective ? そういう仕様で実装した際に「これ他でも使えるな」と思っ て外出しした
- 12. 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>
- 13. action-tracker
- 14. INTRODUCE FOR NPM MODULES PUBLISHED ON 2015 ACTION-TRACKER ? https://www.npmjs.com/package/action-tracker ? Google Analyticsのラッパー ? Promiseで処理できたりする ? もともとはトラッキングの汎用的なI/Fを目指していたんだ けど、たどり着かずにただのラッパーになった ? 機会があればそういう感じにするかもしれない
- 15. INTRODUCE FOR NPM MODULES PUBLISHED ON 2015 ACTION-TRACKER <script src=/slideshow/2015publishnpm-modules/56783654/"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>
- 18. RECONSIDE RATION ABOUT PUBLISHING GITHUBに上げたが、PUBLISHしていないもの ? 途中で飽きた ? 作ってみたけど、別に使わないや ? もっといいものを見つけた ? とりあえずやり始めることが大事
- 19. GITHUBに 上げるメリット
- 20. RECONSIDE RATION ABOUT PUBLISHING GITHUBに上げるメリット ? travis-ciや各種badgeなどの便利ツールが使いやすい ? 「こんなのを書いてるんだぜ」っていう紹介ができる ? 新しい技術に挑戦するだけする ? とりあえずやり始めることが大事
- 21. NPMに 上げるメリット
- 22. RECONSIDE RATION ABOUT PUBLISHING NPMに上げるメリット ? `npm install` で入れやすい ? あっちこっちで使える、使いやすくなる ? 使ってもらいやすくなる ? 気合入れて作るようになる ? 気づいたらいい感じにinstallが伸びてる（かもしれない）
- 23. 反省点
- 24. RECONSIDE RATION ABOUT PUBLISHING 反省点 ? issueに気づかない事があった ? こまめにgithubチェック ? 自分が使わなくなると放置しがち ? issue待ち ? blogとかでshareしないと気づいてもらえない ? blog書こう
- 25. 全体を通して
- 26. RECONSIDE RATION ABOUT PUBLISHING 全体を通して ? 業務とは異なる運用で知見が広がった ? version, changelogの運用 ? badgeを利用したクオリティ維持 ? DL数やStar数が増えるとモチベが上がる ? 普段と違うコトをカジュアルに試せてイイ ? 「npmに上げるぞ！」って思うとなんか気合はいる
- 28. ASPIRATIONS OF 2016 2016年の抱負 ? 「縁」があればどんどんpublishしていくつもり ? しかしコードを書くより設計を考える方が楽しい最近 ? 作りたいものがあったら作るし、? 他の人に使ってもらいたいなって思ったら公開する