JSのライブラリはCDNかローカルか?
JSのライブラリをどうやって使うのがよいのか。だいたい下記の2択かと思っている。
①CDNから取得する
HTMLに以下のように書くだけで使える方法。
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
メリット
npmなどの管理が不要で、HTMLに1行書くだけで使える。手軽さが最大の強み。
デメリット
利用者がインターネット環境でない前提のアプリだとCDNを取得できないため厳しい。また、latestなどを指定していると意図せずバージョンが変わり、動作が壊れるリスクがある。
②npmなどでローカル管理する
npm install jquery でローカルに取得し、node_modules/ から参照する方法。
メリット
バージョンが package.json で固定されるため管理が確実。利用者がインターネット接続していなくてもライブラリを使用できる。
デメリット
管理がやや複雑になる。また、node_modules/ は .gitignore で除外するのが一般的なため、Cloudflare Pagesなどのホスティングサービスにどうデプロイするかが悩みどころ。
Cloudflare Pagesでローカル管理する場合の答え
Build Commandに npm install を指定すればよい。こうするとCloudflareがデプロイ時に node_modules/ を生成してくれるため、ローカルと同じ構成で動かすことができる。
ただし、今回のサイトのような純粋な静的サイトの場合、わざわざローカル管理にする旨みは薄い。CDNで十分なケースが多い。ローカル管理が活きるのは、オフライン動作が必要な場合や、バージョンを厳密に固定したい業務システムなどが主な用途かと思っている。