Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
Cookie の使用について.本サイトでは、基本機能の提供に必要な必須 Cookie を使用しています。さらに、同意いただいた場合に限り、アクセス解析 Cookie を利用して利用状況を把握し、サービス改善に役立てます。詳しくは .
このツールは使いやすかったですか？
フィードバックは改善に役立ちます
主要なJavaScriptライブラリのCDNリンクをすばやく検索。読み込みコードをワンクリックでコピーして、フロントエンド開発を効率化できます。
固定版とパスから jsDelivr・unpkg・esm.sh の URL を作ります。最新版の取得や各資源の到達確認は行いません。利用前にパス、版、ライセンス、読み込みを確認してください。 出典
https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js<script src="https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.production.min.js"></script>import * as React from "https://esm.sh/react@18.3.1";概要
解決できる課題、処理の仕組み、データの範囲を確認できます。
JavaScript CDN一覧では、登録済みライブラリを名前やパッケージ名から探し、選んだ版のURLと読み込み用コードをコピーできます。CDNは、ネットワーク経由で配信されるファイルをURLで読み込む仕組みです。パッケージ管理やビルド設定をまだ用意していない試作ページで、接続例をすばやく作りたいときに役立ちます。
一覧にはReact、Vue、Bootstrap、ECharts、Lodashなど、用途別に登録された項目があります。表示される版とファイルの場所は一覧側にあらかじめ登録されており、検索のたびにnpmの全パッケージや最新リリースを調べるものではありません。
ライブラリを選ぶと、パッケージ名、版、分類、タグ、一部の項目ではグローバル変数名やnpm installコマンドを確認できます。提供元はjsDelivr、unpkg、esm.shから切り替えられます。選択に応じてスクリプトURL、scriptタグ、ESMのimport文が作られます。
CSSファイルが登録されたライブラリでは、jsDelivrまたはunpkgの選択時にlinkタグも表示されます。CSSのない項目やesm.sh選択時にはCSSタグは表示されません。esm.shでは、scriptタグ側もモジュールとして読み込む形式になります。通常のscriptとESMは読み込み方が異なるため、プロジェクトで採用している方式に合わせてください。
使い方
手順に沿って操作し、例を使って入力と結果を確認します。
ライブラリ名、パッケージ名、用途の説明、版、グローバル変数名、タグに含まれる文字を検索できます。分類ボタンを使えば、フレームワーク、UI、グラフ、ユーティリティなどに絞れます。
一覧から項目を選び、パッケージ名と版が利用予定のものと一致するか見ます。説明やタグも合わせて、似た名前の別パッケージを選んでいないか確認してください。
従来型のscriptタグで使う場合は、プロジェクトとライブラリがその形式に対応しているか確認します。ESM構成ではimport文をモジュール内に置きます。提供元を変えると生成URLも切り替わります。
script URL、scriptタグ、CSSタグ（表示される場合）、ESM importをそれぞれコピーできます。複数の依存があるときは、読み込み順もプロジェクトの説明に従ってください。
貼り付け後、ブラウザーのネットワーク欄で要求が成功したか、コンソールにエラーがないか確認します。表示されたグローバル変数名がある場合は、選んだ配布ファイルでその名前が使えることも確認してください。
活用例
仕事や日常の流れの中での活用方法を紹介します。
グラフやUI部品の動作を単一ページで試すとき、一覧で該当ライブラリを見つけ、登録されたURLやCSSをコピーして試作に組み込めます。必要なファイルが一覧にあるかを先に確認できます。
既存HTMLに書かれたパッケージ名や版が分かっている場合、同じ項目が一覧に登録されているか探し、URLの形を照合できます。更新作業では元の版やファイルパス、ライセンスを別途確認します。
Q&A
よくある疑問や迷いやすい点をまとめて確認できます。
いいえ。このページの検索対象は登録済みのライブラリです。任意のパッケージ名を入力しても、一覧に存在しない項目が自動追加されたり、npm全体から検索されたりはしません。
最新版とは限りません。登録された固定版を使ってURLを組み立てます。導入前にパッケージの公式リリース情報と、プロジェクトで必要な版を確認してください。
ありません。CSSファイルが登録された項目で、jsDelivrまたはunpkgを選んだ場合に表示されます。esm.shではこのページから独立したCSSタグは作られません。
ESM importはJavaScriptモジュール内で使い、HTMLに直接書く場合はtype="module"のscript要素が必要です。通常のscriptタグとは文法や読み込み条件が異なるため、既存ページの構成に合わせて選びます。
注意
利用範囲、結果の制限、必要な注意点を事前に確認します。
ここでコピーするのは、登録されたパッケージ名・版・ファイルパスから組み立てた参照コードです。URLへの接続確認、最新バージョンの照会、ライセンス適合性や脆弱性の検査は行いません。ファイルが存在するか、選んだ配布形式が対象パッケージに合うかを、実際のプロジェクトで確認してください。
外部スクリプトやスタイルシートを読み込むと、その提供元への通信が発生し、ページは応答やファイル内容に依存します。本番で使う場合は、供給元、版、ファイルパス、ライセンスを確認し、プロジェクトのセキュリティ方針に沿ってSRIや自前配信を検討してください。SRIは指定したハッシュと取得ファイルが一致するかをブラウザーに照合させる仕組みですが、このページはハッシュを生成しません。
関連
関連ツール、特集、利用可能なAPIを探せます。