JavaScriptファイル（.js）の置き場として便利なGitHub。そのGitHub上のJavaScriptファイル（.js）をCDNで参照するやり方については本ブログで既に紹介しました。
次に私がやりたいのはGitHub上のフォルダ（とその中のファイル）を丸ごとCDNで参照することです。

無事にかどうか分かりませんが😅、フォルダ（リポジトリ）をCDNで参照することができました。

今回はこのやり方を紹介します。

GitHub上のフォルダ（リポジトリ）をCDNで参照する（jsDelivr使用）

●使用するサービス（GitHub, jsDelivr）

・GitHub

参照元のフォルダ・ファイルを置くサービスはコレです。

GitHub

プログラムのソースコードや変更履歴をクラウド上で保存・管理・共有できる、世界最大級のソフトウェア開発プラットフォームです。
参照元のファイルの保管場所として使います。

・jsDelivr

CDNとして使うのはコレです。

jsDelivr

オープンソースのライブラリ配信に特化した無料のCDN（コンテンツ配信ネットワーク）です。

●使い方・設定方法

・手順

GitHub上のフォルダ（リポジトリ）をCDNで参照する手順は

GitHub上のフォルダ（リポジトリ）のURLを取得
jsDelivr上の参照URLを取得
フォルダ内のファイルの参照

です。
（GitHubのユーザー登録方法やリポジトリの作成方法等はネット上に多数の紹介記事があるのでここでは省略します。）

- 何故jsDelivrを使うのか？

GitHubのURLを使ってフォルダを直接参照する方法もありますが、その方法には以下のようなデメリットがあってちょっと不安です。

CORS制限により読み込みがブロックされる可能性がある。
GitHubは高速での安定的な実行や大規模なトラフィックでの読み込みができない可能性がある

GitHubはコードのバージョン管理・公開が目的のサービスなので、このような不具合の可能性があるようです。
ちょっと遅いぐらいなら気にしませんが、動かないのは問題ですよね。

そのため今回はCDN（コンテンツ配信ネットワーク）のひとつであるjsDelivrを使うことにしました。
jsDelivrを使うと、上記のようなGitHubのデメリットを心配することなく、安心してファイルを参照できるようになります。

以下、各手順の詳細を紹介していきます。

1. GitHub上のフォルダ（リポジトリ）のURLの取得

今回はGitHubに作成した『fortest』というリポジトリを参照することを目指します。

このときブラウザのアドレスバーに表示されているのがリポジトリのURLなので、コピーします。

リポジトリ：fortest画面（GitHub画面）

ちなみに取得したフォルダのURLの例はこんな感じです：

https://github.com/beyondifttt/fortest

以上でGitHub上のリポジトリのURLの取得は完了です。

2. jsDelivr上のURLの取得

次にCDNとしてのjsDelivrのリポジトリURLを取得します。これはとても簡単です。

jsDelivrのホーム画面でメニューバー『Tootls』から『GitHub』を選択します。

jsDelivrホーム画面

開いた画面の『GitHub』欄にGitHubで取得したリポジトリのURLをペーストします。

jsDelivr画面

すると自動でjsDelivrのURLが生成されるのでコピーするだけです。

jsDelivr画面

ちなみに取得したjsDelivrのリポジトリURLの例はこんな感じです：

https://cdn.jsdelivr.net/gh/beyondifttt/fortest/

3. フォルダ（リポジトリ）内のファイルの参照

フォルダ（リポジトリ）内のファイルを参照する場合は上記取得したURLを使ってこんな感じになります：

https://cdn.jsdelivr.net/gh/beyondifttt/fortest/（参照するファイル名）

簡単ですね😋。

●使用感（実行確認結果）

今回のリポジトリ（fortest）の中には『js』というフォルダ（ディレクトリ）を作成しています。

で、このフォルダ『js』の中に『test.js』というJavaScriptファイルを置いています。

この『test.js』ファイルをHTMLファイルから実行してみました。

・JavaScriptファイル（test.js）

JavaScriptファイル

今回テスト用に用意した.js（JavaScript）ファイル（test.js）の中身は1行だけです😙。

window.alert('JavaScriptファイル（test.js） \n 実行結果');

JavaScriptプログラムの内容：（ブラウザの）警告ウィンドウに文字列『JavaScriptファイル（test.js） \n 実行結果』（"\n"は改行）を表示するスクリプトです

・JavaScriptファイル（test.js）をjsDelivr経由で実行するためのURL

これをGitHubにアップしてURLを取得しました。

取得したjsDelivrのURL：https://cdn.jsdelivr.net/gh/beyondifttt/fortest/js/test.js

・HTMLファイル（test.html）

HTMLファイル

テスト用に用意したHTMLファイル（test.html）はこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>テスト用HTML（test.html）</title>
</head>
<body>

  <script src="https://cdn.jsdelivr.net/gh/beyondifttt/fortest/js/test.js"></script>

</body>
</html>

HTMLプログラムの内容：上記した.jsファイル（test.js）をjsDelivrから読み込んで実行するだけです

・HTMLファイル（test.html）の実行結果

上記のtest.htmlを実行する（ブラウザで表示させる）とこんな感じです。

test.htmlの実行結果（Chrome画面）

警告画面にtest.jsに記載したメッセージが表示されていて、test.jsが無事に実行されていることが分かります。

完璧ですね😋。

●今回の参照方法の課題（改善したい点）

実はフォルダ（リポジトリ）内の参照しているファイルがjsDelivr上にあるのかどうか不明です。これはjsDelivrの仕様を私がよく分かっていないためです😅。引き続きウオッチします。
本当はリポジトリの下のフォルダ『js』のURLをjsDelivrで取得したかったのですが、今のところ上手く取得できていません😥。なんとかしたいと思います。

●まとめ

課題はありますが、なんとかGitHubのフォルダ（リポジトリ）のURLをjsDelivrで取得して参照することができました。

改善したい点はまだまだありますので、引き続きウォッチ＆改善していきたいと思います😋。

○参照サイト（外部リンク ⧉）

自作ライブラリを jsDelivr から取得 -Qiita

○関連情報

・関連記事（本ブログ内🔗）

GitHub関連：

GitHub上のJavaScriptファイルをHTMLから実行する（CDN jsDelivr使用）