jQueryライブラリを読込ませる

2015年01月16日 · jQuery

jQueryを動作させる為には必ず、jQueryのライブラリをhtmlに読込ませておく必要があります。
読込ませずに、jQueryの文言を書いてしまうとエラーになってしまいます。

ミスの内容にする方法やエラーの場合に疑う文言なども紹介します。

jQueryのライブラリの読込ませ方が２通りあります。

jQueryのライブラリをダウンロード式

jQueryのライブラリをダウンロードして、自分のサーバーに格納して指定する方法です。
まずは、jQueryのライブラリページにアクセスします。
http://jquery.com/
以下の様なページが開かれると思います。
img_jqueryライブラリ
オレンジ色で「Download jQuery」のボタンがあるので、そこをクリックしてください。
そうすると、以下のようなページが開かれます。（少し下にスクロールした絵です）
img_jqueryライブラリダウンロード
赤く枠で囲まれているところから最新のjQueryライブラリをダウンロードすることができます。

ダウンロードファイル名に「min」と書いてるファイルですが、通常のライブラリを圧縮したファイルのことです。気持ちファイルの読込みが早くなります。

バージョンが１と２が存在しまします。
この違いは何か？
jQuery 1.x ：IE6,7,8をサポート
jQuery 2.x ：IE6,7,8をサポートしない為、処理速度が早い
といった違いです。
案件によって、IE6,7は対応しないという場合は、「jQuery 2.x」を使用して良いです

ソースマップについて
３番目のリンクに「jquery-1.11.2.min.map」というファイルがダウンロードすることができる
拡張子が「map」となっているのだが、こちらはソースマップのマップを指しております。

どんな時に使用するかですが、jQueryのライブラリをデバックするときに役人立ちます。
圧縮されているminファイル使用しても、ソースマップを使用しておくことで、圧縮されていないjQueryのライブラリでデバックすることができるお役立ちツールのことです。
jQueryのライブラリをデバックする必要がない場合は、基本ダウンロードや指定しなくて良い物です。

jQueryのライブラリをURL（CDN）指定

２つ目の方法ですが、jQueryのライブラリをダウンロードせずに指定のパスで読込む方法があります。
読込む方法をCDNと呼ばれています。
CDNを出しているところが３カ所あります
・Google Ajax API CDN
・Microsoft CDN
・jQuery CDN
の３カ所です

CDNを使用するメリット
・高可用、高性能なファイルサーバが使える
・キャッシュの設定がされている
などが言われております。
オフラインのところでは使用することができないので、その部分だけは気をつけて使用しましょう！

jQueryのライブラリ読込み方法

２つの種類があることはわかりました。それぞれの指定方法について、学んでいきます。
読込ませる場所は自由ですが、基本的には「head」内でよろしいかと思います。
ダウンロードの場合
ファイル構成
htdocsフォルダー
　index.html
　jsフォルダー
　cssフォルダー
jQueryのライブラリ「jquery-1.11.2.min.js」をjsフォルダーに格納しました。

index.htmlに以下の様に記述します

<head>
　<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
</head>

CDNの場合
Google Ajax API CDNの場合

<head>
　<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

Microsoft CDNの場合

<head>
　<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
</head>

jQuery CDNの場合

<head>
　<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>

指定URLが変わっていきますので注意しましょう

jQueryのライブラリでよくあるエラー

エラー内容です、こういったエラーがあった場合に疑いましょう
Failed to load resource: the server responded with a status of 404 (Not Found)
指定したファイルがなかった時に多く見られるエラーです。
読込ませている先にjQueryのライブラリが格納されているか確認しましょう

Uncaught ReferenceError: $ is not defined
こちらは、「$」の指定がないというエラーになっております。
jQueryの場合は「$」=「jQuery」の省略系で使用します。
今回の場合は、jQueryのライブラリを読込めずにjQueryのソースを書いてしまっていることが原因です。

動作させたところ、うまく動かなかった場合は、まずはエラーがあるかどうかというのを確認しましょう

引用サイト

http://html5experts.jp/jxck/3102/
http://tech.nitoyon.com/ja/blog/2013/01/29/jquery-source-map/

web-wizardry

インターネット・スマホ、そしてテレビにwebの魔法をWizardry