SlideShare a Scribd company logo
1 of 29
Download to read offline
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モックサーバーを
立ち上げる
▸ 「張り子」が名前の由来
▸ 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>
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` で入れやすい
▸ あっちこっちで使える、使いやすくなる
▸ 使ってもらいやすくなる
▸ 気合入れて作るようになる
▸ 気づいたらいい感じにinstallが伸びてる(かもしれない)
反省点
RECONSIDE RATION ABOUT PUBLISHING
反省点
▸ issueに気づかない事があった
▸ こまめにgithubチェック
▸ 自分が使わなくなると放置しがち
▸ issue待ち
▸ blogとかでshareしないと気づいてもらえない
▸ blog書こう
全体を通して
RECONSIDE RATION ABOUT PUBLISHING
全体を通して
▸ 業務とは異なる運用で知見が広がった
▸ version, changelogの運用
▸ badgeを利用したクオリティ維持
▸ DL数やStar数が増えるとモチベが上がる
▸ 普段と違うコトをカジュアルに試せてイイ
▸ 「npmに上げるぞ!」って思うとなんか気合はいる
2016
ASPIRATIONS OF
ASPIRATIONS OF 2016
2016年の抱負
▸ 「縁」があればどんどんpublishしていくつもり
▸ しかしコードを書くより設計を考える方が楽しい最近
▸ 作りたいものがあったら作るし、

他の人に使ってもらいたいなって思ったら公開する
よろしくお願いします。
2016年も…

More Related Content

What's hot

What's hot (8)

粗探しをしてGoのコントリビューターになる方法
粗探しをしてGoのコントリビューターになる方法粗探しをしてGoのコントリビューターになる方法
粗探しをしてGoのコントリビューターになる方法
 
Qt5のセンサーAPIを使ってみたい
Qt5のセンサーAPIを使ってみたいQt5のセンサーAPIを使ってみたい
Qt5のセンサーAPIを使ってみたい
 
地域 PyCon mini を広島で
地域 PyCon mini を広島で地域 PyCon mini を広島で
地域 PyCon mini を広島で
 
Cloud Functionsの紹介
Cloud Functionsの紹介Cloud Functionsの紹介
Cloud Functionsの紹介
 
Cloud functionsの紹介
Cloud functionsの紹介Cloud functionsの紹介
Cloud functionsの紹介
 
Ninja framework使ってみた
Ninja framework使ってみたNinja framework使ってみた
Ninja framework使ってみた
 
ライブラリ・ファースト 第91回 PHP勉強会@東京 #phpstudy
ライブラリ・ファースト 第91回 PHP勉強会@東京 #phpstudyライブラリ・ファースト 第91回 PHP勉強会@東京 #phpstudy
ライブラリ・ファースト 第91回 PHP勉強会@東京 #phpstudy
 
git ~start PullRequest~
git ~start PullRequest~git ~start PullRequest~
git ~start PullRequest~
 

Similar to 2015年にpublishしたnpm modules

属人化したフロントエンドのJavaScriptを、 ‘新規機能開発を止めずに’改善するために行った取り組みについて。 及びその経過報告。
属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。
属人化したフロントエンドのJavaScriptを、 ‘新規機能開発を止めずに’改善するために行った取り組みについて。 及びその経過報告。
Jun Suzuki
 
OpenMDAOの最適化を試す(第23回オープンCAE勉強会@関西)
OpenMDAOの最適化を試す(第23回オープンCAE勉強会@関西)OpenMDAOの最適化を試す(第23回オープンCAE勉強会@関西)
OpenMDAOの最適化を試す(第23回オープンCAE勉強会@関西)
TatsuyaKatayama
 
OpenMDAOをUbuntu12.04にインストールする(第24回オープンCAE勉強会@関西)
OpenMDAOをUbuntu12.04にインストールする(第24回オープンCAE勉強会@関西)OpenMDAOをUbuntu12.04にインストールする(第24回オープンCAE勉強会@関西)
OpenMDAOをUbuntu12.04にインストールする(第24回オープンCAE勉強会@関西)
TatsuyaKatayama
 
GTMF 2015: UE4で開発環境は次なるステージへ~才能のコラボーレーションでクリエイティビティはさらなる高みへ~ | エピック・ゲームズ・ジャパ...
GTMF 2015: UE4で開発環境は次なるステージへ~才能のコラボーレーションでクリエイティビティはさらなる高みへ~ |  エピック・ゲームズ・ジャパ...GTMF 2015: UE4で開発環境は次なるステージへ~才能のコラボーレーションでクリエイティビティはさらなる高みへ~ |  エピック・ゲームズ・ジャパ...
GTMF 2015: UE4で開発環境は次なるステージへ~才能のコラボーレーションでクリエイティビティはさらなる高みへ~ | エピック・ゲームズ・ジャパ...
Game Tools & Middleware Forum
 

Similar to 2015年にpublishしたnpm modules (20)

Django ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
Django ORM道場:クエリの基本を押さえ,より良い形を身に付けようDjango ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
Django ORM道場:クエリの基本を押さえ,より良い形を身に付けよう
 
Angular2実践入門
Angular2実践入門Angular2実践入門
Angular2実践入門
 
僕はどうしてAngular2をテーマに登壇することになってしまったのか
僕はどうしてAngular2をテーマに登壇することになってしまったのか僕はどうしてAngular2をテーマに登壇することになってしまったのか
僕はどうしてAngular2をテーマに登壇することになってしまったのか
 
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
 
属人化したフロントエンドのJavaScriptを、 ‘新規機能開発を止めずに’改善するために行った取り組みについて。 及びその経過報告。
属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。属人化したフロントエンドのJavaScriptを、‘新規機能開発を止めずに’改善するために行った取り組みについて。及びその経過報告。
属人化したフロントエンドのJavaScriptを、 ‘新規機能開発を止めずに’改善するために行った取り組みについて。 及びその経過報告。
 
GCPのサーバレス
GCPのサーバレスGCPのサーバレス
GCPのサーバレス
 
SAP Inside Track 2018 LT資料「ABAPerが触ってきた SAP Cloud PlatformのABAP環境 」
SAP Inside Track 2018 LT資料「ABAPerが触ってきた SAP Cloud PlatformのABAP環境 」SAP Inside Track 2018 LT資料「ABAPerが触ってきた SAP Cloud PlatformのABAP環境 」
SAP Inside Track 2018 LT資料「ABAPerが触ってきた SAP Cloud PlatformのABAP環境 」
 
DevLOVE Kansai KnockoutJS
DevLOVE Kansai KnockoutJSDevLOVE Kansai KnockoutJS
DevLOVE Kansai KnockoutJS
 
OpenMDAOの最適化を試す(第23回オープンCAE勉強会@関西)
OpenMDAOの最適化を試す(第23回オープンCAE勉強会@関西)OpenMDAOの最適化を試す(第23回オープンCAE勉強会@関西)
OpenMDAOの最適化を試す(第23回オープンCAE勉強会@関西)
 
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
 
OSC・シェルのプロが語る『make を使ったデータ処理。』 【make 教】 - OSC2015 Tokyo/Spring 発表資料
OSC・シェルのプロが語る『make を使ったデータ処理。』 【make 教】 - OSC2015 Tokyo/Spring 発表資料OSC・シェルのプロが語る『make を使ったデータ処理。』 【make 教】 - OSC2015 Tokyo/Spring 発表資料
OSC・シェルのプロが語る『make を使ったデータ処理。』 【make 教】 - OSC2015 Tokyo/Spring 発表資料
 
ngJapan報告会
ngJapan報告会ngJapan報告会
ngJapan報告会
 
Front-end package managers
Front-end package managersFront-end package managers
Front-end package managers
 
Pivotal Trackerでアジャイルなプロジェクト管理
Pivotal Trackerでアジャイルなプロジェクト管理Pivotal Trackerでアジャイルなプロジェクト管理
Pivotal Trackerでアジャイルなプロジェクト管理
 
自動化を支えるCI/CDパイプライン
自動化を支えるCI/CDパイプライン自動化を支えるCI/CDパイプライン
自動化を支えるCI/CDパイプライン
 
Nodeにしましょう
NodeにしましょうNodeにしましょう
Nodeにしましょう
 
20130630fuelphptokyo4
20130630fuelphptokyo420130630fuelphptokyo4
20130630fuelphptokyo4
 
ソフトウェアエンジニアと高位合成
ソフトウェアエンジニアと高位合成ソフトウェアエンジニアと高位合成
ソフトウェアエンジニアと高位合成
 
OpenMDAOをUbuntu12.04にインストールする(第24回オープンCAE勉強会@関西)
OpenMDAOをUbuntu12.04にインストールする(第24回オープンCAE勉強会@関西)OpenMDAOをUbuntu12.04にインストールする(第24回オープンCAE勉強会@関西)
OpenMDAOをUbuntu12.04にインストールする(第24回オープンCAE勉強会@関西)
 
GTMF 2015: UE4で開発環境は次なるステージへ~才能のコラボーレーションでクリエイティビティはさらなる高みへ~ | エピック・ゲームズ・ジャパ...
GTMF 2015: UE4で開発環境は次なるステージへ~才能のコラボーレーションでクリエイティビティはさらなる高みへ~ |  エピック・ゲームズ・ジャパ...GTMF 2015: UE4で開発環境は次なるステージへ~才能のコラボーレーションでクリエイティビティはさらなる高みへ~ |  エピック・ゲームズ・ジャパ...
GTMF 2015: UE4で開発環境は次なるステージへ~才能のコラボーレーションでクリエイティビティはさらなる高みへ~ | エピック・ゲームズ・ジャパ...
 

More from Ryo Iinuma (6)

このすこし短い時間にLTを!
このすこし短い時間にLTを!このすこし短い時間にLTを!
このすこし短い時間にLTを!
 
Introduction of RiotJS
Introduction of RiotJSIntroduction of RiotJS
Introduction of RiotJS
 
NodeJSでCLI開発を楽しくするライブラリの紹介
NodeJSでCLI開発を楽しくするライブラリの紹介NodeJSでCLI開発を楽しくするライブラリの紹介
NodeJSでCLI開発を楽しくするライブラリの紹介
 
AngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSとAngularJSとFluxとRiotJSと
AngularJSとFluxとRiotJSと
 
フロントエンドから見たWebアプリの高速化 #gotandapm
フロントエンドから見たWebアプリの高速化 #gotandapmフロントエンドから見たWebアプリの高速化 #gotandapm
フロントエンドから見たWebアプリの高速化 #gotandapm
 
最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介
 

2015年にpublishしたnpm modules

  • 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 どんなライブラリを公開したか、 公開してどうだったかをつらつら語ります
  • 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”}
  • 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>
  • 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="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していないもの ▸ 途中で飽きた ▸ 作ってみたけど、別に使わないや ▸ もっといいものを見つけた ▸ とりあえずやり始めることが大事
  • 20. RECONSIDE RATION ABOUT PUBLISHING GITHUBに上げるメリット ▸ travis-ciや各種badgeなどの便利ツールが使いやすい ▸ 「こんなのを書いてるんだぜ」っていう紹介ができる ▸ 新しい技術に挑戦するだけする ▸ とりあえずやり始めることが大事
  • 22. RECONSIDE RATION ABOUT PUBLISHING NPMに上げるメリット ▸ `npm install` で入れやすい ▸ あっちこっちで使える、使いやすくなる ▸ 使ってもらいやすくなる ▸ 気合入れて作るようになる ▸ 気づいたらいい感じにinstallが伸びてる(かもしれない)
  • 24. RECONSIDE RATION ABOUT PUBLISHING 反省点 ▸ issueに気づかない事があった ▸ こまめにgithubチェック ▸ 自分が使わなくなると放置しがち ▸ issue待ち ▸ blogとかでshareしないと気づいてもらえない ▸ blog書こう
  • 26. RECONSIDE RATION ABOUT PUBLISHING 全体を通して ▸ 業務とは異なる運用で知見が広がった ▸ version, changelogの運用 ▸ badgeを利用したクオリティ維持 ▸ DL数やStar数が増えるとモチベが上がる ▸ 普段と違うコトをカジュアルに試せてイイ ▸ 「npmに上げるぞ!」って思うとなんか気合はいる
  • 28. ASPIRATIONS OF 2016 2016年の抱負 ▸ 「縁」があればどんどんpublishしていくつもり ▸ しかしコードを書くより設計を考える方が楽しい最近 ▸ 作りたいものがあったら作るし、
 他の人に使ってもらいたいなって思ったら公開する