jQuery ファイル読込みを CDN のライブラリから参照する方法
Webllica
ホーム
HTML・CSS
WordPress
JavaScript
jQuery
サイト運営
お問い合わせ
Home
jQuery
基本
jQuery ファイル読込みを CDN のライブラリから参照する方法
更新日： 2019/09/13 公開日：2013/11/27
ツイート シェア はてブ URL コピー
jQuery とは JavaScript のライブラリの一種で、スクリプトファイルを自身のサーバーにアップロードして参照する必要があります。
呼び出し方は、他の JavaScript ファイルと同様です。
JavaScript の参照方法
<script type="text/javascript" src="/jquery-3.3.1.js"></script>
なお jQuery の公式サイトからダウンロードすれば、ローカル環境でも使えます。
Download jQuery | jQuery
ただ、わざわざダウンロードしなくても CDN として Google やマイクロソフト、そして jQuery の公式サイトに、ライブラリを直接参照できるパスが提供されています。つまり、このパスを利用することで、自身のサーバーへの負荷を減らすことができるのです。
CDNとは
コンテンツ・デリバリー・ネットワーク（CDN）とは簡単に説明すると、ファイルを配信する仕組みです。各地にキャッシュサーバーが存在し、アクセス元から一番近くのサーバーへ接続するため、本体に負荷が集中することなく素早くファイルが提供される仕組みを持っています。
今回は各社が提供する CDN から、jQuery ファイルを参照する方法について説明していきます。
jQuery を利用するための準備
Google の CDN よりファイルのリンク先を取得
Hosted Libraries | Google Developers
複数のバージョンが記載されていますが、最新は一番上にあるものです。jQuery と組み合わせて使うプラグインによっては、バージョン 1.X 系や 2.X 系でしか使えないものもありますが、特に意識する必要がなければ 3.X 系を参照するようにしましょう。
Google CDN からファイルを読み込む
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
js ファイル直前のディレクトリがバージョンを表しています。上記例では バージョン 3.3.1 を参照しています。この数字を変えることで、他のバージョンを参照できます。
Microsoft の CDN よりファイルのリンク先を取得
Microsoft Ajax Content Delivery Network | Microsoft Docs
バージョンに関しては Google と同様です。参照方法は次の通り。
Microsoft CDN からファイルを読み込む
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
ファイルの種類に min や slim、map が含まれているものがあります。jQuery を使って何かプログラム開発をする人でなければ「.min.js」ファイルを参照してください。それぞれのファイルは次のような違いがあります。
ファイルの種類
内容
*.js 何も手を加えられていない jQuery ファイル
*.min.js スペース等、プログラム処理する上で不要な情報を取り除いてデータ量が圧縮されたファイル
*.min.map 圧縮ファイルのプログラムをデバッグする時に必要になるもの（プログラマーが必要とするファイル）
*.slim.* 一部の機能に限定して提供されたスリムバージョン（処理によってはこのバージョンで動かない）
Microsoft のサイトでは http で記されていますが https にリダイレクトされるので、事前に書き換えるようにしましょう。
jQuery の CDN よりファイルのリンク先を取得
jQuery CDN
以下のサンプルではリンク先の minified を選択して、圧縮された .min ファイルを参照しています。
jQuery CDN からファイルを読み込む
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
Google や Microsoft と少し記述内容が異なり、integrity と crossorigin の属性が追加されています。integrity 属性の値は、参照するファイルが意図せず改ざんされていないかブラウザ側でチェックするための情報です。
上記で紹介した Google や Microsoft が提供する CDN が改ざんされるリスクは低いですが、その確率は 0% ではありません。セキュリティ面を意識するのであれば integrity が実装された jQuery の CDN を使うのが望ましいです。
ただ、これらの CDN の中では jQuery のキャッシュサーバーは数が少ないため、アクセスする場所によっては Google の方が処理スピードが速くなります。安全面で選ぶか、処理速度で選ぶかは目的によると思いますので、自身の用途に合った選び方をしてください。
なお、当ブログではレスポンスの速さから Google の CDN から jQuery ライブラリを参照しています。参考までに。
この記事をシェアする
ツイート シェア はてブ URL コピー
関連記事
jQuery でセレクトボックスを操作！value 値の取得や選択項目の指定、プルダウンテキストの取得方法
jQuery で innerHTML の書き換え／取得／追記／削除を行う方法
jQuery で右クリックのイベントを禁止する方法
jQuery でキーボード入力をキャンセル（無効化）する方法
jQuery でテキストボックスの値を設定／取得／追記／削除を行う方法
jQuery でラジオボタンの値を取得／変更する方法
jQuery でセレクトボックスのプルダウン項目（option 要素）を追加／削除する方法
前の記事 2011/08/30
WordPress テーマの PHP テンプレート上でショートコードを呼び出す方法
次の記事 2013/11/27
jQuery で innerHTML の書き換え／取得／追記／削除を行う方法
このブログの運営者
NJ (えぬじぇい)
元システムエンジニア。個人事業主として独立して Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりしています。
@_NJ69_ Facebook

カテゴリ
HTML・CSS
WordPress
JavaScript
jQuery
サイト運営
レンタルサーバー
目次
jQuery を利用するための準備
Google の CDN よりファイルのリンク先を取得
Microsoft の CDN よりファイルのリンク先を取得
jQuery の CDN よりファイルのリンク先を取得
jQuery ファイル読込みを CDN のライブラリから参照する方法
Webllica
サイトマップ お問い合わせ
プライバシーポリシー・免責事項
© 2018-2021 ウェブリカ
",2===Vt.childNodes.length),k.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=D.exec(e))?[t.createElement(i[1])]:(i=we([e],t,o),o&&o.length&&k(o).remove(),k.merge([],i.childNodes)));var r,i,o},k.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(k.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},k.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){k.fn[t]=function(e){return this.on(t,e)}}),k.expr.pseudos.animated=function(t){return k.grep(k.timers,function(e){return t===e.elem}).length},k.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=k.css(e,"position"),c=k(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=k.css(e,"top"),u=k.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,k.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},k.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){k.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===k.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===k.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=k(e).offset()).top+=k.css(e,"borderTopWidth",!0),i.left+=k.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-k.css(r,"marginTop",!0),left:t.left-i.left-k.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===k.css(e,"position"))e=e.offsetParent;return e||ie})}}),k.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;k.fn[t]=function(e){return _(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),k.each(["top","left"],function(e,n){k.cssHooks[n]=ze(y.pixelPosition,function(e,t){if(t)return t=_e(e,n),$e.test(t)?k(e).position()[n]+"px":t})}),k.each({Height:"height",Width:"width"},function(a,s){k.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){k.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return _(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?k.css(e,t,i):k.style(e,t,n,i)},s,n?e:void 0,n)}})}),k.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){k.fn[n]=function(e,t){return 0
