はじめに
「jsDelivr CDNを使ってJavaScriptやCSSを読み込みたいけれど、URLはどう書けばいいの？」
「npmやGitHubにあるファイルを指定する場合は、どこまでURLに入れればいい？」と迷っていませんか。
Webページを作りながらライブラリを追加しようとしても、パッケージ名やバージョン、ファイルのパスをどの順番で指定するのか分からず、読み込みエラーで手が止まることがありますよね。
この記事では、jsDelivr CDNの基本的な使い方から、npm・GitHubを指定したURLの作り方、JavaScriptやCSSをWebページへ読み込む方法まで順を追って説明します。
「jsDelivr」とは？
jsDelivrは、JavaScriptやCSSなどのファイルをインターネット上の配信拠点から読み込める無料のCDNサービスです。
ここでは、npmやGitHubのファイルをjsDelivrから読み込める仕組みについて説明します。
npmやGitHubのファイルをCDN経由で読み込める
jsDelivrでは、npmで公開されているパッケージやGitHub上のJavaScript・CSSなどを、CDN経由で読み込めます。
npmならパッケージ名とバージョン、GitHubならユーザー名やリポジトリ名などをURLに指定します。
作成したURLをWebページから参照すれば、自分のサーバーへファイルをアップロードせずに利用できます。
jsDelivr CDNの基本的な使い方
jsDelivr CDNを利用するときは、まず使いたいライブラリを探し、読み込むJavaScriptやCSSファイルを選びます。
ここでは、ライブラリの検索からJavaScript・CSSファイルの選択、CDNコードをコピーするまでの手順を順に説明します。
jsDelivrで利用したいライブラリを検索する
jsDelivrのWebサイトを開き、検索欄に利用したいライブラリ名を入力します。
検索結果から目的のライブラリを探し、似た名前のものと間違えないようにパッケージ名を確認して選びましょう。
必要なJavaScript・CSSファイルを選択する
ライブラリを開いたら利用するバージョンを確認し、必要なJavaScriptやCSSファイルを選びます。
「.js」や「.css」で終わるファイル名を確認し、Webページで使いたい機能に合ったものを選びましょう。
CDNのURLやHTMLコードをコピーして読み込む
必要なファイルを選んだら、表示されたCDNのURLやHTMLコードをコピーして、自分のWebページに貼り付けます。
JavaScriptはscriptタグ、CSSはlinkタグのコードを使えば、jsDelivr CDN経由でファイルを読み込めます。
npmのパッケージをjsDelivr CDNで読み込む方法
npmで公開されているパッケージは、jsDelivrのURLにパッケージ名を指定することでCDN経由で読み込めます。
ここでは、npmパッケージを指定するURLの書き方から、バージョン・ファイルの指定方法、HTMLでの読み込み方まで順に説明します。
npmパッケージを指定するURLの書き方
npmパッケージをjsDelivrから読み込む場合は、「https://cdn.jsdelivr.net/npm/パッケージ名」の形式でURLを指定します。
パッケージ名にはnpmで公開されている正式な名前を入力し、必要に応じてバージョンやファイル名を後ろに追加していきます。
バージョンとファイルを指定する方法
特定のバージョンを使いたい場合は、パッケージ名の後ろに「@バージョン」を付けます。
さらにファイルを指定するときは、「/ファイルのパス」を追加し、「https://cdn.jsdelivr.net/npm/パッケージ名@1.2.3/ファイルのパス」のように記述します。
HTMLからJavaScript・CSSを読み込む記述例
JavaScriptを読み込む場合はscriptタグのsrc属性、CSSの場合はlinkタグのhref属性にjsDelivrのURLを指定します。
HTMLでは、次のように記述すると分かりやすいでしょう。
<script src=”https://cdn.jsdelivr.net/npm/パッケージ名@1.2.3/ファイル.js”>\
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/パッケージ名@1.2.3/ファイル.css”>
GitHubのファイルをjsDelivr CDNで読み込む方法
GitHubで公開されているファイルは、jsDelivrのURLにユーザー名やリポジトリ名を指定することでCDN経由で読み込めます。
ここでは、GitHubリポジトリを指定するURLの書き方と、ブランチ・タグ・コミットを指定して読み込む方法を順に説明します。
GitHubリポジトリを指定するURLの書き方
GitHub上のファイルをjsDelivrから読み込む場合は、「https://cdn.jsdelivr.net/gh/ユーザー名/リポジトリ名@バージョン/ファイルのパス」の形式でURLを作成します。
GitHubに表示されているユーザー名とリポジトリ名を指定し、最後に読み込みたいJavaScriptやCSSなどのファイルパスを追加します。
ブランチ・タグ・コミットを指定して読み込む
読み込む内容を指定したい場合は、リポジトリ名の後ろに「@ブランチ名」「@タグ名」「@コミットハッシュ」を付けます。
特定の内容に固定して使いたいときはタグやコミットを指定しておくと、リポジトリが更新されたあとも同じファイルを読み込みやすくなります。
jsDelivr CDNを利用するときの注意点
jsDelivr CDNを利用するときは、ファイルを読み込めればよいだけでなく、どのバージョンとURLを指定しているかを確認する必要があります。
ここでは、バージョンの固定、URLとファイルの確認、外部CDNへの依存という3つの注意点を順に説明します。
本番環境ではバージョンを固定する
本番環境でjsDelivrを利用する場合は、URLに「@1.2.3」のようなバージョン番号を指定しておくと安心です。
動作確認したバージョンに固定することで、パッケージの更新による表示崩れや動作の変化を防ぎやすくなります。
ライブラリを更新するときに、「バージョン番号はどう確認すればいい？」と迷った場合はこちらも参考にしてください。
▶npmパッケージのバージョンを確認する方法は？最新・指定バージョンの調べ方を解説
指定したURLとファイルが正しいか確認する
jsDelivrのURLを設定したら、ブラウザで直接開いて目的のJavaScriptやCSSが表示されるか確認します。
ファイルを取得できない場合は、パッケージ名やリポジトリ名、バージョン、ファイルパスなどに入力ミスがないか見直してみましょう。
URLは合っているはずなのに読み込めない場合は、ブラウザでエラー内容を確認すると原因を絞り込みやすくなります。
▶Chromeのデベロッパーツールとは？エラーを確認する方法と基本的な使い方
外部CDNに依存することを理解して利用する
jsDelivrでは、Webページの表示時に外部サーバーからJavaScriptやCSSを読み込みます。
そのため、jsDelivrへ接続できない場合や障害が発生した場合には、Webサイトの表示や動作に影響する可能性があることも覚えておきましょう。
まとめ
jsDelivr CDNを使うと、npmやGitHub上のJavaScript・CSSを、自分のサーバーへ配置せずに読み込めます。
URLの書き方を覚えておけば、必要なバージョンやファイルを指定して手軽に利用できます。
本番環境では動作確認したバージョンを固定し、URLから正しくファイルを読み込めるか確認しておくと安心です。
今回紹介した方法を参考に、必要なファイルをjsDelivrから読み込んでみてください。
