【JavaScript入門】ライブラリやフレームワーク
JavaScript の世界には UI 構築から 3D レンダリング、バイナリ生成まで目的別ライブラリが無数にあります。ここでは「ライブラリとフレームワークの違い」を整理したうえで、代表的なツールを俯瞰し、最後に“選んだパッケージの公式サイトを即オープンできるミニページ”を作ってみます。
１．ライブラリとフレームワークの位置づけ
| 視点 | ライブラリ | フレームワーク |
|---|---|---|
| 制御の主導権 | 自分のコード が呼び出す | 枠組み側 が流れを制御 |
| 学習コスト | 小さめ（関数単位） | 大きめ（規約・DI など） |
| 自由度 | 高い | 低いが統一感◎ |
２．ジャンル別・主要ツール早見表
| カテゴリ | 名称 | タイプ | 特徴 |
|---|---|---|---|
| DOM 操作 | jQuery | L | 軽量スクリプト追加にまだ強い |
| UI コンポーネント | React | L | JSX + 仮想 DOM で高速再描画 |
| SPA フルスタック | Angular | F | TypeScript 前提・DI/Router/CLI 完備 |
| 軽量 SPA | Vue.js | F | 学習コスト最小・SFC ✧ |
| 可視化 | D3.js | L | データ⇄DOM バインディングで自在表現 |
| 可視化 (簡易) | Chart.js | L | 数行で美しいグラフ |
| WebGL 3D | three.js | L | 低レベル API を抽象化 |
| コードエディタ | Ace | L | 高速シンタックスハイライト |
| 2D/ゲーム描画 | PixiJS | L | スプライト大量描画に最適 |
| バイナリ生成 | JSZip | L | ブラウザで ZIP 作成 |
L = Library / F = Framework
React は“UI ライブラリ”と公式に表明しているため L に分類。
３．サンプル：選択したパッケージの公式サイトを即表示
ファイル名： libs_selector.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>📚 JSライブラリ早見パネル</title>
<style>
body{font-family:"Segoe UI",sans-serif;background:#f4f9ff;margin:2rem}
h1 {font-size:1.8rem;text-align:center;margin-bottom:1rem}
select,button{font-size:1rem;padding:.4rem .8rem;margin:.4rem}
iframe{width:100%;height:480px;border:1px solid #888;border-radius:6px}
</style>
</head>
<body>
<h1>📚 JavaScriptライブラリ・フレームワーク一覧</h1>
<label>ライブラリを選択:
<select id="sel">
<option value="https://reactjs.org/">React</option>
<option value="https://angular.io/">Angular</option>
<option value="https://vuejs.org/">Vue.js</option>
<option value="https://jquery.com/">jQuery</option>
<option value="https://threejs.org/">three.js</option>
</select>
</label>
<button onclick="load()">サイトを表示</button>
<iframe id="view" title="preview"></iframe>
<script>
function load(){
const url=document.getElementById('sel').value;
document.getElementById('view').src=url;
console.log(`選択したURLは ${url} です`);
}
</script>
</body>
</html>ブラウザの出力例
使い方
- プルダウンでツールを選ぶ
- サイトを表示 を押す
- 下部 iframe に公式ページが埋め込み表示
- コンソールにも日本語メッセージ
このミニツールだけでも「まずドキュメントへ飛ぶ→導入検証する」導線がスムーズになります。
まとめ
- ライブラリ＝呼び出す便利部品／フレームワーク＝ライフサイクルを預ける土台 と捉えると選定がラク。
- React・Angular・Vue の三強は UI 層の選択肢、three.js や D3.js はグラフィック特化、JSZip などはバイナリ生成まで守備範囲。
- 公式サイトや GitHub README に必ず「最小サンプル」が載っているので、まず動かしフィット感を確かめるのが最短学習ルート。