22時に寝ようと思って2時に寝る。スマートフォン用の表示で見る22時に寝ようと思って2時に寝る。備忘録や日記を書いてます。プログラミング最近、HTML、CSS、JavaScript、jQuery、...かっこ良く言えばフロントエンドな方面の勉強にモチベが上向いている感じです。jQueryについて勉強し始めたときに初歩の初歩でハマったので、備忘録書いときます。(jQueryに限った話じゃないかも)jQueryライブラリを利用する方法jQueryライブラリを読み込む方法は、2つある。Network)を利用してjQueryライブラリを読み込む方法jQueryライブラリをダウンロードして使うのは効率がよくないjQueryは世界中のサイトで広く利用されている。そのサイトがそれぞれjQueryライブラリファイルを自分自身で持っているとすると、そのサイトを見る閲覧者は何度も同じ内容のファイルをダウンロードすることになる。通常、ブラウザにはキャッシュ機能があり、一度ダウンロードしたファイルはキャッシュとして保存されて2回目以降閲覧した際に再びダウンロードする必要がないが、各サイトにjQueryライブラリファイルが置かれているとキャッシュという仕組みが効かなくて、各サイトから同じファイルをダウンロードすることになる。いう訳で、これは閲覧者への負担が大きい。Network)を使おうCDNは閲覧ユーザにライブラリや画像などの様々なコンテンツを届けるだけの仕組み。CDNを使うとjQueryをCDNから使っているサイトであれば、1度ダウンロードしてキャッシュしてしまえば、2回目以降はキャッシュが効いてダウンロードする手間が省ける。あと、CDNは高性能なサーバ側での圧縮転送(gzip)機能に対応し、高速化が期待できるという利点もある。CDNの使い方jQueryの公式サイトのDownloadページからコードをコピペする。src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>この「//code.jquery.com/」がサーバの場所で、ここにjQueryのソースがある。CDNを読み込み方法はとても簡単で、基本的にhead要素に入れるか、body要素の一番下に配置すればいいだけ。src="//code.jquery.com/jquery-1.11.3.min.js"></script>このsrcのURLの書き方がちょっと特殊。プロトコルのhttp:やhttps:が省略されてる。「//」以前を省略すると次の2つの場合のどちらでも対応できる。http://code.jquery.com/jquery-1.11.3.min.jshttps://code.jquery.com/jquery-1.11.3.min.jshttpプロトコルのページは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:」を明示的に補おう!って話でした。@azuno_mixはてなブログをはじめよう!azuuunさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか?はてなブログをはじめる(無料)はてなブログとは22時に寝ようと思って2時に寝る。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。