「jQuery」の導入方法
Web Basic Archive
jQueryは、Webページの構築において非常に便利なJavaScriptライブラリの一つです。
JavaScriptライブラリとは、JavaScriptのプログラムを書きやすくするために、使用頻度の高いコードや効果などを再利用できるようにまとめたもので、jQuery以外にも、メタ（旧フェイスブック）社が開発した「React.js」や、近年人気となっている「Vue.js」など用途に合わせたさまざまなライブラリが存在しています。
目次
jQueryが支持される理由
jQueyが支持される理由としては、次のようなことがあげられます。
- コードを短縮することができ、可読性が高い … CSSのように、IDやクラスを使用してセレクタを指定できるので、専門的にプログラムを組むことがないデザイナーなど、フロントエンジニアでも扱うことが比較的容易です。
- プラグインが豊富で実用的 … プラグインとは機能を拡張するためのソフトウェアのことをさしますが、jQueryでは、スライドショーやポップアップ表示など多数のプラグインがWEB上に公開されており、プログラムを一から構築しなくても簡単に実装することが可能です。
- クロスブラウザ対応 … ピュアなJavascriptでは、IEやsafariなどで、エラーとなって上手く動作しないことがありますが、どのブラウザを使用しても同じ動きが表現されるように対応しています。
jQueryの導入方法
jQueryは、HTMLの<head>部分に、プログラムファイルを読み込ますことで利用が可能になりますが、次の2通りの導入方法があります。
- ファイルをダウンロードして利用する
- CDNを利用する
①ファイルをダウンロードして利用する
jQueryの公式サイトからファイルをダウンロードし、FTPを使用してサーバーにアップして利用する方法です。
ファイルのダウンロード
jquery.comにアクセスしたら、「Download」をクリックしてファイルダウンロードページに移動しましょう。
jQuery 3.x のようにバージョンが記載されているので、任意のものをダウンロードします。ちなみに、このバージョンの違いというのは、サポートするブラウザによるもので、特にIE（Internet Explorer）の対応が大きいものとなります。
- jQuery1.x系 … IE6～8対応
- jQuery2.x系 … IE9～11対応、他最新版のブラウザに対応
- jQuery3.x系 … 2.x系と同様だが、設計を見直したバージョン
現在IEはサポートが終了していますので、jQuery1.x系については、ほぼ考慮しなくて問題ないと思います。しかし、2.x系と3.x系については設計が改善され変更となっているので、古いプラグインなどでは、3.x系に対応していない場合があります。導入の際は、どのバージョンに対応しているか確認をしてください。
また、同じバージョンのなかでも、uncompressed（通常版）、compressed（改行・インデント等を排除した圧縮版）、slim（AnimationやAjax等の機能を省いたもの）などがありますが、特に問題がなければ通常は、compressed（圧縮版）を使用します。
ファイルのダウンロードの際は、左クリックするとコードが書かれたページにそのまま移動してしまうため、右クリック > 名前を付けてリンク先を保存 でファイルを保存しましょう。
FTPでファイルをアップロード
ダウンロードしたファイルを、FTPソフトを使用してサーバーにアップロードします。「js」などという名前のディレクトリを作成して、そのなかに入れるのが一般的です。
HTMLで読み込ませる
HTMLファイルの<head>部分に、jQueryのファイルを読み込ます記述を行います。scriptタグのsrc属性には、さきほどアップロードしたファイルへのパスを設定しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
<!--jQueryの読込-->
<script src="js/jquery-3.7.0.min.js"></script>
<!--作成するjavascriptファイルはプログラムファイルの後に記述する-->
<script src="js/function.js"></script>
</head>
<body>
<header>
ヘッダー要素
</header>
<main>
メインコンテンツ
</main>
<footer>
フッター要素
</footer>
</body>
</html>jQueryを使用して作成するJavascriptファイルや、プラグインファイルは、このプログラムファイルの後に記述する必要があるので、読み込ます順番に注意しましょう。先に記述してしまうと、jQueryで書かれた部分が機能せずエラーとなってしまいます。
②CDNを利用する
ファイルをダウンロードして利用する場合は、上記の一連の手順が必要になるので手間がかかります。次に紹介する、CDNを利用する方法は、この手間を省くことができ、また自社サーバーの負担も減らせるので、jQueryを使用する場合の一般的な方法となります。
CDNとは、Content Delivery Networkの略で、WEB上でプログラムファイルが配信されているサーバーに、アクセスすることで、そのプログラムを利用する方法です。
jQueryのCDNは複数用意されており、jQueryのサーバー以外にも、GoogleやMicrosoftなどもCDNを用意しています。
今回は、jQueryのサーバーのCDNを利用する方法を見ていきます。
CDNコードをコピーする
jQueryのCDNサイトにアクセスします。ファイルダウンロードと同じように、任意のバージョンを選択します。
uncompressed、minified、slim、slim-minifiedとあります。名前は「minified」になっていますが、これが圧縮されたバージョンになりますので、通常はこちらを使用してください。
クリックするとコードが書かれたポップアップが表示されますので、コピーボタンをクリックしましょう。
HTMLで読み込ませる
ダウンロードで利用する場合と同じく、HTMLの<head>にコードを記述します。さきほどコピーしたコードを張付けましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
<!--jQueryの読込-->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<!--作成するjavascriptファイルはプログラムファイルの後に記述する-->
<script src="js/function.js"></script>
</head>
<body>
<header>
ヘッダー要素
</header>
<main>
メインコンテンツ
</main>
<footer>
フッター要素
</footer>
</body>
</html>ファイルをダウンロードして利用する場合と比べて、大幅に手順が少なくなっていることがわかります。
こちらでjQueryを使ってプログラムを設定する準備ができました。次回は、代表的なjQueryのプラグインなどを使用して、プログラムを実装する方法を見ていきたいと思います。
参考にしたサイト
