CDN URL ジェネレータ 開発・その他
npmパッケージ名を入力するだけで、jsDelivr / unpkg / cdnjs / esm.sh の4大CDN URLを並べて比較・即コピーできます。<script src=> 用のUMD版と、import 用のESModule版を同時表示。React・Vue・Tailwind・Three.js等のCDN導入を1秒で完了させます。
人気パッケージ:
react
react-dom
vue
alpinejs
htmx.org
three
lodash
d3
chart.js
gsap
motion
tailwindcss
使い方
- npm パッケージ名を入力 (例:
react,vue,lodash) - バージョン指定で「特定バージョンを固定」、空欄で「最新版を取得」
- 「人気パッケージ」ボタンから定番ライブラリのCDN URLを即取得
- 4つのCDNから好みを選んで右上の「コピー」ボタンで即取得
4つのCDNの特徴と使い分け
- jsDelivr: 世界最大のオープンソースCDN・GitHubもサポート・複数の高速地点
- unpkg: シンプルでnpmパッケージをそのまま配信・React公式が推奨
- cdnjs: Cloudflare運営・厳選されたパッケージのみ・超高速
- esm.sh: ES Module特化・React/Vue等を即 import 可能・最新フロントエンド向け
用途別の選び方
- 従来の <script> タグ: jsDelivr / unpkg / cdnjs どれでもOK
- モダンな import 文 (ES Module): esm.sh が最適 (依存解決も自動)
- 本番運用: cdnjs (Cloudflareの安定性) または jsDelivr (高い可用性)
- プロトタイプ・デモ: esm.sh で素早く試作可能