JS/TSでnpmライブラリを作る時の注意点まとめ

この記事を書くきっかけ

先日、自分でライブラリを組んでみて色々学ぶことがあったので今回はまとめてみました。

自分が作ったライブラリに関しては以下の記事にまとめていますので、良かったら見てください!!

最初に

今回はJS/TSでライブラリ作成をする場合の注意点をまとめていますが、もしかしたらnpmの仕様変更等で今後この記事の内容が的外れになるかもしれませんので、鵜呑みにはしないでください。
またこの記事は初心者向けです。上級者や中級者の方は退屈かもしれません。その時は躊躇なくブラウザバックしてください

あと大前提として、この記事はnpmライブラリを作る時の注意点であってnpmライブラリの作り方ではありません。
npmライブラリの作り方は、また後日あげる予定ですので待っていてください

1 コードをきれいに

GitHubに公開しないから大丈夫と思っているあなた!!
その思考危険です。

このようにnpmにアップロードした時点で、ファイルの中は閲覧できるので、基本的にコードは奇麗に書きましょう

2 LICENSE & READMEはちゃんと書こう

普段あまりコードを公開していない人からすると、この二つは見落としがちかもしれません。
ちゃんと書いておいて損はないので出来ればしっかりやりましょう。

README.md

これはGitHubを使っている人ならある程度できると思います。

• 具体的には以下の要点が書いていればいいと思います。
  • どういうライブラリなのか
  • ライブラリを使用したコードの例
  • 関連サイト等のリンク (GitHub等があれば)

これプラス必要であれば、開発者の連絡先やクレジット等も書いておくといいかもしれません

LICENSE

これはあまり扱ったことがない人も多いのではないでしょうか？
具体的にどのような利点があるか知っている人は少ないかもしれません。
LICENSEを明記することによって以下のようなメリットがあります。

• 公開しているコードの複製等について制限が出来る
• コードの著作権等を保護できる
• 自分がもし活動をやめても、ライセンス自体は半永久的に機能し続ける

大雑把に説明しているので、多少ライセンスの種類やサイトによって左右しますが、大体こんな感じです。

では実際どのようにライセンスを実装するかを書いていこうと思います。
LICENSEの実装方法自体はいっぱいありますが、実際問題GitHubを使ってライセンスを実装している人が多いと思います。

このようにGitHubのリポジトリを作る時等にLICENSEを設定することができます。

とはいえライセンスの種類がいっぱいありすぎて、よく分かりませんよね?
今回は厳選して5つ紹介していきます。

• MIT License
  • 作成者や著作権者は、製品に対しての義務や責任を何ら負わないこと
  • 著作権の表示を保持すること
• BSD License
  • 作成者や著作権者は、製品に対しての義務や責任を何ら負わないこと
  • 著作権の表示を保持すること
  • 派生した製品に、勝手に製品の宣伝または推薦者として組織や貢献者の名前を使用しないこと
• Apache License
  • 作成者や著作権者は、製品に対しての義務や責任を何ら負わないこと
  • 著作権と特許権の表示を保持すること
  • 製品を改変した場合は、その変更点を示すこと
  • 製品中の特許に対して特許侵害を主張する場合は、その特許ライセンスは終了する
• GNU General Public License (GPL)
  • 作成者や著作権者は、製品に対しての義務や責任を何ら負わないこと
  • 著作権の表示を保持すること
  • 改変、再頒布の前提としてソースコードへのアクセスができること
  • 製品を改変した場合は、その変更点を示すこと
  • 製品を改変した場合もGPLで配布すること

特にコードの複製等に抵抗がない方はMIT Licenseでいいと思います。
実際問題自分のコードもほとんどがMITです。

商売等に使う場合やコードの改変等に対して敏感な方は下三つの内どれかを設定するのが、いいと思います。

3 package.jsonを書く時の注意点

package.jsonを適当に書いている人多いんじゃないですか？
初見だと見落としがちな部分をいくつか紹介していきます。

package.jsonをすべて書くのは面倒なので対象の部分を抜粋して書きます。

keywords

package.json

{
  "keywords": [
    "キーワード1",
    "キーワード2",
    "キーワード3"
  ]
}

npmjs.com等では一番下の部分に表示されます。npmjs.comのサイト内検索でも使われるので記入して損はないです。

GitHub関係

package.json

{
  "repository": {
    "type": "git",
    "url": "GitHub Repository URL",
    "directory": "Main File Path"
  }
}

このようにGitHub等にコードを上げている場合はそれをサイトで表示することができます。
PCだと右側に以下のように出ます。

TypeScriptを使う場合の注意点

ここから先はTypeScriptを使う際の注意点なので、jsでコードを書いている方はここでブラウザバックしていただいても大丈夫です。

1 そのライブラリJSでも使える？

TypeScriptで使えるからと言って油断してはいけません
JSで読み込むとエラーが起きてしまうかもしれないので事前に確認しましょう

自分はこのように関数なのに変数判定になるバグが発生していて対応が大変でした ((汗

具体的には以下のような修正をしました。

exports.default = log4debug;
//上記を下記に変更
module.exports = log4debug;

なぜ上記の変更で治るのかというと、JavaScriptにはESmoduleやCommonJSのようにモジュールのインポート方法複数あるからです。
公開前にJSからも呼び出し可能かちゃんと確かめましょう

2 型定義ファイルの出力

TypeScriptをJavaScriptにコンパイルする過程で型定義ファイルを出力できることをご存じですか？

tsc -d

このように -d オプションを付けることで型定義ファイルを出力することができます。
index.tsをコンパイルした場合にはindex.jsとindex.d.tsが出力されます。

package.json

{
  "types": "index.d.ts"
}

またその際はpackage.jsonでtypesタグに型定義ファイルのパスを入れておきましょう

最後に

記事を読んでいただきありがとうございます。
記事にご指摘等ありましたら、優しく教えていただけると幸いです。
自分はこの記事以外にも色々な記事を出していますので、見ていただけると幸いです。

引用元