jQueryとは
jQueryは、JavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリです。
JavaScriptをイチから書くよりも、jQueryを使ったほうが様々な機能を簡単に実装することができます。 1つの機能を実現するためにJavaScriptでは10行のコードを書く必要があっても、jQueryでは1~2行ほどで済むという場合も結構ありますよ。
URL : https://jquery.com/
jQueryはJavaScriptライブラリ、短い記述でJavaScriptの設定出来るようプログラムをあらかじめ作ってくれているものです。 このため使用できる機能等に制限はありますが、簡単にHTMLやCSSの操作が出来る点が魅力と言えます。
JSファイルの読み込み・依存関係
htmlなどのファイルをブラウザで開くと、基本的にソースは上から順に読み込まれていきます。 基本的なHTMLの構造では、下図のような形です。
JSファイルの読み込み位置について
CSSファイルは表示部分<body>タグよりも上で読み込ませていました。
しかし、基本的にjsファイルは</body>タグの直前で読み込ませます。ページの表示部分を読み込み終わった後ですね。
Bootstrapでも、JSファイルは</body>直前に入れるよう指定されています。
このように、JSファイルをHTMLの最後の方で読み込ませているのには理由があります。
JavascriptによってはHTMLコードを読み込んだ上でスクリプトを実行しないと、エラーになってしまうものがあります。 また重大なエラーがあった場合は、HTMLの読み込み自体が行われない場合もあります。
こうした状況を防ぐため、JSファイルは基本的に</body>直前に入れているのです。
ただし、ローディングアニメーションを使いたいなど、webページ本体（bodyタグ内）を全て表示する前に行いたい事があれば`head内でjsファイルを読み込むこともあります。
素材のHTMLファイルでは、fontawsomeのJSファイルだけ<head>内で読ませています。
これもCSSと同様に、画像が重いなど理由でページの読み込みが遅れると、アイコンが表示されず残念な表示になってしまうのを防ぐために先に書いています。
↓アイコンが表示されない例
ケースバイケースではありますが、上記のような理由が無い場合は</body>直前にjsファイル読み込みを記述しましょう。
JSファイルの依存関係
BootstrapのサイトからJSコードを貼り付けましたよね。 Bootstrap v4系を使用している場合は、下記のように３つのコードを「順番通りに入れて下さい」と表示されていました（※Bootstrap v5系ではjsファイルの構成が変わっています）。
「順番通り」という指示は、これら３つのjsファイルが依存関係にあるためです。
Bootstrap(v4系)は、jQueryの文法を元に設計されています。
jQueryが存在しない状態で読み込もうとすると「Uncaught ReferenceError: $ is not defined」など、関数が定義されていないというエラーが出てしまいます。
jQueryが無いのに、jQuery用の文法で書いても動作しないわけです。 bootstrap.min.jsはjQueryありきで動く、jQueryに依存しているファイルなのです。
ちなみに、popper.min.jsはポップオーバーを表示するjsファイルです。 これを元にbootstrap.min.jsでテンプレートファイルで使っているツールチップなどが動くように設定されています。 例えばモーダルのページには「Tooltips and popovers」の項目がありますね。
jQueryのプラグインの追加について
jQuery自体がJavascriptのライブラリですが、更に手軽に機能追加・拡張を行える「jQuery用プラグイン」も多くリリースされています。 商用でも無料で使えるプラグインも沢山あり、本講座でも次レッスン以降で使用します。
こうしたjQueryプラグインも、jQueryで定義された関数をベースに設計されています。 ですので、依存関係に沿うよう下図のような順番で読み込ませる必要があります。
次のレッスンで、jQueryを動かしてみましょう。