最近少しづつ OSS 活動に興味が出てきている今日このごろです。 とはいえ、能力も時間も足りていないのでのんびり学んでいこうかなと考えています。
Zenn で オリジナルの JavaScript ライブラリを公開しよう というのを見てからライブラリを公開することに興味が湧いてきました。
思い返してみれば、何かプロダクトを作るときにライブラリを使うことは結構してきたものの、自分名義のライブラリを作成して公開したことはありませんでした。
そこで、普段お世話になっている npm への公開を体験してみることにしました。
作成したもの
実際に公開したものはこちらになります。
https://www.npmjs.com/package/glob-extension-changer
glob パターンで指定したファイルの拡張子を変えるだけのシンプルな CLI ツールです。
使い方は
npx glob-extension-changer 'path/to/file/**/*.js' --extension .ts
のように使います。
--check フラグを使うことで、実際に拡張子を変更することなく、変更の結果を確認することができるようになっています。
npx glob-extension-changer 'path/to/file/**/*.js' --extension .ts --check
基本的な機能はこれだけです。
モチベーション
元々、業務で JavaScript から TypeScript への移行などを進めてきた関係で、拡張子だけを.tsから.jsに変えたいというシチュエーションが度々ありました。
解決手段はいくらでもあると思いますが、なんとなく npm package で解決したいと思い軽く調べたところ、私の思い描くシンプルな文法で使えるツールが見つかりませんでした。
そこで、簡単そうだし作ってみることにしました。
作業手順
ここからは実際の作業手順を記していきます。 なお、私がフロントエンド開発などで使うことを想定しているため、Node.js が前提になっています。
要件定義
まずは、どんなツール（ライブラリ）を作りたいか、どんな体験を作りたいかを視点に考えていきました。
掘り下げていった結果、以下の観点が浮かび上がりました。
- 指定した拡張子を変更できる
- glob パターンで指定できる
- CLI ツール
- インストール不要
- 機能がミニマル
指定した拡張子を変更できる: これはマスト。
glob パターンで指定できる: 様々なツールでファイル指定に利用されており、私も馴染み深い点と、シンプルな文法で柔軟にファイル指定が可能である点が気に入っています。
CLIツール: 拡張子を変えるためだけにスクリプトファイルを作成することは避けたかったため、CLI ツールにしました。
インストール不要: ローカルやグローバルにインストールするのも面倒であったため、インストール不要で npx で呼べる形が良いと思いました。
機能がミニマル: 拡張子を変えるというためだけのツールに特化することで余計な機能を削ぎ落とすことにしました。
リポジトリ作成
まずはリポジトリ作成します。 GitHub で作成し、ここにコミットしていきました。
意外に悩むのがライブラリ名です。
ライブラリの名前にはキャッチーなあだ名のようなものから、機能をそのまま説明したようなものまで様々なバリエーションがあります。
今回は検索でヒットしやすいように「glob で拡張子を変更する」という意味をそのままに glob-extension-changer と名付けました。
npm info で同名ライブラリが無いことは確認しておきます。
実装方針
今回は自分向けのツールを npm publish することのみを目標に置いていたため、できるだけ手を抜くことにしました。
JavaScript 直書き
TypeScript などを使うことも考えましたが、コンパイルするのが面倒であったのと、そもそもそんな複雑なツールではないので型はなくてもよいかなということで、思い切って生の JavaScript で書くことにしました。
テスト無し
テストは書いたほうが良いですが、ツールを公開することのほうが重要だったので、後回しにしています。
Done is better than perfect.
と言いたいところですが、手を抜くときにこの言葉を引用すると怒られるので避けましょう。
私のための（ほぼ書き捨ての）ツールなので、大きな問題が出ない限りはいいかなという感じです。
後々に余裕があればユニットテストを追加したいです。
空っぽの test ファイル作って力尽きました。
テスト書かない代わりにいくつかの場所でライブラリがちゃんと動作しているかの手動チェックはしました。
CI 無し
テスト無しであることも後押ししてか、CI もなしになっています。
多くの人に使ってほしいライブラリの場合は、様々な OS や Node.js のバージョンで動くことを保証したほうが良いでしょう。
ゆくゆくは README にバッジとか表示したいですね。
技術選定
今回は node-glob で glob パターンによるファイルのリストアップを行い、commanderで CLI ツールを作成しています。
どちらも老舗ライブラリです。
これらのライブラリに依存している glob-extension-changer 自体の Node.js への対応も v12 以上と、LTS が v16 台の現在においてはまずまずな感じに古い Node.js に対応できています。
実装
作成したリポジトリはこちらです。
https://github.com/pvcresin/glob-extension-changer
CLI のパラメータ取得などはよしなに commander が行ってくれるので、それを node-glob に受け流すだけになっています。
--extension で変更後に拡張子設定を行う、--check で dry-run するというのだけ決めてあとは素直にコードに書きました。
初見だったのですが、Node.js 標準の util package に promisify というコールバック型の関数をいい感じに Promise に置き換えてくれるものがあって便利でした。
CLI ツールとして呼び出すため、index.js の一番上に
#!/usr/bin/env node
と書いて、
package.json のbinに index.js へのパスを書きました。
これで、npx glob-extension-changer xxxができるっぽい。簡単。
下準備
一応公開するツールなのでライセンスはつけておきます。今回は MIT にしました。
ライセンスを作成するツールはたくさんありましたが、適当にネットでヒットしたオンラインツールで作成しました。
おそらくどんな言語でも実装されていそうなので、一回探しておくと良さそうです。
VSCode 拡張とかでも多分ありそうです。
README は npm publish されるときにライブラリの顔になるため、最低限のツールの概要と使い方を載せておきました。
巷のライブラリにはたくさんの項目が README に載っていますが、概要と使い方だけで 9 割のユーザは救える気がしています。
あと付け加えるなら、コントリビュートの仕方とかですが、まぁ追々で。
公開
npm にアカウント登録します。
私は Web サイトからポチポチしました。
ターミナルで npm login してから npm publish だけで公開されました。🎉
アップデートする時は、package.json の verson を更新して再度 npm publish します。
ここらへんも version ごとに tag を切るとか、リリースノートとかモチベがあったらいい感じにしたいですね。
最後に
感想としては、公開自体はめちゃくちゃ簡単だなと思いました。
巷に溢れているライブラリ作りました記事だと、すごく CI の設定が凝っていたりテストの部分が充実していたりで、なんとなくハードルを高く感じてしまいます。
私のようにテストなし、CI 無し、いろいろな自動化なしでも公開まではできるということを伝えたいです。
どんなライブラリも始めから完璧ではないと思うので、まずは公開して少しづつリポジトリを改善していけばよいのかなと思います。
書き捨てのツールでも一旦どんどん公開していけば、世界の誰かの役に立つかもしれません。
これからも何か作りたいものがあれば公開していこうかなと思います。
