jQueryライブラリをCDNで読み込んでローカルで動作確認する時に注意すべきこと
最近、HTML、CSS、JavaScript、jQuery、…かっこ良く言えばフロントエンドな方面の勉強にモチベが上向いている感じです。 で、jQueryについて勉強し始めたときに初歩の初歩でハマったので、備忘録書いときます。（jQueryに限った話じゃないかも）
jQueryライブラリを利用する方法
jQueryライブラリを読み込む方法は、2つある。
jQueryライブラリをダウンロードして使うのは効率がよくない
jQueryは世界中のサイトで広く利用されている。そのサイトがそれぞれjQueryライブラリファイルを自分自身で持っているとすると、そのサイトを見る閲覧者は何度も同じ内容のファイルをダウンロードすることになる。
通常、ブラウザにはキャッシュ機能があり、一度ダウンロードしたファイルはキャッシュとして保存されて2回目以降閲覧した際に再びダウンロードする必要がないが、各サイトにjQueryライブラリファイルが置かれているとキャッシュという仕組みが効かなくて、各サイトから同じファイルをダウンロードすることになる。
という訳で、これは閲覧者への負担が大きい。
CDN(Contents Delivery Network)を使おう
CDNは閲覧ユーザにライブラリや画像などの様々なコンテンツを届けるだけの仕組み。CDNを使うとjQueryをCDNから使っているサイトであれば、１度ダウンロードしてキャッシュしてしまえば、2回目以降はキャッシュが効いてダウンロードする手間が省ける。
あと、CDNは
- 高性能なサーバ側での圧縮転送(gzip)機能に対応し、高速化が期待できる
という利点もある。
CDNの使い方
jQueryの公式サイトのDownloadページからコードをコピペする。
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
この「//code.jquery.com/」がサーバの場所で、ここにjQueryのソースがある。
CDNを読み込み方法はとても簡単で、基本的にhead要素に入れるか、body要素の一番下に配置すればいいだけ。一部の場合を除いて。
「//」でハマった
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
このsrcのURLの書き方がちょっと特殊。プロトコルのhttp:やhttps:が省略されてる。
「//」以前を省略すると次の２つの場合のどちらでも対応できる。
http://code.jquery.com/jquery-1.11.3.min.js https://code.jquery.com/jquery-1.11.3.min.js
httpプロトコルのページはhttpで補われるし、httpsプロトコルのページならhttpsが補われる。
でも、この「//」省略表記はサーバーに上げた時は動作するのにローカルだと動かないという現象が起きる。
結論から言ってしまうと、ローカル環境で動かす場合は
http://code.jquery.com/jquery-1.11.3.min.js
というように明示的に「http:」を補ってあげる必要がある。
なぜローカルだとhttp:を補う必要があるのか
ローカルに置いたhtmlファイルをChromeなどのブラウザでアクセスするとURLは
file:///C:/Users/hoge/demo.html
という感じになる。プロトコルはfile:となっているのが分かる。
で、「//」で補われるのはfile:プロトコルなので
file://code.jquery.com/jquery-1.11.3.min.js
ここへアクセスしようとしてしまう。よって、jQueryライブラリソースへはアクセス出来ず、読み込めない。
という訳で、
ローカル環境でCDNを使うなら「file:」プロトコルが補われてしまうから「//」の前にしっかり「http:」を明示的に補おう！
って話でした。
