本記事では、jQueryを公式ページからダウンロードして使えるようにする方法についてサンプルコードを用いて分かりやすく解説しています。
jQueryの学習におすすめ参考書
jQuery最高の教科書
| 著者 | 株式会社シフトブレイン |
|---|---|
| 発売日 | 2013/11/26 |
| ページ数 | 320ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (93件) |
参考書が苦手な人はUdemyの動画がおすすめ
即実践 手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう
| 作成者 | 村守 康 |
|---|---|
| 学習時間 | 6時間 |
| 受講者数 | 28,547人 |
| レビュー | (425件) |
jQueryの導入
jQueryを導入するには、2つの方法があります。1つ目が公式ページからjQueryを動かすために必要なファイルをダウンロードする方法、2つ目がCDN(Contents Delivery Network)を使う方法です。
今回は、1つ目の公式ページからjQueryの導入に必要なファイルをダウンロードする方法を利用します。
- 公式ページ：オフラインで使用可能
- CDN：ファイルをダウンロードする必要がない
jQueryをCDNで読み込む方法については下記の記事で紹介しているので、興味のある方はご覧ください。
jQuery公式ページから必要なファイルをダウンロード
まず始めにjQuery公式ページのダウンロードページにアクセスします。
画像の青線で囲われている「Download the compressed, production jQuery 3.6.0」を右クリックで名前を付けて保存します。
ファイルをダウンロードしたら、任意の場所にファイルを配置しHTMLの</body>の直前で読み込ませます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- ↓ダウンロードしたファイルを配置 -->
<script src="jquery-3.6.0.min.js"></script>
</body>
</html>jQueryの記述場所
jQueryを使って書いたコードは、先ほどダウンロードして読み込ませたファイルよりも後に配置します。
その理由はHTMLは上から順番にコードを実行させていくため、jQueryがまだ読み込まれていない状態でjQueryでしか扱えない$やメソッドを使ってしまうと、その記述はJavaScriptで実行できませんとエラーが出力されてしまうからです。
上記の注意事項を踏まえた上で、エラーが出力されないようにするための正しいファイル配置は以下のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="jquery-3.6.0.min.js"></script>
<!-- ↓ダウンロードファイルよりも後ろに配置 -->
<script src="ファイルパス/ファイル名.js"></script>
</body>
</html>jQueryの動作確認
最後にダウンロードしたファイルが正しく読み込まれjQueryが使える状態か確認しましょう。
下記のサンプルコードをコピペして、対象のhtmlファイルをブラウザで開きます。表示されている文字が「使用可能です！」と表示されていれば、jQueryが正しく読み込まれ実行されています。
<p>使用できません＞＜</p>$("p").text("使用可能です！");
DMM WEBCAMP 
CodeCamp 
TechAcademy 
