jQuery

jQueryをダウンロードする方法について徹底解説

本記事では、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をCDNで読み込む方法を徹底解説本記事では、jQueryをCDNで読み込む方法についてサンプルコードを用いて分かりやすく解説しています。...

jQuery公式ページから必要なファイルをダウンロード

まず始めにjQuery公式ページのダウンロードページにアクセスします。

jQueryダウンロードページ
jQueryダウンロードページ

画像の青線で囲われている「Download the compressed, production jQuery 3.6.0」を右クリックで名前を付けて保存します。

名前を付けて保存
名前を付けて保存

Download the compressed, production jQuery 3.6.0を左クリックすると、ダウンロードするソースコードが表示されるだけなので、必ず右クリックで名前を付けて保存を押しましょう。

※ファイルを開くと、画面いっぱいにソースコードが表示されるため最初見た方は何か危ないファイルを開いてしまった!と思うかもしれませんが、jQueryを動作させるためのソースコードなので問題ありません。

ファイルをダウンロードしたら、任意の場所にファイルを配置し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("使用可能です!");
jQuery読み込み成功時の表示
jQuery読み込み成功時の表示

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村