この記事の要点

ライブラリは特定機能を提供する部品。フレームワークと違い「呼び出す側が主導権を持つ」 定番: Lodash (ユーティリティ) / Axios (HTTP) / Day.js (日付) / Three.js (3D) 可視化: Chart.js (簡単) / D3.js (低レベル / 自由度高) / ECharts UI 部品: Swiper (スライダー) / Tippy.js (ツールチップ) / FullCalendar 導入は npm/yarn/pnpm または CDN。Bundle サイズ削減には Tree Shaking 対応版を選ぶ

ライブラリとは

JavaScript ライブラリとは、特定の目的に絞った機能をひとまとめにした再利用可能なコード群です。呼び出す側 (アプリケーション) が主導権を持ち、必要なタイミングで関数やクラスを呼び出します。

これに対して フレームワークは「制御の反転 (IoC)」が起こり、フレームワーク側が主導でアプリケーションのコード (コンポーネント / ルーティングハンドラなど) を呼び出します。

ライブラリとフレームワークの違い

観点	ライブラリ	フレームワーク
主導権	アプリケーション側	フレームワーク側 (IoC)
導入	必要な部分にだけ使う	プロジェクト全体の設計を規定
例	Lodash, Axios, Day.js, Three.js	React, Vue, Angular, Next.js
学習コスト	低い (API のみ)	高い (アーキ全体)
差し替え	容易 (Axios → fetch など)	困難 (React → Vue は実質書き直し)

定番ライブラリ早見表

カテゴリ	ライブラリ	主な用途	備考
DOM 操作	jQuery	$.ajax / $(selector) / アニメーション	歴史的。新規採用は非推奨
ユーティリティ	Lodash	debounce / cloneDeep / groupBy	ES2015+ で代替可も依然強力
HTTP クライアント	Axios	XHR ラッパ、インターセプタ	fetch API でも代替可
日付	Day.js / date-fns	format / parse / diff	Moment.js は非推奨
3D	Three.js	WebGL の高水準ラッパ	ゲーム / 可視化
グラフ	Chart.js / D3.js	棒 / 折れ線 / 散布図	D3 は低レベル自由度高
スライダー	Swiper	カルーセル / スワイプ UI	モバイル特化
ツールチップ	Tippy.js / Popper.js	ポップオーバ / メニュー位置調整	Tippy は Popper ベース
バリデーション	Zod / Yup	型安全なフォーム検証	TypeScript 推し
状態管理	Zustand / Jotai	React 用軽量 store	Redux 代替

導入方法

npm / yarn / pnpm でインストール

# npm
npm install lodash axios dayjs

# yarn
yarn add lodash axios dayjs

# pnpm (推奨: 高速 / ディスク節約)
pnpm add lodash axios dayjs

# 開発専用 (型定義など)
npm install -D @types/lodash

ES Modules で import

// ESM (推奨)
import axios from 'axios';
import dayjs from 'dayjs';
import { debounce, cloneDeep } from 'lodash-es';  // ★ Tree Shaking 対応

// 個別 import (Bundle サイズ削減)
import debounce from 'lodash/debounce';

// CommonJS (Node の旧形式)
const axios = require('axios');
const { debounce } = require('lodash');

CDN 利用 (ビルド環境なしで使える)

<!-- Swiper の例 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
  const swiper = new Swiper('.swiper', { loop: true });
</script>

<!-- ES Modules CDN (esm.sh / unpkg) -->
<script type="module">
  import dayjs from 'https://esm.sh/dayjs@1';
  console.log(dayjs().format('YYYY-MM-DD'));
</script>

Tree Shaking でバンドルサイズ削減

未使用コードを除外する仕組み。ESM 形式のライブラリでのみ働きます:

// ❌ NG: ライブラリ全体を取り込む (Lodash 約 70KB)
import _ from 'lodash';
_.debounce(fn, 300);

// ✅ Tree Shaking 対応 (lodash-es は ESM 出力)
import { debounce } from 'lodash-es';

// ✅ 個別 import (CommonJS でも有効)
import debounce from 'lodash/debounce';

// 計測: 各ライブラリのサイズを Bundlephobia で確認
// https://bundlephobia.com/package/lodash

ライブラリ選定の基準

チェック項目	確認方法
メンテナンス継続	npm の最終リリース日 / GitHub の commit 頻度
週間ダウンロード数	npmjs.com / npmtrends.com
バンドルサイズ	bundlephobia.com
Tree Shaking 対応	package.json に "sideEffects": false
TypeScript 型定義	パッケージに .d.ts 同梱 or @types/xxx あり
ライセンス	MIT / Apache-2.0 推奨。GPL は商用注意
セキュリティ脆弱性	npm audit / Snyk / Socket

jQuery は今でも使うべきか?

結論: 新規プロジェクトでは不要。理由:

• DOM 操作 → document.querySelectorAll() で十分
• Ajax → fetch() / axios
• アニメーション → CSS Transitions / Web Animations API
• イベント → addEventListener()

ただし WordPress / 古い管理画面では依然主役なので、保守要員としては学んで損はありません。

FAQ

Q: ライブラリとフレームワーク、どちらを選ぶべき?
A: 小規模 / 部分導入 → ライブラリ。アプリ全体を作る → フレームワーク。

Q: ライブラリが多すぎて選べない
A: 「週間ダウンロード数」「最終更新日」「TypeScript サポート」の 3 軸で絞ると失敗しにくい。npmtrends.com で複数比較が便利です。

Q: CDN と npm、どちらで入れるべき?
A: 本番ビルドする SPA → npm。プロトタイプ / 小さなページ → CDN。ただし CDN はサブリソース完全性 (SRI) ハッシュを付けてセキュリティを担保しましょう。