フロントエンド開発体験を向上させる10のnpmライブラリ【2024年版】
目次
はじめに
この記事では、フロントエンドの開発体験を向上させるnpmライブラリを10個紹介します。
「開発体験を向上」と書いた通り、ここでは機能の開発に使用するライブラリ・フレームワーク（Vue.js、Next.js等）は含めません。
特にモダンな開発環境に頻繁に導入されているライブラリに絞ってまとめました。
また、各ライブラリの紹介は概要程度に留め、詳細な使用方法はここでは解説しません。
この記事で紹介するnpmライブラリ
| 種別 | ライブラリ |
|---|---|
| ビルド | Vite |
| フォーマット | Prettier Biome |
| 静的解析 | ESLint Biome |
| Gitフック | husky lint-staged |
| APIモック | msw |
| UIコンポーネントカタログ | Storybook |
| ユニットテスト | Vitest |
| E2Eテスト | Playwright |
開発体験を向上させる10のツール
Vite
Viteは高速なビルドツールです。
主に高速なHMRとESモジュールを利用した豊富な拡張機能を提供する開発サーバー、高度に最適化されたビルドツールの2つで構成されています。
以前はモジュールバンドラーであるWebpackが使われることが多かったですが、高速で複雑な設定不要で簡単に使うことができるViteの人気が上がっています。
vite
Prettier
Prettierはコードフォーマッターです。
フォーマットのルールを指定してフォーマットを自動化することで、コードの読みやすさの向上やコードの一貫性の維持をすることができます。
他のツールと組み合わせることで任意のタイミングでフォーマットを実行することも可能です。
Prettier
ESLint
ESLintはコードの静的解析ツールです。
静的解析を行うことで、コーディングの際にエラーや警告を受け取ることができ、バグの早期発見やコードの一貫性の維持に期待できます。
ESLint
Biome
Biomeはフォーマットと静的解析を高速に行うことができるツールです。
Rustで構築されており高速に動作することから、PrettierとESLintの代替として注目されています。
一方で、PrettierやESLintに存在していてBiomeにはないルールが存在していたり、js・ts・jsx・tsx・jsonのみのサポートのためHTML・Vue・Svelte・CSS・Markdownには対応していない等の問題もあります。
今後の開発が気になるライブラリです。
Biome
husky・lint-staged
huskyはコミットやプッシュ時に任意の処理を実行するためのツールです。
lint-stagedはGitでステージング状態のファイルに対してのみ任意の処理を実行するためのライブラリです。
husky・lint-stagedをPrettierやESLintと合わせて使うことで、コミット時に変更があったファイルにだけフォーマット・静的解析を行うことができます。
husky
lint-staged
msw
mswは、APIのモックサーバーを作成するためのツールです。
実際のAPIのレスポンスの代わりにモックデータを返すことできるため、APIの実装前にフロントエンドの開発を進めることができます。
単純にレスポンスを返す他に、遅延の発生・任意のネットワークエラーの発生、クエリパラメータの取得等も行えるため、APIと連携する部分の開発が行いやすくなります。
msw
Storybook
StorybookはUIコンポーネントの開発とテストを支援するツールです。
Storyファイルというファイルを作成することで、UIコンポーネントを独立した状態で確認・テストすることができます。
Storybook画面（公式サイトより）
UIコンポーネントの一覧を作成したり、UIコンポーネントの概要・属性を簡単に把握することができるため、コンポーネントの開発に役立ちます。
個別のコンポーネントを独立して開発・テストでき、実際のアプリケーションとは別に進行することができます。これにより、コンポーネントの再利用性やテストの容易性が向上します。
Storybook
また、Chromaticというホスティングサービスと組み合わせることにより、コンポーネントの視覚的なリグレッションテストを行うこともできます。
Chromatic
Vitest
Vitestは高速なユニットテストフレームワークです。
既にViteを導入しているプロジェクトであれば共通の設定を適用してテストを行うことができます。（Vite以外のプロジェクトでも利用することは可能です。）
VItestが登場する前は、テストフレームワークとしてJestが使われることが多かったですが、より高速にテストを行うことができるVitestが注目されるようになりました。
vitest
Playwright
PlaywrightはE2Eテスト自動化フレームワークです。
Chrome、Safari、Firefoxに対応しており、E2Eテストを簡単に実行することができます。
Playwright
番外編
npmライブラリではないが、合わせて知っておきたいツール等を紹介します。
Bun
BunはNode.jsやDenoと同じJavaScriptランタイムです。
Bunのロゴ（公式サイトより）
Bunの一番の特徴は実行速度です。
Safari用に構築されたパフォーマンス重視のJS エンジンJavaScriptCoreを採用することにより、高速な動作を可能にしています。
また、Bunはバンドラー・テストランナー・Node.js互換のパッケージマネージャーも備えているため、すぐに開発環境を用意することができます。
Node.jsとの互換性もあるため、既存のプロジェクトにも導入しやすいです。
Corepack
CorepackはNode.js v14.19.0から導入されたnpmやyarnなどのパッケージマネージャーを管理するツールです。
Corepackを有効にした状態でpackage.jsonに使用するパッケージを記載しておけば、指定したパッケージマネージャーを自動で使用することができます。
まとめ
この記事では、フロントエンドの開発体験を向上させるnpmライブラリを10個紹介しました。
上記のライブラリは使用されることが多いですが、機能の開発をする上では必須ではありません。
むしろ、ライブラリを増やすことや運用やメンテナンスのコストを上げることに繋がる場合もあります。
各ライブラリの概要を把握した上で、必要に応じて導入を検討するのがいいでしょう。
