本当に必要なnpmパッケージを見つけるために知っておきたい5つのサイト

gaji-staff

2022.6.29

学びの共有

はじめに

こんにちは kimizuy です。

npm パッケージを探したり比較したいときにみなさんはどうしていますか？

シンプルにググるという方法も考えられますが、今回は npm パッケージを比較・検索・診断するサイトを 5 つご紹介し、それぞれの特徴や使いどころについてまとめます。

これらのサイトの特徴を知って使い分けることで、よりプロジェクトに適切なパッケージを選んでいきましょう！

この記事で紹介するサイト

npm trends

https://www.npmtrends.com/

ダウンロード数が線グラフで表示され対象のパッケージを一目で比較できるサイトです。グラフの動きによってそのパッケージが注目されているかどうかもわかります。類似するパッケージをサジェストしてくれる機能もあるので、そこから比較対象を広げていく使い方も可能です。

「Stats」のセクションではスターやイシューの数が表示されます。あくまで簡易的なものですがパッケージの人気度や安定性を把握できます。

使いどころ

ダウンロード数やスター数を比較して、類似のパッケージのなかでどの程度人気のパッケージなのかを把握する場合におすすめです。

BundlePhobia

https://bundlephobia.com/

パッケージのバンドルサイズを形式ごとに表示したり、バージョンごとのバンドルサイズを一覧できるサイトです。

類似するパッケージとのバンドルサイズの比較も表示してくれます。

使い所

パッケージの詳細なバンドルサイズを知りたいときや他に軽量なパッケージがないか探したい場合におすすめです。

Moiva.io

https://moiva.io/

パッケージの情報を網羅的に比較できるサイトです。GitHub だけでなく Google Trends や StateOf~ のランキング情報からの比較も表示されます。

TechRader の4段階評価も一覧できるため、そのパッケージがプロダクションレベルで使えるかどうかの目安も把握できます。

以下の画像では React と Vue は「Adopt」、Svelteは「Assess」の評価になっています。

ThoughtWorks’ levels definitions:
Adopt – We feel strongly that the industry should be adopting these items. We use them when appropriate on our projects.
Trial – Worth pursuing. It is important to understand how to build up this capability.
Enterprises should try this technology on a project that can handle the risk.
Assess – Worth exploring with the goal of understanding how it will affect your enterprise.
Hold – Proceed with caution.
ThoughtWorks社（TechRader の運営会社）のレベル定義:
Adopt – 業界がこれらの項目を採用するべきだと強く感じています。私たちのプロジェクトでも適宜使用しています。
Trial – 追求する価値がある。この能力をどのように構築するかを理解することが重要である。企業は、リスクに対応できるプロジェクトでこの技術を試すべきである。
Assess（評価） – 企業にどのような影響を与えるかを理解する目的で、検討する価値がある。
Hold – 慎重に進める。
（DeepL 翻訳 + 意訳）
FAQ and more – What are the rings?