[jQuery] [HTML] えっ！？ <script>にも読み込み順序とかあんの？

今日jQueryを初めた人の記事です。
あしからず。。。

経緯

最近Webアプリケーションの構築にドハマりしていて、JSONを返すだけの面白くないAPIづくりは一旦おいておいて、インターフェイス作りもやろうということでHTML + CSSを猛勉強している次第です。
いや、別に仕事で使うとかじゃなくて、趣味でなんですけどね。
Node.jsは使っている人なので、Javascriptはあらかたわかっているのですが、今日からみんな大好きjQueryを使いはじめることにしました。

で、いきなり3行しかないjavascriptのコードにハマりまくりました、ええ、それはもう盛大に。

問題のコード

今までバリデーションは全てPHPでやってエラーを返していましたが、そりゃ画面側でリアルタイムにやれるならやりたいということでPOST前検診（変な言い方・・・）をjavascriptさんに担当してもらおうと一番有名っぽそうなjQuery-Validation-Engineを選択。
簡単そうですし。

例のコード

jQuery(function ($) {
    $("#form").validationEngine();
});

TypeError: $(...).validationEngine is not a function

・・・

問題はHTMLの方でした

関数がないと言われいろいろ試しました。
jQuery(function ($) {の部分の表記がいろいろあるみたいなので全部試してみたり、jQuery-Validation-Engineの部分を別のプラグインにしてみたり・・・
結果は全戦全敗。
全部関数の不存在によるエラー。

というわけでロードに問題があるのではないかとHTMLを疑うことに。

before

<link href="css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine-ja.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

パスが問題か？

after

<link href="./css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="./js/jquery.validationEngine-ja.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

変わらない・・・

その時google先生は似たような患者さんを探し当ててくれました。
jQueryのcookie.js で $.cookie is not a function エラー（リンク切れ）

jQueryのプラグインcookie.jsを使おうとしたら、
$.cookie is not a function
というエラーが出ました。

なんでー？？？

調べてみると

$.cookie(name);
というコードでエラーが発生しています。
cookie.jsの基本中の基本のところです。

ネットを調べても、原因がよく分かりません。
結局、試行錯誤の末にたどり着いた解決策は・・・
HTMLのタグ内での、cookie.jsの読み込み位置の変更です。

エラーが発生する場合：
<script type="text/javascript" src="/js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/js/jquery-ui/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui/jquery-ui-1.8.14.custom.min.js"></script>

エラーが発生しない場合：
<script type="text/javascript" src="/js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="/js/jquery-ui/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>

エラーが発生するのは、cookie.jsを２番目に読み込んでいる場合です。
つまり、cookie.jsの読み込み位置は
「その他のjQuery関連ファイルよりも後でなくてはならない」
ようです。

とりあへず、解決しました。

まさか・・・
こうなのか？

afterのafter

<link href="./css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.validationEngine.js"></script>
<script type="text/javascript" src="./js/jquery.validationEngine-ja.js"></script>

Error「」

あっ・・・順番が・・・あるんですね・・・
まず、jQueryファイルをロードしないと誰もそれを利用できないと・・・

はぁ？
基本すぎて誰も教えないだって？
初心者はそういうところで困っているのです！！（逆ギレ）
これからjQueryを誰かに教えるときは私はここから教えることにします！！（宣言）

まとめ

jQueryファイルを上に！
プラグイン共を下に！！
（scriptファイルの読み込み時は、変数・関数などの定義優先権を考慮して読み込みましょう、という話。）

最後に

大事なことなのでもう一度言います。
今日jQueryを初めた人の記事です。

追記(2016/11/14)

リンク先が消滅していたので、本文を探し出してきて追記。