こんにちは。趣味グラマのNobuです。
npmにはいつもお世話になっていて、ReactNativeのアプリを作る時も、何個ものパッケージをいつも使っています。
そんな中で、何を思ったか自分自身でもnpmパッケージを作って公開してしまったので、忘れないうちに書いておきたいと思います。
公開したnpmパッケージ
![](https://static-production.npmjs.com/338e4905a2684ca96e08c7780fc68412.png)
何をやるものか
単純に数字を時間形式に変換してくれるものになります。
と言っても、良くあるdatetimeみたいな高性能パッケージではなく、本当に単純に数字を「hh:mm:ss」形式にするだけです。(hmsの出力パターンはパラメータで変更できます)
入力値:650
出力値:{ hh: ’00’, mm: ’10’, ss: ’50’, timeformat: ’00:10:50′ }
入力値:75000
出力値:{ hh: ’20’, mm: ’50’, ss: ’00’, timeformat: ’20:50:00′ }
なぜ作ったのか
いま作っているアプリで、音声を録音する機能があるのですが、録音の経過時間を画面に表示する時に、経過時間を「hh:mm:ss」形式にして表示したいと考えました。
その時、なぜか「だったらnpmパッケージにしてみるのも有りでは」と考えてしまい(?)、npmにする事にしました。
![](https://blog.mrym.tv/wp-content/uploads/2019/07/Simulator-Screen-Shot-iPhone-Xs-2019-07-26-at-11.01.38-800x1732.png)
npmパッケージを公開する流れ
npmパッケージを公開するのは非常に簡単でした。
大まかな流れは以下の通りです。
- npmにユーザ登録する(ターミナルから出来る)
- githubにpublicなリポジトリを作る
- git cloneしてコードを書く
- githubにpush
- npmにpublish
たったこれだけで、npmパッケージが公開されました。
公開してすぐ使えるようになるので、自分のプロジェクトにyarn addして取り込み、実際に動いた時にはちょっと感動しました(笑)
参考にしたサイト
npmの公開の流れや、TypeScriptで開発する方法について以下のサイトを参考にしました。
また、名前が被ったらどうしようみたいな心配もあったので、scoped public packageというのでやってみました。(この心配と対処方法が正しいのかは良く分かってませんが…)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUU1JTg4JTlEJUUzJTgyJTgxJUUzJTgxJUE2JUUzJTgxJUFFbnBtJTIwJUUzJTgzJTkxJUUzJTgzJTgzJUUzJTgyJUIxJUUzJTgzJUJDJUUzJTgyJUI4JUU1JTg1JUFDJUU5JTk2JThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0xNjJhMzdjMGZkYjdlYTFjYjVkMTBiYWViYzdhYTEzOA&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBUc3V0b211TmFrYW11cmEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWNiNmM3ZjM2MDhmYWZmZmIwZDQ4ODdjZWUzODY0ZmVm&blend-x=142&blend-y=486&blend-mode=normal&s=a613e9e7dea91da69e3c40dca4840f1a)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9VHlwZVNjcmlwdCVFMyU4MSVBN25wbSVFMyU4MyVBOSVFMyU4MiVBNCVFMyU4MyU5NiVFMyU4MyVBOSVFMyU4MyVBQSVFOSU5NiU4QiVFNyU5OSVCQSVFMyU4MSU5MyVFMyU4MSVBOCVFMyU4MSVBRiVFMyU4MSU5OCVFMyU4MiU4MSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZDk5NzY3ZTUzYTM2YTMzNDQ0ZjI1NjdkNmFhZTBhMTY&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzYWx0eXNoaW9taXgmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWJhMjk3ZGY4NTM1NjcwODg0ZjFkMjg5YWM5MzQxNDYy&blend-x=142&blend-y=486&blend-mode=normal&s=8adcc94df64147d5a7949c28390023b5)
![](https://user-images.githubusercontent.com/29712634/81721690-e2fb5d80-9445-11ea-8602-4b2294c964f3.png)
公開して1日経って
公開直後にtwitterにハッシュタグを付けて流したためか、なんと16ダウンロードもされました。
![](https://blog.mrym.tv/wp-content/uploads/2019/07/image-800x336.png)
恐らく最初で最後のグラフになると思うので記念として貼っておきます(笑)
まとめ
一度やってみると、公開は非常に簡単に行える事が分かりました。
誰の役に立つかは分かりませんが、今後も機会があれば公開していきたいと思います!
そしてこれで私も趣味グラマからOSS開発者に(違
コメント