jQueryをダウンロードしてHTMLファイルに読み込む

jQueryをこれから利用する人や、何かのjQueryプラグインをHTMLファイルに組み込むときに必要になる最初の作業「jQueryをダウンロードしてHTMLファイルに読み込む」やり方を手順にして記事にまとめました。

基本的な作業手順ですが、意外とつまずいたのがjQueryをダウンロードするときでした。

1. jQueryを使うには
2. jQueryをダウンロードする
3. HTMLファイルにjQueryを読み込む
4. jQueryをCDNで読み込む
5. jQueryの読み込みを確認してみる

jQueryを使うには

jQueryを使うにはjQueryをHTMLファイルに読み込んでjQueryを動かせるようにする準備が必要です。

「jQueryをダウンロードしてHTMLファイルに読み込む」には2つの方法があります。

1つ目はjQueryの公式ページでjQueryのファイルをダウンロードしてから作業フォルダに設置、設置したjQueryのファイルをHTMLファイルに読み込む方法。

2つ目はダウンロードなしで、CDNにホストされているjQueryをHTMLファイルに読み込む方法です。

上記の2つの方法を順番に説明するので、読み進めることでjQueryを使うにはどのようなやり方をすればいいのかについて参考になることがあればと思います。

jQueryをダウンロードする

はじめにjQueryをダウンロードするやり方です。

https://jquery.com/download/

上記のURLを開くと、URLの上の画像のようにjQuery公式ページのダウンロードページが表示されます。

ダウンロードページで「jQuery」の見出しの下にある赤い3つのリンクの中からjsファイルをダウンロードします。

Download the compressed, production jQuery 3.6.0
Download the uncompressed, development jQuery 3.6.0
Download the map file for jQuery 3.6.0

それぞれのリンクテキストに表示する数字はjQueryのバージョンを示しています。バージョンはダウンロードする時期で異なります。

jQueryをダウンロードするときに、どれをダウンロードすればいいのか？

Download the compressed, production jQuery 3.6.0

compressedと書いてあるjqueryをダウンロードします。

ダウンロードする操作方法

ダウンロードリンクの上でマウスを右クリックすると、「リンク先を別名で保存」が表示します。「リンク先を別名で保存」をクリックすることで「jquery-3.6.0.min.js」というjsファイル名でjQueryをダウンロードすることができます。

ダウンロードしたファイル名には「min」が付いてますが、これは圧縮された軽量なjQueryのファイルです。

もしuncompressedと書いてある方のリンクからjQueryをダウンロードした場合は「min」なしのjsファイル名になり、圧縮されていないファイルなためコードが見やすいjQueryをダウンロードできます。

jquery-3.6.0.min.js(圧縮版)
jquery-3.6.0.js(非圧縮版)

両方をダウンロードしてファイル情報を縦に並べたものが以下の画像です。

jQueryをダウンロードしたファイル容量が違うが分かるかと思います。

jQueryをダウンロードする前にファイル内のコードを確認しておきたいという場合には、jQueryをダウンロードするリンクをマウスで左クリックすると、ページが切り替わりダウンロードするファイル内のコードを見ることができます。

そのままダウンロードすることが可能で、切り替わったページにてcommand+Sを押すことでjQueryをダウンロードすることができます。

HTMLファイルにjQueryを読み込む

ダウンロードしたjQueryのファイル「jquery-×.×.×.min.js」は、HTMLファイルのheadで読み込みます。

たとえばjQueryを読み込みたいHTMLファイルがindex.htmlだとして、jQueryのjsファイルをindex.htmlと同じ階層にアップロードして読み込む場合。

<script src="jquery-3.6.0.min.js"></script>

HTMLファイルのhead要素にscriptタグをマークアップして、src属性の値にjsファイル名を拡張子付きのパスを指定して読み込みます。パス経路が簡単なので、読み込み確認したいときによく使う指定方法です。

jsフォルダを作成した中にjQueryのjsファイルを配置してアップロードした場合

<script src="js/jquery-3.6.0.min.js"></script>

HTMLファイルのhead要素にscriptタグをマークアップして、src属性の値にjs/jquery-3.6.0.min.jsとパスを指定してjQueryを読み込みます。

jQueryをダウンロードしてHTMLファイルに読み込んだ場合、少し手間がかかりますが、jQueryのファイルをサーバーで管理できるのでjQueryが読み込めないという心配が減るのが良い点だと考えられます。

jQueryをCDNで読み込む

jQueryをダウンロードしてHTMLファイルに読み込むやり方が難しいという場合は、jQueryをダウンロードしないでCDNで読み込むだけのやり方を検討すると簡単です。

jQueryをCDNで読み込む場合はGoogleなどがホストしているjQueryのライブラリファイルのコードをHTMLファイルのhead要素にコピペして読み込みます。

jQueryのCDNをGoogleから読み込む場合

GoogleがホストしてるjQueryをCDNで読み込むときには「Google Hosted Libraries」というページからCDNのコードをコピーします。

https://developers.google.com/speed/libraries/#jquery

上記のURLでGoogleの「Google Hosted Libraries」のページのjQueryのセクションを開くことができます。

3.x snippet:
2.x snippet:
1.x snippet:

開いたGoogle Hosted LibrariesのページのjQueryのセクションには上記のように数字から始まるテキストごとにscriptタグが表示していますが、この数字はjQueryのバージョン(系統)を示しています。

たとえば3.x snippet:からjQueryのCDNコードをHTMLファイルに読み込む場合は、3.x snippet:の下に記載しているscriptタグで囲まれたコードをコピーします。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

コピーしたコードはHTMLファイルのhead要素にペーストします。jqueryをCDNで読み込むやり方は、これで完了です。

jQueryのCDNを使用するとき3つの系統がありますが、どれがいいのか悩むことがあるかと思います。

1.X系はIE8以前をサポートする
2.X系はIE9以降をサポートする
3.X系は現在のブラウザに合わせて設計が見直されて作り直されているもの

jQueryを使用するWebサイトの方針に合わせて、IEのどのバージョンから切り捨てて、どのバージョンまでサポートするかを把握しておくのが使い分けのポイントかと思います。

jQueryの読み込みを確認してみる

jQueryをダウンロードしてHTMLファイルに読み込んだ後は、jQueryの読み込みができているか確認してみることにします。

jQueryのコードを記述した確認用のjsファイル(index.js)を作成してからjsフォルダに格納します。

jQueryのコードは、書き方をよく理解できていない私ですが、調べながら確認コードを記述してみたのが以下の記述です。

$(function(){
    $('#jstest').html('Change text with js');
    $('body').css("font-family", "'Slackey', cursive");
});

IDにjstestが付いたHTMLファイル内の要素を対象にして、テキストを「Change text with js」に変更するコードです。bodyにあてるCSSの変更もしていますが、GoogleフォントのSlackeyのフォントコードをheadに引っ張ってきてフォント変更しようと個人的に試みたコードです。