普段プログのHTMLぐらいしかソースコードに接する機会の無い私ですが、たまにはJavaScriptぐらいはいじります😙。
今回はGitHubにアップした（自作の）JavaScriptファイルを外部のHTMLから実行しようとして四苦八苦した話です（プログラミングの話ではなくて環境（？）的な話です）。
紹介する内容は普段GitHubを使われている方には何でも無いことです。なのですが、私にとってはとてもとても分かりづらい事で、1ヶ月近く悩んでしまいました😅。
|
今回の内容に私のオリジナリティはありません。限りなく個人的な備忘録（というか失敗の物語😅）です。
GitHub上のJavaScriptファイルをHTMLから実行する（jsDelivr使用）
●使用するサービス（GitHub, jsDelivr）
・GitHub
まずはコレです。
|
| GitHub |
JavaScriptファイルの保管場所として使います。
以前（10年以上前）は、Googleサイト（？）上に置いたJavaScriptファイルは外部から実行可能だったのですが、先日試したらできませんでした😖。セキュリティ強化の為らしく、時代の流れを感じます😅。
で、調べてみたらGitHubに実行可能なJavaScriptファイルを無料で置くことができることが分かったので使ってみることにしました。
GitHubを使ってみるのは今回が初めてです。
・jsDelivr
もうひとつはコレです。
|
| jsDelivr |
オープンソースのライブラリ配信に特化した無料のCDN（コンテンツ配信ネットワーク）です。
このサービスの必要性は後述しますね😙。
●使い方・設定方法
・手順
GitHub上のJavaScriptファイルをHTMLから実行する手順は
- GitHub上のJavaScriptファイルのRaw URLを取得
- jsDelivr上のURLを取得（※）
- HTMLに実行用のコードを埋め込む
です。
（GitHubへの登録方法やJavaScriptファイルのアップロード方法等はネット上に多数の紹介記事があるので省略します。）
- 何故jsDelivrを使うのか？
GitHubのRaw URLを使ってHTMLからJavaScriptファイルを直接読み込んで実行する方法もありますが、その方法（Raw URLの直接読み込み）には以下のようなデメリットがあってちょっと不安です。
- CORS制限により読み込みがブロックされる可能性がある。
- MINEタイプがjavascriptではないので、読み込まれても実行されない可能性がある
- GitHubはCDNではないので、高速での安定的な実行や大規模なトラフィックでの読み込みができない可能性がある
GitHubはコードのバージョン管理・公開が目的のサービスでCDNホスティング用のサービスではないので、このような不具合の可能性があるようです。
ちょっと遅いぐらいなら気にしませんが、動かないのは問題ですよね。
そのため今回はCDN（コンテンツ配信ネットワーク）のひとつであるjsDelivrを使うことにしました。
jsDelivrを使うと、上記のようなGitHubのデメリットを心配することなく、安心してJavaScriptファイルをHTMLから実行できるようになります。
以下、各手順の詳細を紹介していきます。
1. GitHub上のJavaScriptファイルのRaw URLの取得
（私の思い込みもあって）今回紹介する手順の中で私がつまずいたのは実はココです。分かってしまえば何と言う事はないのですが、私にとっては難関でした😅。
実行したいJavaScriptファイル（以下、.jsファイル）が在るリポジトリまたはブランチを表示させ、実行したい.jSファイルを選択します。
|
| リポジトリ画面（GitHub画面） |
すると、ソースコードが表示される画面になるので、Rawボタンを押下します。
|
| .jsファイル画面（GitHub画面） |
すると、ソースコードだけが表示される画面になります。（これがソースコードの『生（Raw）データ』画面です。）
このときブラウザのアドレスバーに表示されているのがRaw URLなので、コピーします。
|
| .jsファイルのRaw画面（GitHub画面） |
ちなみに取得したRaw URLの例はこんな感じです：
- https://raw.githubusercontent.com/beyondifttt/fortest/refs/heads/main/test.js
以上でRaw URLの取得は完了です。
- 【参考】私はいったい何に苦戦したのか？（思い込みで勘違いしたところ）
GitHubの画面はファイルマネージャーのような感じなので、「Raw
URLを取得するには専用のボタンのようなモノが（GitHubの画面のどこかに）必ずあるハズだ。」と思い込んでいたのですが、結果はボタンなどはなく（上記の通りで）ブラウザのアドレスバーよりの取得でした。
（本件を理解するのに１ヶ月近くかかりました。あまりに常識過ぎる話なのか、生成AIに訊いてみても、自分で調べてみてもなかなかアドレスバー表示について記載している説明にあたらなかったんですよねぇ😅。）
2. jsDelivr上のURLの取得
次にCDNとしてのjsDelivrのURLを取得します。これはとても簡単です。
jsDelivrのホーム画面でメニューバー『Tootls』から『GitHub』を選択します。
|
| jsDelivrホーム画面 |
開いた画面の『GitHub』欄にGitHubで取得した.jsファイルのRaw URLをペーストします。
|
| jsDelivr画面 |
すると自動でjsDelivrのURLが生成されるのでコピーするだけです。
|
| jsDelivr画面 |
ちなみに取得したjsDelivrのURLの例はこんな感じです：
- https://cdn.jsdelivr.net/gh/beyondifttt/fortest@refs/heads/main/test.js
3. HTMLへの実行用のコードの埋め込み
以下の書式で.jsファイルのURL(jsDelivr）をHTMLに埋め込むだけで.jsファイルを読み込んで実行してくれます。
<script src="（.jsファイルのURL（jsDelivr））"></script>か簡単ですね。
●使用感（実行確認結果）
実際にGitHub上に.jsファイルを置いてHTMLから実行してみました。
・JavaScriptファイル（test.js）
|
今回テスト用に用意した.js（JavaScript）ファイル（test.js）の中身は1行だけです😙。
window.alert('JavaScriptファイル（test.js） \n 実行結果');- JavaScriptプログラムの内容：（ブラウザの）警告ウィンドウに文字列『JavaScriptファイル（test.js） \n 実行結果』（"\n"は改行）を表示するスクリプトです
・GitHub、jsDelivrから取得したURL
これをGitHubにアップしてURLを取得しました。
- 取得したGitHubのRaw URL：https://raw.githubusercontent.com/beyondifttt/fortest/refs/heads/main/test.js
- 取得したjsDelivrのURL：https://cdn.jsdelivr.net/gh/beyondifttt/fortest@refs/heads/main/test.js
・HTMLファイル（test.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@refs/heads/main/test.js"></script>
</body>
</html>- HTMLプログラムの内容：上記した.jsファイル（test.js）をjsDelivrから読み込んで実行するだけです
・HTMLファイル（test.html）の実行結果
上記のtest.htmlを実行する（ブラウザで表示させる）とこんな感じです。
|
| test.htmlの実行結果（Chrome画面） |
警告画面にtest.jsに記載したメッセージが表示されていて、test.jsが無事に実行されていることが分かります。
完璧ですね😋。
●改善したい点
- 特にありません😋。
●まとめ
勝手な思いこみから1ヶ月近くも悩んでしまいましたが😅、無事にGitHub上のJavaScriptファイルをHTMLから実行することができました。
よかった、よかった😋。
○参照サイト（外部リンク ⧉）
- オリジン間リソース共有 (CORS)とは - Qiita
- 【入門】CDNとは？仕組みやメリットを図入りで分かりやすく - カゴヤのサーバー研究室
- MIMEタイプって何者？ - Qiita