O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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 2015
INTRODUCE 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モッ...
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
HARIKO
# GET /api/message
+ Response 200 (text/plain)
{“content”: “message”}
$...
angular-period
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
ANGULAR-PERIOD
▸ https://www.npmjs.com/package/angular-period
▸ 期間を指定すると、現在日時の...
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
ANGULAR-PERIOD
angular.module('campaign', ['angularPeriod']);
<div class="camp...
action-tracker
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
ACTION-TRACKER
▸ https://www.npmjs.com/package/action-tracker
▸ Google Analyti...
INTRODUCE FOR NPM MODULES PUBLISHED ON 2015
ACTION-TRACKER
<script src="dist/action-tracker.min.js"></script>
<script>
ga(...
PUBLISHING
RECONSIDERATION 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` で入れやすい
▸ あっちこっちで使える、使いやすくなる
▸ 使ってもらいやすくなる
▸ 気合入れて作るようになる
▸ 気...
反省点
RECONSIDE RATION ABOUT PUBLISHING
反省点
▸ issueに気づかない事があった
▸ こまめにgithubチェック
▸ 自分が使わなくなると放置しがち
▸ issue待ち
▸ blogとかでshareしないと気づ...
全体を通して
RECONSIDE RATION ABOUT PUBLISHING
全体を通して
▸ 業務とは異なる運用で知見が広がった
▸ version, changelogの運用
▸ badgeを利用したクオリティ維持
▸ DL数やStar数が増えるとモ...
2016
ASPIRATIONS OF
ASPIRATIONS OF 2016
2016年の抱負
▸ 「縁」があればどんどんpublishしていくつもり
▸ しかしコードを書くより設計を考える方が楽しい最近
▸ 作りたいものがあったら作るし、

他の人に使ってもらいたいなって思ったら...
よろしくお願いします。
2016年も…
Próximos SlideShares
Carregando em…5
×

2015年にpublishしたnpm modules

672 visualizações

Publicada em

2016/01/08に開催された「GotandaJS #2 〜JS新年会〜」での発表資料です

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

2015年にpublishしたnpm modules

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

×