こんにちは！
あしたのチームでフロントエンドリードをしております塩野です！
みなさんは快適なフロントエンド生活を送っていらっしゃいますか？
もちろん私も package.json を見るとワクワクが止まらないので毎日GitHubのリポジトリを漁っては dependencies と devDependencies をにらめっこしちゃいます。
今回はフロントエンド開発でよく使うであろうnpmライブラリ、そしてここさえおさえておけば間違いはないだろうというnpmライブラリをずらりと並べてみたので、是非今日のおつまみにしていただければと思います。
筆者について
- TypeScript大好き（バックエンドもフロントエンドもTypeScriptでゴリゴリします）
- 業務ではVue、趣味ではReactをよく使います
- saltyshiomix - GitHub
はじめに
いきなりですがnpmライブラリの便利な探し方を伝授しましょう。
npm.im/パッケージ名 でURLをたたくと、なんとnpmの公式ページにダイレクトアクセスできるのです！
package.json に追加されているライブラリをサクッと検索するのに便利なので、皆さんも是非覚えていってくださいね。
それではいきなりですがライブラリのご紹介に入ります！どどん！
サーバーフレームワーク
- NestJS - A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) 🚀
筆者のイチオシサーバーフレームワークです。
デコレーター（ @Get() のような書き方）を駆使し、Angularにインスパイアされたフレームワークです。学習コストこそありますが、モジュール単位で機能を実装できるため、大規模アプリケーションに向いているでしょう。
expressだけでなくfastifyにも対応しています。
- hapi - The Simple, Secure Framework Developers Trust
hapiはPromiseをベースとして作られているので、グローバルで unhandledRejection が発生した場合の考慮などPromiseベースでサーバー側を実装したい場合に候補にあがるでしょう。Webでよく利用されるスタック（認証等）も内蔵されていることが多いです。
クライアントフレームワーク
React - A declarative, efficient, and flexible JavaScript library for building user interfaces.
NEXT.js - The React Framework
ReactはFacebook製のUIライブラリで、Virtual DOMが実装されているので複雑なUIのパフォーマンスを保証します。
NEXT.jsはReactを用いたサーバーサイドレンダリング（SSR）のフレームワークで、例えばブログで検索エンジンに登録させるために利用することもあるでしょう。
筆者はReactとVueを利用していますが、日本企業ではVueの方が利用されている印象を持ちます。ただし筆者はReact推しです。
Vue - 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Nuxt.js - The Intuitive Vue Framework
Vueは中国を中心として人気なUIライブラリで、クライアントサイドMVVMフレームワークとして登場し、双方向データバインディングも提供したことで盛り上がりました。Reactが話題になるようになってからは、Reactを追うようにVirtual DOMやSFCの方向に寄っていったため、現在はReactもVueも似たような機能が用意されています。
Nuxt.jsは名前から推測がつくかもしれませんが、Vueを利用したサーバーサイドレンダリングのフレームワークです。 *.vue ファイルをデフォルトで利用できるので、Vueを扱ったことがある方なら扱いやすいでしょう。
- SVELTE - Cybernetically enhanced web apps
- sapper - The next small thing in web development, powered by Svelte
SVELTEは上記2つとは異なり、Virtual DOMを利用していません。純粋なJavaScriptのみで最小限に記述され、パフォーマンスを最大化していることをメリットに挙げています。書き方は *.vue テンプレートに似ています。
sapperはSVELTEを利用したサーバーサイドレンダリングのフレームワークです。やはりリッチなJavaScript製UIが検索にかかるようにするためには、個別対応が必要になるからですね。
バンドラー
- Webpack - A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
- Rollup - Next-generation ES module bundler
最近のJavaScriptはバンドルすることを前提に作られたものが多いため、ほとんどの方はWebpackを触ったことがあるのではないでしょうか。 チューニングこそ大変なものの、JavaScriptの可能性を広げる最高のツールですので、まずはチュートリアルから始めてみることをおすすめします。
WebpackとRollupに関してはstarter kitを作成したことがあるので良かったら見てみてください。
ORM (Object Relation Mapping)
- prisma - Modern database access (ORM alternative) for Node.js & TypeScript | PostgreSQL, MySQL & SQLite
- @prisma/clien
- @prisma/cli
PrismaはORMの代替を目指した最先端のライブラリです。 DB定義からソースコードへ逆変換したり、型を自動生成したり、よく使うメソッド群が自動で定義されたり、良いことがたくさんあります。
暗号化
- bcrypt - bcrypt for NodeJs
ユーザーのパスワードの暗号化等によく使います。 bcryptくらい安全なものを利用していれば特に問題ないでしょう。
メール
- Twilio SendGrid - The Official Twilio SendGrid Led, Community Driven Node.js API Library
筆者はSendGridが最も安定してメール配信できるサービスだと感じております。 特に日本の携帯電話はスパム判定が厳しく、メール送信元の信頼性が低い場合にはスパム扱いどころかメールすら届きません。mailgunではそのようなことがありました。
ただしSendGridを利用するには審査が必要で、ホームページと身分証明が必要なので、注意してくださいね。
決済
ビジネスには決済がつきものです。 これに関してはクレジットカードならStripe一択ですね。
HTTP通信
- axios - Promise based HTTP client for the browser and node.js
- ky - 🌳 Tiny & elegant HTTP client based on window.fetch
axiosはPromiseベースのJS処理が主流になってから有名になったJSライブラリです。古いブラウザへのサポートも広いのがいいところです。
kyは日本語のKY（空気読めない）からネーミングされていますが、これはまだ window.fetch がモダンブラウザでも安定していない頃からリリースしていたためと思われます。 筆者はモダンブラウザの機能がかなり安定してきた今日においては、kyを多用しております。
日付操作
- dayjs - ⏰ Day.js 2KB immutable date-time library alternative to Moment.js with the same modern API
dayjsはmomentの代替として生まれた日付操作ライブラリで、軽量なため重宝します。 機能は最小限に留められていますが、日付操作がクリティカルなサービスでない限りはdayjsで十分でしょう。
ランダム文字列
- uuid - Generate RFC-compliant UUIDs in JavaScript
- cuid - Collision-resistant ids optimized for horizontal scaling and performance.
uuidは昔からあるランダム文字列生成ライブラリです。ランダム文字列の衝突を防ぐためによく使われてきました。
cuidは最近話題になっているランダム文字列生成ライブラリで、文字列生成までのオーバーヘッドが少なく高速であるのが特徴です。
おわりに
いかがでしたか？ 今回は広く浅く最小限にライブラリの紹介をしてみたので、物足りない方もいらっしゃるかもしれませんが、個人的にベストプラクティスを実現できるものだけを厳選したつもりです。
もし使ったことがないライブラリがありましたら、是非使ってみて感想を聞かせてくださいね！
それでは良きフロントエンドライフを！！
