コピペで使える JavaScript逆引きリファレンス

JavaScript/jQuery開発時に、こそっとお使いください。

jQuery

[jQuery] CDNでjQueryを使う

投稿日:

jQueryを使うにはjQueryモジュールをダウンロードして使うのが一般的ですが、CDNを利用すればjQueryモジュールをダウンロードしなくてもjQueryを使うことができます。

サンプルソース

モジュールをダウンロードする場合とCDNを使う場合を比較してみます。

例1)jQueryモジュールをダウンロードして使う場合

例2)CDNでjQueryを使う場合

違いはjQueryの指定のところです。ダウンロードする場合はダウンロードしたモジュールへのパスを指定しますが、CDNの場合はURLを指定します。

URLに「//」以前を記述しないのはわざとです。記述しないと環境に合わせて自動でhttpかhttpsかを判断して補ってくれます。ただし、ローカルファイルで実行する場合は明示的にhttpもしくはhttpsを指定する必要があります。

CDNの種類

jQueryのCDNは、jQuery公式、Google、Microsoftの3か所が公開しています。
どこを使っても違いはないので、お好みで選んでください。

以下、各CDNのURLです。バージョンやタイプは適時読み替えてください。

【CDNの種類】
CDNURL
jQuery CDN//code.jquery.com/jquery-3.2.1.min.js
Google CDN//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
Microsoft Ajax CDN//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js

まとめ

CDNを使うとjQueryモジュールをダウンロードして自分で管理する必要がなくなるので運用が楽になるというメリットがあります。また、他のサイトで同じCDNを使っていればキャッシュされているので読込み速度が向上するというメリットもあります。

デメリットとしては、インターネットにつながっていなければ使えないのでインターネット必須というぐらいです。

インターネットにつながる環境であれば、こんな便利なものは使わない手はないと思います。(^^)/

スポンサーリンク

スポンサーリンク

-jQuery

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[jQuery] 選択されたラジオボタンの値を取得する

jQueryで選択されたラジオボタンの値を取得するサンプルです。 サンプルソース 例)ボタンを押すとチェック済みの値を取 ...

[jQuery] マウスオーバーイベントを設定する(.mouseover)

jQueryでマウスオーバーイベントを記述するには、.mouseover()を使用します。 サンプルソース 例)マウスオ ...

[jQuery] 文字列のスクリプトをグローバル領域で実行する(.globalEval)

文字列のスクリプトをグローバル領域で実行するには、globalEvalを使用します。 サンプルソース 例)"var a ...

[jQuery] valueに値をセットする(.val)

jQueryでvalueに値をセットするには、valを使用します。 サンプルソース 例)ボタンをクリックすると、テキスト ...

[jQuery] 選択されたチェックボックスの値を取得する

選択されたチェックボックスの値を取得するサンプルです。 サンプルソース 例)ボタンを押すと選択された全チェックボックスの ...

スポンサーリンク