CDNとはContent Delivery Network略で、簡単に言うとユーザのブラウザにいち早くコンテンツを届くよう準備してくれるネットワークのこと。
何がいいかというとみんながよく使う共通ライブラリなどをあらかじめホスティングしてくれているサービスなどがあって、その恩恵を受けることができる。
例えば、jQueryなどJacaScriptのライブラリだが、Googleさんがサーバにおいてくれており、以下のように読み込むことができる。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
ほかにもデータを図形にする3D.jsなどもおいてある。
UNPKG
最近よく見かけるUNPKGもCDNの一つで、npmのいろんなファイルを配信してくれる。
こちらもjQueryがおいてあり、「常に最新版」の取得も可能。
常に最新版
<script src="https://unpkg.com/jquery"></script>
バージョンを指定
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
UNPKGはreactも配信しているが特徴。
開発モード
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
製品モード
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
unpkg.comについて、詳しくはこちら。
cdnjs
cdnjsにもjQueryはもちろん、3000以上のライブラリがおいてある。
babel.jsなど専門的なものもおいてあるのが特徴。
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>
cdnjsについて、詳しくはこちら。
補足情報だが、scriptタグのcrossorigin属性について調べてみた。
別のドメインを使用するサイトに静的メディアへのエラーログ出力ができるようにするとのこと。
window.onerror = function (message, file, line, col, error) {
return true;
};このような記述をすることで、アプリケーション全体のエラーを検知することができるらしい。
今度実行して記事化したいと思います。
