タイトル: ライブラリ
この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。
<p>本稿は <strong>JavaScript のライブラリ</strong>に関する記事です。JavaScript で開発する際に、UI操作・DOM 操作・通信・状態管理などをまとめて提供してくれる外部ライブラリを扱います。</p>
<p><span style="color:#16a085"><strong>子ページからライブラリを選択してください。</strong></span></p>
<h2>本ページの子ページ</h2>
<ul>
<li><strong><a href="/article/10413">jQuery</a></strong> — DOM 操作・イベント・Ajax を簡潔に書ける老舗ライブラリ</li>
</ul>
<h2>そもそもライブラリとは</h2>
<p>ライブラリとは、ある特定の機能を持つプログラムを<strong>他のプログラムから呼び出して再利用できるよう部品化</strong>したもの、またそれを集めたファイル群です。自分でゼロから書く代わりに、すでに動作実績のある部品を組み合わせることで開発が速く、安全になります。</p>
<p>JavaScript の場合、ライブラリは <strong>npm</strong> / <strong>yarn</strong> / <strong>pnpm</strong> 等のパッケージマネージャ経由で取得し、<code>import</code> や <code><script></code> でロードして使います。</p>
<h2>JavaScript ライブラリの主な分類</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<thead>
<tr><th>分類</th><th>代表例</th><th>用途</th></tr>
</thead>
<tbody>
<tr><td>DOM 操作・ユーティリティ</td><td><a href="/article/10413">jQuery</a>、Lodash</td><td>DOM・配列・オブジェクトの便利ヘルパ</td></tr>
<tr><td>UI フレームワーク</td><td>React、Vue.js、Angular、Svelte</td><td>SPA・コンポーネント指向UI</td></tr>
<tr><td>状態管理</td><td>Redux、Zustand、Pinia、Recoil</td><td>アプリケーション状態の一元管理</td></tr>
<tr><td>HTTP クライアント</td><td>Axios、Ky、標準 <code>fetch</code></td><td>REST / GraphQL 呼び出し</td></tr>
<tr><td>ルーティング</td><td>React Router、Vue Router</td><td>SPA のページ遷移</td></tr>
<tr><td>日付処理</td><td>day.js、date-fns、Luxon (Moment は保守モード)</td><td>日時計算・整形</td></tr>
<tr><td>フォーム / バリデーション</td><td>React Hook Form、Formik、Zod、Yup</td><td>入力フォーム制御・型検証</td></tr>
<tr><td>グラフ・可視化</td><td>Chart.js、D3.js、ECharts、Recharts</td><td>グラフ・可視化</td></tr>
<tr><td>アニメーション</td><td>GSAP、Anime.js、Framer Motion</td><td>UI モーション</td></tr>
<tr><td>テスト</td><td>Jest、Vitest、Cypress、Playwright</td><td>ユニット・E2E テスト</td></tr>
<tr><td>ビルド・バンドラ</td><td>Vite、webpack、esbuild、Rollup、Turbopack</td><td>モジュール束ね・最適化</td></tr>
<tr><td>型</td><td>TypeScript</td><td>静的型付け (本体は言語)</td></tr>
</tbody>
</table>
<h2>取得方法 (npm / yarn / pnpm)</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width:1000px">
<tbody>
<tr>
<td style="background-color:#000000">
<p><span style="color:#ffffff">npm install jquery<br />
npm install axios date-fns<br />
<br />
yarn add react react-dom<br />
pnpm add vue</span></p>
</td>
</tr>
</tbody>
</table>
<p>取得した依存は <code>package.json</code> に記録され、<code>package-lock.json</code> / <code>yarn.lock</code> / <code>pnpm-lock.yaml</code> でバージョンが固定されます。<strong>ロックファイルは必ず Git にコミット</strong>します。</p>
<h2>「ライブラリ」と「フレームワーク」の違い</h2>
<ul>
<li><strong>ライブラリ</strong>: 自分のコードが主役。必要な箇所で部品を「呼び出す」</li>
<li><strong>フレームワーク</strong>: フレームワーク側が主役。ライフサイクルや構造に「自分のコードが組み込まれる」 (Inversion of Control)</li>
<li>境界は曖昧で、jQuery や Lodash はライブラリ寄り、Angular はフレームワーク寄り、React は「ライブラリ」と自称するがエコシステム込みではフレームワーク的に扱われる</li>
</ul>
<h2>選定のポイント</h2>
<ul>
<li><strong>更新が止まっていないか</strong> — npm の <code>last publish</code>、GitHub の Insights</li>
<li><strong>採用実績</strong> — ダウンロード数、利用企業</li>
<li><strong>サイズ</strong> — bundle 解析ツール (bundlephobia 等) で重さを確認</li>
<li><strong>ライセンス</strong> — MIT / Apache 2.0 など商用利用条件</li>
<li><strong>セキュリティ</strong> — <code>npm audit</code> や Snyk 等で脆弱性を定期チェック</li>
<li><strong>TypeScript型定義</strong> — 公式型／<code>@types/*</code> パッケージの有無</li>
</ul>
<h2>注意点</h2>
<ul>
<li>同じ機能のライブラリを重複して入れない (Moment と day.js を両方入れない 等)</li>
<li>古いブラウザ対応が必要なら<strong>Babel + polyfill</strong>を併用</li>
<li>本番ビルドでは未使用コード除去 (Tree Shaking) が効くよう ESM 形式のライブラリを選ぶ</li>
<li>CDN直リンクは便利だが、本番では<strong>SRI (integrity)</strong> 属性付きか、自前ビルドに含める</li>
</ul>
<h2>関連</h2>
<ul>
<li>親カテゴリ: <a href="/article/10034">JavaScript</a></li>
<li>子ページ: <a href="/article/10413">jQuery</a></li>
</ul>