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制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【GSAP】擬似要素(before・after)をアニメーションさせる方法

【GSAP】擬似要素(before・after)をアニメーションさせる方法

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

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

【CSSのみ】指定行数を超えたテキストを非表示にする方法

【CSSのみ】指定行数を超えたテキストを非表示にする方法

コピペで完了!CSSグラデーション(linear-gradient)まとめ

コピペで完了!CSSグラデーション(linear-gradient)まとめ

videoタグの再生や停止などをJSでコントロールする方法

videoタグの再生や停止などをJSでコントロールする方法

【WordPress】カテゴリーの記事数を取得する方法

【WordPress】カテゴリーの記事数を取得する方法