過去バージョン

ライブラリとは

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

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

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

定番ライブラリ早見表

導入方法

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 利用 (ビルド環境なしで使える)

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

ライブラリ選定の基準

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) ハッシュを付けてセキュリティを担保しましょう。