本当に必要なnpmパッケージを見つけるために知っておきたい5つのサイト
はじめに
こんにちは kimizuy です。
npm パッケージを探したり比較したいときにみなさんはどうしていますか?
シンプルにググるという方法も考えられますが、今回は npm パッケージを比較・検索・診断するサイトを 5 つご紹介し、それぞれの特徴や使いどころについてまとめます。
これらのサイトの特徴を知って使い分けることで、よりプロジェクトに適切なパッケージを選んでいきましょう!
この記事で紹介するサイト
npm trends
ダウンロード数が線グラフで表示され対象のパッケージを一目で比較できるサイトです。グラフの動きによってそのパッケージが注目されているかどうかもわかります。類似するパッケージをサジェストしてくれる機能もあるので、そこから比較対象を広げていく使い方も可能です。

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

使いどころ
ダウンロード数やスター数を比較して、類似のパッケージのなかでどの程度人気のパッケージなのかを把握する場合におすすめです。
BundlePhobia
パッケージのバンドルサイズを形式ごとに表示したり、バージョンごとのバンドルサイズを一覧できるサイトです。

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

使い所
パッケージの詳細なバンドルサイズを知りたいときや他に軽量なパッケージがないか探したい場合におすすめです。
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 の運営会社)のレベル定義:
FAQ and more – What are the rings?
Adopt – 業界がこれらの項目を採用するべきだと強く感じています。私たちのプロジェクトでも適宜使用しています。
Trial – 追求する価値がある。この能力をどのように構築するかを理解することが重要である。企業は、リスクに対応できるプロジェクトでこの技術を試すべきである。
Assess(評価) – 企業にどのような影響を与えるかを理解する目的で、検討する価値がある。
Hold – 慎重に進める。
(DeepL 翻訳 + 意訳)
使いどころ
この記事で紹介する 5 つのサイトのなかでもっとも情報量があります。ある程度使いたいパッケージが絞り込めていて、それらを総合的に比較する場合におすすめです。
pkg.land
現時点(2022/06/23)ではベータ版として公開されています。
類似するパッケージのサジェストに特化したサイトです。

使いどころ
パッケージの代替候補を表示してくれます。技術選定の初期段階などで類似したパッケージを見つけたい場合におすすめです。
snyk Advisor
現時点(2022/06/23)ではベータ版として公開されています。
4 つの指標(Security、Popularity、Maintenance、Community)からパッケージのヘルススコア(健全度)を評価します。

npm だけでなく他のパッケージプラットフォームでも検索できます。




使いどころ
コミュニティの活発度や最も使われているバージョンなどがわかる点がユニークですね。パッケージが安定的・長期的にメンテナンスされていくかどうかを把握する場合におすすめです。
おわりに
今回は npm パッケージを比較・検索・診断するサイトをまとめてみました。パッケージの素振り前にぜひ活用していきたいですね。
以上、お読みいただきありがとうございました。
今すぐの転職でなくてもOKです!まずはお話しませんか?
現在弊社では一緒にお仕事をしてくださるエンジニアさんやデザイナーさんを積極募集しています。まずはカジュアルな面談で、お互いに大事にしていることをお話できたらうれしいです。詳しい応募要項は以下からチェックしてください。
- React, Next.js を得意とするフロントエンドエンジニア募集要項
- シニアクラスのフロントエンドエンジニア募集要項
- 抽象的な物事を具体的な機能にビジュアライズできるUIデザイナー募集要項
- UIデザイナーとして手ざわりのいいUIを作りたい業務委託パートナーさん募集(Wantedly)
パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでの面談でお話しましょう。ぜひお気軽にお問い合わせください!
話をしてみたい!