タイトル: ライブラリ
SEOタイトル: JavaScript ライブラリ完全ガイド — jQuery/Lodash/Axios/Three.js から選定基準まで
| この記事の要点 |
|
ライブラリとは
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/lodashES 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) ハッシュを付けてセキュリティを担保しましょう。