ゼロからはじめるJavaScript(16) CDNを利用して爆速Webアプリ - フリーのjsDelivrを使おうその2

前回は無料のCDNを利用する方法を紹介しました。今回はnpmを利用して自作ライブラリを公開してCDNを通じて配布する方法を紹介します。便利なフリーのCDNを活用して、爆速Webアプリの第一歩を踏み出しましょう。

無料CDNでも信頼性は高い

なお、前回紹介したようにCDNを使えば、ユーザーの近くにあるサーバーからコンテンツを配信するため、より早くコンテンツを配信できます。それでも、無料のCDNでも同じなのでしょうか。もちろん、時間帯などにもよりますが、ライブラリを開発して公開しているサーバーへのアクセス集中が緩和されるため、配信速度は早くなります。

また、個人や小規模でWebサービスを展開している場合には、格安のホスティングサーバーを使うことが多いでしょう。その場合には、少しでもアクセスを分散させた方が快適なサービスを提供できるでしょう。

そのため、自作のWebサービスのために開発したプログラムの中で、一般公開しても良さそうな部分があれば、npmで積極的にライブラリとして公開しましょう。そして、それをCDNを通じて使うことで、自分のWebアプリも高速になりますし、作ったライブラリを公開することで社会貢献もできます。

しかし、無料ということは、提供されているCDNが不安定になりアクセスできない状態になったとしても文句は言えません。とは言え、こちらのCDNPerfというサービスを使うと、CDNの信頼性を比較できます。

これを見ると、今回無料で利用するjsDelivrのCDNも決して悪くありません。原稿執筆時点でRUM UPTIMEで99.24%という高い数値を出しています。なお、RUM UPTIMEというのは、実際のユーザーがブラウザで閲覧した状態を計測したもので、稼動している時間をパーセントで表しています。

CDNの信頼性を確認できる

それでも心配な場合の対処

それでも、どうしてもCDNのサーバーがダウンすることが心配という場合は、JavaScriptの<script>を工夫することで回避することが可能です。以下のように、あるCDNのライブラリを取り込んでみて、ライブラリ内で使われている変数がundefinedの状態であれば、改めて別のライブラリを取り込む指定を行います。

<script src="CDNのURL"></script>
<script>
if (!ライブラリ内の変数) { 
    document.write('<script src="別のCDNのURL"></script>')
}
</script>

npmにライブラリをアップロードする方法

それでは、次に実際に無料CDNを使う方法を紹介します。前回紹介したように、Node.jsのパッケージマネージャーであるnpmにライブラリをアップロードすると、自動的にCDNのjsDelivrやunpkgを利用できるような仕組みになっています。

そのため、ここではnpmを使って簡単なJavaScriptライブラリを作成して、公開する手順を紹介します。npmはNode.jsのパッケージマネージャーであるため、npmを利用するには、Node.jsが必要です。こちらから各OS向けのインストーラーをダウンロードできます。

(手順1) npmでプロジェクトを作成する

まずは、npmを使って新規プロジェクトを作成します。npmの操作はコマンドライン上で行います。WindowsであればPowerShellを、macOSやLinuxであればターミナルを利用します。

まずはプロジェクトを保存するディレクトリを作成し、npmでプロジェクトを初期化します。ここでは、kujira220514というダミーのライブラリを作ってみましょう。

コマンドラインを起動して、以下のコマンドを実行してみましょう。

mkdir kujira220514
cd kujira220514
npm init -f

すると、package.jsonというファイルが作成されます。このファイルがnpmのプロジェクト管理に使うツールです。ここでは、index.jsというファイルを作成し、以下のような、足し算を行うだけのライブラリを作ってみます。

// ファイル: index.js
function add(a, b) {
    return a + b
}

(手順2) npmに登録して公開する

次に、npmのWebサイトにアクセスして、アカウントを作成します。画面右上の[Sign Up]のボタンをクリックしてユーザー登録をしましょう。ユーザー名、メールアドレスとパスワードを入力するだけなので登録は簡単です。

npmでアカウントを作成しよう

次に、コマンドラインを開いて、以下のコマンドを実行します。

npm login

すると、ユーザー名(Username)とパスワード(Password)を入力します。場合によっては、ワンタイムパスワードを尋ねられます。ワンタイムパスワードは、メールに届きますので受信したものを入力します。ログインすると、npmのユーザー情報がPCに保存されます。

その上で、以下のコマンドを実行します。

npm publish

すると、アップロードが開始されて、ライブラリがnpmに登録されます。なお、kujira220514という名前のライブラリは、筆者がテストで登録してしまいました。ライブラリ名は早い者勝ちで登録することになっています。そのため、上記の手順そのまま実行すると「npm ERR! code E403」などというエラーが表示されることでしょう。

そこで、package.jsonをテキストエディタで開いて、nameプロパティの部分を好きなライブラリ名に変えてから再度上記の「npm publish」コマンドを実行します。

{
  "name": "kujira220514",   ← この部分を任意のライブラリ名に変更
  "version": "1.0.0",
... 省略 ...
}

なお、ライブラリをアップデートした場合には、package.jsonに書いてある"version"を更新すれば、新しいバージョンとしてライブラリをリリースできます。

(手順3) アクセスしてみる

以上の手順で、npmへライブラリのアップロードが完了しました。無料のCDNであるjsDelivrで配信されるのか確認してみましょう。

●jsDelivrのURL規則
https://cdn.jsdelivr.net/npm/パッケージ名@バージョン/ファイル名

●今回登録したkujira220514ライブラリのindex.jsを取得するURL
https://cdn.jsdelivr.net/npm/kujira220514@1.0.1/index.js

それで、ブラウザなどで直接URLにアクセスしてみると、CDNを通じてライブラリの配信が行われているのを確認できます。

CDNを利用してライブラリが配布できるようになった

なお、試しにHTMLからこのライブラリを取り込んで使ってみましょう。以下のコードをテキストエディタに貼り付けて「test.html」という名前で保存しましょう。

<html>
<!-- ライブラリの取り込み -->
<script
  src="https://cdn.jsdelivr.net/npm/kujira220514@1.0.1/index.js"
  integrity="sha256-KgwSfsV/wQKBoa4g34ztREwhEu8Lm78XnqotOGQuTBE="
  crossorigin="anonymous"></script>
<script>
  // 取り込んだライブラリを使う
  alert( 'Answer = ' + add(100, 30) )
</script>
</html>

なお、<script>タグにintegrity属性を付与しています。これは前回紹介した通り、CDNを使う上で外せない要素です。このintegrityにハッシュ値を指定することで、CDNが何かしらの攻撃を受け改ざんされてしまった場合に、JavaScriptライブラリの取り込みを中止する働きをします。実際のintegrityの値はファイルのSHA-256などのハッシュ値を求めて、「sha256-ハッシュ値」のように指定するだけです。あるいは、前回紹介したように、SRI Hash GeneratorなどのWebサービスを使うことで手軽に求められます。

そして、ブラウザで表示してみてください。すると、ライブラリの中で定義した足し算を行うadd関数が実行できたのを確認できるでしょう。

CDNを通してnpmにアップロードした

まとめ

以上、今回は、npmにアップロードしたファイルを無料のCDNで配信する方法を紹介しました。特にnpmにファイルをアップロード方法を紹介しましたが、コマンドラインにさえなれていれば、思ったよりも簡単にライブラリを登録できることが分かったのではないでしょうか。手軽に無料で利用できるので試してみてください。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユーススーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。