React歴4年目のフロントエンドエンジニアが勧めるnpmパッケージ

フロントエンド開発を行うにあたり、難しいと思うことの 1 つに npm パッケージの選定があると思います。

プロジェクトごとにそこまでコロコロ変えるものではないものの、パッケージを知っているのと知らないのでは開発難度も大きく変わってくるわけでして。

個人的におすすめな npm パッケージを書いていこうと思います。

create-react-app

言わずもがな、Facebook 製の開発環境構築パッケージです。

SSR が不要なときはこれ一択ですね。

Next.js

以前まであまり好きではなかったのですが、v9.3 を迎えてからはぐっと使いやすくなった印象があります。

型周りも非常にサポートが強く、公式ドキュメントも結構シンプルで見やすいのが良いですね。

ただ、webpack の設定周りの修正しずらさは結構痛い感じはします。

SSR が必要なときはこれ一択かなと。

Gatsby

ブログサイトを作りたいときは Next.js より Gatsby のほうが好きです。

内部的に GraphQL を使用し様々なデータを持ってこれるのはユニークだよなーと。

設定周りの拡張性も高く、かゆいところに手が届きやすい印象があります。

一方、公式サイトは正直読みやすいとは言えず、ドキュメントが古い箇所も結構見られます。

決して初心者向けではないですが、個人的には結構好きです。

React Hook Form

フォーム周りについては、Redux Form に始まり、React Final Form や Formik など様々なパッケージが流行ってきました。

ただ、現状 hooks に対応してかつ使いやすいパッケージは React Hook Form が一歩抜きん出てるかなーという印象です。

Formik は hooks への対応が遅れたのが痛かったなーと。

公式サイトは日本語対応もされており、おしゃれで読みやすく、初心者の方にも優しいですね。

axios

fetch 系のパッケージ、説明不要ですね。

React-Select

未だに根強い人気を持つセレクト系のパッケージです。

ちょっと古くさい部分も出てきましたが、それでも使ってみると、確かに使いやすいんですよねぇ…。

バグも少なく、他のパッケージとの親和性も高く、良いパッケージだと思います。

React Waypoint

最近はじめて使いました、いわゆる遅延読み込みなどに使えるパッケージです。

似たようなパッケージも結構あるのでこれが一番良い！とは言い切れませんが。

ざくっと使った感じ、直感的に使え、かなりシンプルで好印象を受けました。

React Scroll のほうが高機能な印象は受けたので、ケースバイケースで使い分ければ良いのかなと。

React-Toastify

いわゆるスナックバーってやつですね、これまたシンプルで使いやすいです。

スナックバー系のパッケージはレスポンシブ対応が甘いのが多いのですが、React-Toastify はしっかり作ってあって安心して使えます。

SweetAlert

ポップアップ系のパッケージは素の SweetAlert を使うことが多いです。

React コンポーネント化したラッパーパッケージも結構ありますが、どれもクオリティは低い印象です。

とはいえよくよく考えれば、hooks と組み合わせて関数を呼び出せば良いだけなので、素のやつで十分すぎますね。

SweetAlert のカスタマイズパッケージである lity も有名ですよね、使い心地はどうなんだろう。

React Image Lightbox

画像などのビューワー系では Lightbox を使うことが多いです。

元の Lightbox は確か jQuery に依存していた記憶がありますが…内部的には使ってるのかな？

とはいえ、こいつは React コンポーネントによるラッパーパッケージなので、自分は気にせず使っちゃいます。

シンプルかつ使いやすいので、簡単な画像ビューワーを組む際にはこいつでさくっと組んじゃいます。

スタイリングはちょっとクセがある印象ですが、上書きもしやすいのでさほど気になりません。

react-aria-modal

普通のモーダルです、あまりメジャーではない印象です。

ただ、このパッケージは React の公式で推奨されているパッケージなので、最近はこれを使うようになりました。

結構おかたいパッケージなので、使い回せると上級者な印象です。

babel-plugin-react-css-modules

当ブログでもちょくちょく話題に出すスタイリングパッケージです。

詳細は省略しますが、Next.js への対応方法が未だにわかっておらず…。

TypeScript に対応する場合は@types/react-css-modules を、Gatsby に対応する場合は gatsby-plugin-react-css-modules を入れれば動きます。

yup

バリデーション用のパッケージです、メジャーなフォーム用パッケージは yup に対応されていますね。

結構複雑なバリデーションも組めますが、自分は基本的にシンプルなものしか使いません。

公式ドキュメントが読みづらいのがちょっと惜しいです。

Day.js

Moment.js の代替パッケージとして Day.js を使うことが多いです。

おそらく一番手は date-fns だと思うんですが、Moment.js に慣れていた身としては Day.js のほうが好きですね。

ress

reset 系の css ですね、3 番手か 4 番手あたりにあがる印象です。

ress はクセがない一方で、物足りない部分もあるので、global な css も必須です。

最近はずっと ress 一辺倒なので、暇なときに他のパッケージも試してみたいなーと思っています。

React Icons

アイコンが必要なときはとりあえずこのパッケージを使います。

シンプルなものからちょっとクセのあるアイコンまで、大量に入っています。

いちいち svg で準備するのも面倒ですし、業務系などでは重宝します。

Typefaces

Google が無償で公開している Google Fonts を npm パッケージで使えるようにしてあるというすごいパッケージです。

今までだと Web Font Loader を噛ませたりしてちょー面倒だったのですが、これを入れると一発で解決します。

ちなみに、自分のサイトのロゴはこれを使ってたりします。

最近見つけた、結構えげつないパッケージです。

no-scroll

スクロールバーの表示をトグルしたい場合に使います、あまり明示的に使うことはないですかね？

ポップアップを自作する場合などに使います。

react-lines-ellipsis

複数行の文章の末尾を省略して三点リーダーに置き換えてくれるパッケージです。

類似パッケージもありますが、精度はこれが一番高かったかなーと。

レスポンシブ対応はちょっと甘い印象です。

自分はカスタム hooks で対応しましたが、公式の HoC でちゃんと動くのかな？

React Measure

DOM のサイズを測るときに使えるパッケージです、レスポンシブ対応も強いです。

hooks に対応されていないため、ちょっとレガシーな印象は受けますが、今のところこれより良いパッケージに出会えていないです。

sass-mq

Sass によるレスポンシブ対応をぐっと楽にしてくれるパッケージです。

react-share

各種 sns へのシェアボタンをさくっと作りたいときに使えます、最近はあまり使ってないです。

個性は失われるため、業務系がベターかなと。

TypeScript FSA

Redux × TypeScript ではなんやかんやで TypeScript FSA を使っています。

redux-actions に移りたいのですが、開発者が匙を投げちゃったため、こっち一択かなぁと。

とはいえ、これを使って困ったことはあまりないですね。

シンプルですが、型周りはそこそこ強いです。

uniqid

key を付与する際に、ユニーク値が存在しないケースに使います。

hooks によって、ぐっと使いやすくなったパッケージですよね。

類似パッケージも多いので、ケースバイケースで良いと思います。

react-dropzone

ファイルのドラッグドロップを実装する際に使います、これ以外選択肢がない印象です。

React Spinners

いわゆるローディングアニメーションの詰め合わせパッケージです。

類似パッケージも色々ありますが、自分はシンプルでおしゃれな React Spinners をよく使います。

カスタマイズ性も良い塩梅で、クセなく使えるのでオススメです。

react-lazyload

画像などの遅延読み込みで使えるパッケージです、説明不要ですかね？

精度はそこそこな印象です。

今回はメジャー過ぎず、かつかなり技術寄りな選定にしてみました。

上記にあげた npm パッケージを使えば、自分が普段作っているサイトと同じものが作れちゃいます。

slider 系のパッケージはバグが多く、レスポンシブ対応があまいものが多いので最近は使わなくなりました。

カレンダー系も、今は何が一番メジャーなんですかね？

世のパッケージ開発者の方には、本当に頭が上がりません。