フロントエンドのライブラリ選定にはnpm trendsが便利な話

はじめに

ある機能のライブラリを探している時、その紹介記事を見つけたものの、どうにも書かれた日付が古かったり、あるいはそれ以外のライブラリ情報が中々探し当てられなかったりして、情報を掴むのにやたらと時間がかかってしまうことがあります。
また逆に、類似のライブラリ情報がありすぎて、どれを使用したら良いかで悩んでしまう、なんてことも。

そんな時は npm trends を使うと、選定時の参考になり便利です。

普段どうやってライブラリを探しているか、という話題になった時、意外と知らない人がいたので、ここではnpm trendsの便利な使い方を紹介します。

npm trends の簡単な説明と、使い方

npm trendsは、npmからダウンロードされたパッケージの数をグラフ表示出来る、便利なサイトです。
https://www.npmtrends.com/

使用したいライブラリ名を入力することで、そのライブラリのダウンロード数の推移がグラフ表示されます。
ライブラリ名は同時に複数指定出来るので、比較したいライブラリを設定すると、おおよそのトレンドの把握に役立ちます。
例えば、ReactとVueの比較だと以下のような感じです。

単純にダウンロード数を比較するだけでも便利ですが、
類似のライブラリを見つけたり、複数のライブラリの中でどれを使用するかの目安を決めたりする際にも役立つ使い方があるので、以下にその内容を記載します。

便利な使い方

その1: 類似のライブラリを見つける

自分の使いたい機能がありそうなライブラリを見つけたけれど、他にも似たようなライブラリが無いか探したい。そのきっかけとして、npm trendsは役立ちます。
ここでは仮に、先日メンテナンスモードに入ると案内のあった Moment.jsの類似ライブラリを見つけたいと思います。

使用時のキャプチャを見てもらうのが早いと思うので、以下にキャプチャを載せます。

まず、確認したいライブラリのパッケージ名を入力・選択します (今回はmoment)。
すると、そのパッケージ名の横にいくつかの他のパッケージ候補名が表示されます。
これらの候補は一緒に比較されることの多いライブラリなので、
主要な機能として類似のものを揃えている場合が多いです。
そのため、ただ闇雲に機能名で検索して手広く探すよりも、ひとまずこれらの候補の中で自分の欲しい機能を備えているライブラリが無いかをチェックすると、効率的にライブラリ選定が行えるので便利です。

その2: ライブラリに紐づく情報を比較する

ライブラリを入力すると、グラフの下に各ライブラリの情報が表で表示されます。

左から順番に、
GitHubのスターの数、Issueの数、最後にアップデートのあった日、ライブラリの作成日、ライブラリの容量が載っています。
npm trendsではグラフ表示が目立っているため、ダウンロード数のみに目が行きがちですが、
それよりも私はこの表の部分をよく見るようにしています。

例えば、created 🐣 が古い日付で updated 🛠 もかなり前の日付の場合、既にメンテナンスが止まっているライブラリの可能性が高いので、積極的には採用しないかもしれません。
あるいは、 created 🐣 は比較的新しいが stars 🌟 が飛び抜けて高い、ということであれば、そのライブラリはかなり注目度の高いものとして期待されているものかもしれません。

最終的にはここからそれぞれの公式ドキュメントを読んだり、
あるいは実際に使用して性能比較したりという作業が必要になるかもしれませんが、
情報収集における判断材料の目安としては役立つのではないかと思います。

まとめ

フロントエンドのトレンドは移りやすく、ネット上も新旧様々な情報で溢れているため、欲しい情報を得るためだけでも苦労します。
今回取り上げたMoment.jsの場合は公式がかなり親切だったので、代替となるライブラリ候補をいくつか案内してくれていました。ですが、常に各ライブラリでそのような案内があるとは限りません。
そういった際、このようなトレンド把握サイトは役立ちます。
特にnpm trendsの場合は各実数値を元に比較できるので、私は気に入ってよく使うようにしています。

私のZenn初投稿が比較的初心者向けの紹介記事になりましたが、こんな紹介記事でも今後の誰かの助けになれば嬉しく思います。