実務で使っている npm パッケージ 10 選

Posted at 2026-10-25

ESLint でコードレビュー前のミスを減らした

入社して 1 か月目、同じようなスタイルの指摘を何度もレビューで受けました。インデントやセミコロン、未使用変数など、人によって異なる判断が衝突していたのです。特に未使用の import や console.log の残しを忘れがちで、レビューで指摘されるたびに恥ずかしかった。

npm install --save-dev eslint
npx eslint --init

ESLint は .eslintrc.json でルールを定義できる。チームで共通の設定ファイルをリポジトリに入れておけば、誰が書いても同じ基準でチェックできる。VS Code の拡張機能と連動させると、保存時に自動でエラー表示してくれる。

{
  "extends": ["eslint:recommended"],
  "rules": {
    "no-unused-vars": "error",
    "no-console": "warn"
  }
}

導入後、レビューで指摘される項目が大幅に減った。特に CI に組み込めば、マージ前に自動チェックできるので、人の目にかかる前に問題を解決できる。チーム全体のコード品質が底上げされた。

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

最新ツール・トレンド情報をずんだもん×めたんが解説するYouTubeチャンネルを運営しています！
いいね、チャンネル登録してもらえると嬉しいです🙇‍♂️

ハジメル.dev: https://hajimeru-dev.vercel.app/

「ひとりで続けるのは難しい」「何から学べばいいか分からない」という方向けに、
プログラミングのマンツーマンレッスンサービス「ハジメル.dev」も運営しています。
未経験OK・オンライン完結・月額制/違約金なしなので、気軽に無料相談してみてください🙇‍♂️

海外テックニュースを追いたいけど、英語や情報量の多さで大変…という方向けに、
Hacker News の話題を日本語でサクッと追える「HackerNews 日本語まとめ & AI要約」
を個人開発しました！
技術トレンド収集に使ってもらえると嬉しいです🔥🙇‍♂️
→ HackerNews 日本語まとめ & AI要約: https://hn-matome-2ht.pages.dev/

「ニャンパイアサバイバー」というヴァンパイアサバイバーリスペクトのゲームを作成しました！
もしよろしければ遊んで頂けると嬉しいです😭

習い事教室の先生向けに、SNS 投稿・生徒募集・保護者通知の文章を AI で生成する Web サービス「おしらせAI」を個人開発しました。Next.js + Supabase + LLM で構成しており、無料で月 10 回まで試用できます。よければ触ってみてください。

→ おしらせAI: https://oshirase-ai.vercel.app/

言いたいことがうまく伝わらない…という方向けに、会話の言い方を添削する「伝え方ラボ」を開発中です。
場面を選んで自分の言葉で返すと、何が伝わっていないかの指摘と、そのまま使える言い換えが返ってきます。
ChatGPT に相談すると褒めから入って直すべきところが残りがちなので、指摘側に振り切りました。
現在は公開時にお知らせするメール登録のみ受付中です🙇‍♂️

→ 伝え方ラボ: https://tsutaekata-lab.pages.dev/

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

Prettier でコード整形を自動化した

チームメンバーたちはそれぞれエディタ設定が違い、フォーマットの違いが Git 上で差分が出てしまうことがありました。特にオブジェクトの改行や末尾カンマの有無で、不要な diff が発生していた。手動で整えるのも面倒で、時間がかかっていました。

npm install --save-dev prettier
npx prettier --write .

Prettier は設定次第で一貫したフォーマットを適用できる。.prettierrc にルールを書いておけば、保存時やコミット前に自動整形できる。VS Code で「Save on Format」を有効にすれば、自然にチーム全体で統一感のあるコードになる。

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}

導入後、Git 上の不要な diff が激減。コードレビューの際もフォーマットの違いで時間を取られることがなくなった。チームでのコード統一が簡単になったのは非常に大きなメリットだった。

Husky + lint-staged でコミット前にチェックを強制した

Git commit をしようとしても、ESLint や Prettier を忘れてしまい、後で気づいて修正することがありました。特に忙しいときほど、コミット前のチェックを怠りがちで、不具合が混入してしまうことがありました。

npm install --save-dev husky lint-staged
npx husky init

Husky は Git フックを簡単に設定できる。lint-staged はステージングされたファイルのみに対してチェックをかけるため、実行時間も短い。コミット前に自動で ESLint と Prettier を実行すれば、問題のあるコードが混入することを防できる。

// package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

npx husky add .husky/pre-commit "npx lint-staged"

導入後、チーム全体でコード品質が一定水準に保たれるようになった。コミット前に自動チェックが走るので、手動で忘れてしまう心配もなくなった。CI でチェックする前に、ローカルで問題を解決できるので、効率もアップした。

Jest でテスト環境を整えた

テストを書く習慣がなく、バグを見つけるまでに時間がかかっていました。特にロジックが複雑な関数やユーティリティは、手動で動作確認するのに時間がかかっていました。テストがないとリファクタリングも怖く、コードが固まってしまっていました。

npm install --save-dev jest

Jest は設定がほとんど不要で、すぐに使える。テストファイルを __tests__ ディレクトリや .test.js 拡張子で配置すれば、npm test で実行できる。モック機能も充実していて、外部 API やモジュールの依存も簡単に切り離せる。

// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

テストを書く習慰が身について、バグの検出速度が上がった。特にリファクタリング時にテストがあれば、安心して変更できる。チームでテストカバレッジを意識するようになり、コードの信頼性も高まった。

Axios で HTTP リクエストを簡潔に書いた

fetch API は便利だが、エラーハンドリングが面倒で、レスポンスの JSON 変換も手動で行う必要がありました。特にタイムアウトやリクエストキャンセルなど、高度な機能を実装するのに追加のコードが必要でした。

npm install axios

Axios は直感的な API で、レスポンスは自動で JSON に変換される。タイムアウトやヘッダーの設定も簡単で、リクエスト・レスポンスのインターセプターも用意されている。エラーハンドリングも try-catch で統一できる。

import axios from 'axios';

axios.get('/api/users', {
  timeout: 5000,
  headers: { 'Authorization': `Bearer ${token}` }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

Axios を使って以降、API 通信のコードが非常に読みやすくなった。特にインターセプターを使ってトークンの自動付与やエラー集約ができるので、保守性が大幅に向上した。fetch に比べても、開発体験が良好だ。

Day.js で日付操作を簡潔にした

JavaScript の Date オブジェクトは使いづらく、フォーマットや比較、加算・減算などが面倒でした。特に「1 ヶ月前」や「今日の午前 9 時」のような計算は、自分でロジックを書く必要があり、バグも発生しやすかった。

npm install dayjs

Day.js は Moment.js の軽量代替ライブラリで、API が似ている。プラグイン形式で機能を拡張できる。日付のフォーマット・解析・比較・加算・減算が一行でできる。Moment.js に比べてサイズも非常に小さい。

const dayjs = require('dayjs');
const relativeTime = require('dayjs/plugin/relativeTime');
dayjs.extend(relativeTime);

console.log(dayjs().format('YYYY-MM-DD'));
console.log(dayjs().add(1, 'month').fromNow());

Day.js を使って以降、日付関連のコードが非常に簡潔になった。特に相対時間表示やフォーマット変換が容易なので、UI での日付表示も統一しやすくなった。Moment.js から移行しても違和感なく使えた。

Lodash で繰り返しロジックを削減した

配列のフィルタリングやオブジェクトの深いコピー、デバウンス処理など、よく使うロジックを毎回自分で書いていました。特にネストが深いオブジェクトの操作や、パフォーマンスが気になる関数の最適化が難しかった。

npm install lodash

Lodash は便利なユーティリティ関数が豊富。_.debounce, _.cloneDeep, _.groupBy など、よく使う関数が揃っている。個別にインポートできるので、不要なコードがバンドルサイズに影響しない。

import debounce from 'lodash/debounce';
import cloneDeep from 'lodash/cloneDeep';

const handleSearch = debounce((query) => {
  // 検索処理
}, 300);

const copied = cloneDeep(originalData);

Lodash を使って以降、自作ユーティリティのメンテナンスコストが減った。特に debounce や throttle は、検索やスクロールイベントの最適化に非常に役立つ。ネイティブの JavaScript で代替可能な部分もあるが、安定性と可読性の高さは魅力的だ。

dotenv で環境変数管理を簡単にした

API キーやデータベースの接続情報など、環境ごとに異なる設定を .env ファイルで管理したいと思いましたが、Node.js では標準で読み込む仕組みがありませんでした。特にチーム開発では、各自が異なる設定ファイルを作成すると、共有や管理が難しかった。

npm install dotenv

dotenv は .env ファイルから環境変数を自動で読み込んでくれる。開発環境と本番環境で異なるファイルを使用できる。.gitignore に .env を追加すれば、機密情報も安全に管理できる。

# .env
DB_HOST=localhost
DB_USER=root
API_KEY=your_api_key_here

require('dotenv').config();
console.log(process.env.DB_HOST);

dotenv を使って以降、環境ごとの設定管理が非常に簡単になった。特にチームで .env.example を共有すれば、新しいメンバーでもすぐに開発環境を構築できる。環境変数の typo や漏洩リスクも減少した。

Nodemon で開発サーバーの再起動を自動化した

開発中によくあるのが、コードを修正するたびに手動でサーバーを再起動する作業。特に API サーバーを開発していると、変更後に毎回 Ctrl+C してから node app.js を実行するのが非常に面倒でした。

npm install --save-dev nodemon

Nodemon はファイルの変更を監視し、自動でプロセスを再起動してくれる。開発時のみ使用し、本番では通常の node コマンドを使えば良い。--watch オプションで監視するディレクトリも指定できる。

// package.json
{
  "scripts": {
    "dev": "nodemon app.js"
  }
}

npm run dev

Nodemon を使って以降、開発効率が大幅に向上した。コードを修正するたびに手動で再起動する手間がなくなり、開発のリズムが良くなった。特に API の開発では、すぐに変更を確認できるので、デバッグも楽になった。

Axios で API クライアントを統一した

複数の API エンドポイントにリクエストを送る場面がありましたが、毎回ヘッダーやベース URL を設定するのが面倒で、設定の漏れや不一致が発生していました。特に認証トークンの管理やエラー処理も、各リクエストごとに書いていたので、コードが重複していました。

npm install axios

Axios のインスタンス機能を使えば、ベース URL やヘッダーを一元管理できる。インターセプターを設定すれば、リクエスト前にトークンを自動で付与でき、レスポンスのエラーも一括処理できる。

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default apiClient;

API クライアントを統一して以降、ヘッダーやエラー処理の漏れがなくなった。特にトークンの自動付与やレスポンスの統一処理により、各コンポーネントでの API 呼び出しコードが非常に簡潔になった。メンテナンス性も大幅に向上した。

まとめ

今回紹介した 10 個の npm パッケージは、すべて実際の開発現場で使用しているもので、開発効率やコード品質の向上に大きく貢献してきました。特に ESLint や Prettier はコードの統一に、Jest はテストの文化醸成に、Axios は API 通信の簡略化にそれぞれ大きな役割を果たしています。これらのツールを導入することで、チームでの開発速度や品質が確実に向上するので、まずは 1 つ試してみてほしいです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up