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

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

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

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

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

```js:例のコード
jQuery(function ($) {
    $("#form").validationEngine();
});
```

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

・・・:disappointed_relieved:

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

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

```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>
```

パスが問題か？

```html: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 エラー](http://office-ikason.com/devblog/archives/328)~~（リンク切れ）


>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関連ファイルよりも後でなくてはならない」
>ようです。
>
>とりあへず、解決しました。


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

```html: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ファイルをロードしないと誰もそれを利用できないと・・・

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

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

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

##追記(2016/11/14)
リンク先が消滅していたので、本文を探し出してきて追記。