Home
JavaScript
UNPKGの使い方~npmで公開済のパッケージを使えるCDNサービス~

UNPKGの使い方~npmで公開済のパッケージを使えるCDNサービス~

UNPKGの使い方~npmで公開済のパッケージを使えるCDNサービス~

どうも!かけちまるです!

ライブラリやプラグインを読み込むのに便利なCDN。

jQueryのように公式が提供している場合もありますが大体は検索して探さないとだと思います。
いちいち探すのが面倒な時に便利なCDNサービスのUNPKGをご紹介します。

この記事では、

  • ・UNPKGとは?
  • ・UNPKGの使い方

がわかります。

UNPKGとは?

UNPKGは、npmで公開されているパッケージを配信しているCDNサービスです。
npmで公開されているパッケージが使えるので、jQuery/gsap/Three.js/React/Vue.jsなど様々なライブラリやプラグインをUNPKGで読み込むことができます。

具体的には次のようにして読み込みます。

HTML
コピー
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>

UNPKGの使い方

まずは、該当ファイルを探してscriptタグで読み込む方法を説明します。
この記事では、Three.jsを読み込む想定で解説しています。

1

該当パッケージを検索

該当パッケージは、https://www.unpkg.com/パッケージ名/で探すことができます。
※パッケージ名の後に/を付けるのを忘れないこと
※検索すると最新バージョンにリダイレクトします。

該当パッケージを検索

パッケージ名がわからない場合は「npm Three.js」などで検索するとnpmの公式サイトから確認できます。
npm公式サイトの右上あたりでパッケージインストールの方法が書いてあるのでそこでパッケージ名を確認できます。

npmの公式サイト
2

該当ファイルを探す

パッケージが検索できたらディレクトリが表示されると思います。
ここから読み込みたい該当ファイルを探します。

ディレクトリが表示される

Three.jsの場合は、buildフォルダに入っていました。
※distかbuildフォルダに入っていることが多いと思います。

ディレクトリが表示される
3

scriptタグで読み込む

該当ファイルを開き、右上あたりの”View Raw”ボタンをクリック。

View Rawボタンをクリック

あとは、URLをコピーしてscriptタグで読み込みます。

URLをコピー
HTML
コピー
<script src="https://unpkg.com/three@0.142.0/build/three.min.js"></script>

これで完了です!

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

【Contact Form 7 Multi-Step Forms】Contact Form7に入力確認画面を追加する方法

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

react-scrollでページ内スクロールが効かない時と複数ページの対応

react-scrollでページ内スクロールが効かない時と複数ページの対応

画像のみにAccess-Control-Allow-Originを設定する方法

画像のみにAccess-Control-Allow-Originを設定する方法

【GSAP入門】使い方となにができるのか

【GSAP入門】使い方となにができるのか

Visual Studio Codeの検索と置換

Visual Studio Codeの検索と置換