jQueryをこれから利用する人や、何かのjQueryプラグインをHTMLファイルに組み込むときに必要になる最初の作業「jQueryをダウンロードしてHTMLファイルに読み込む」やり方を手順にして記事にまとめました。
基本的な作業手順ですが、意外とつまずいたのがjQueryをダウンロードするときでした。
jQueryを使うには
jQueryを使うにはjQueryをHTMLファイルに読み込んでjQueryを動かせるようにする準備が必要です。
「jQueryをダウンロードしてHTMLファイルに読み込む」には2つの方法があります。
1つ目はjQueryの公式ページでjQueryのファイルをダウンロードしてから作業フォルダに設置、設置したjQueryのファイルをHTMLファイルに読み込む方法。
2つ目はダウンロードなしで、CDNにホストされているjQueryをHTMLファイルに読み込む方法です。
上記の2つの方法を順番に説明するので、読み進めることでjQueryを使うにはどのようなやり方をすればいいのかについて参考になることがあればと思います。
jQueryをダウンロードする
はじめにjQueryをダウンロードするやり方です。
上記の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に引っ張ってきてフォント変更しようと個人的に試みたコードです。
次にjQueryの読み込み確認用に作成したjsファイル(index.js)をHTMLファイルのheadで読み込みます。
そしてHTMLファイル内のh1タグにでもidをjstestにして付けておきます。
h1タグのテキストは「text」ですが、jQueryの読み込みができていれば、確認用のjsファイル(index.js)に記述した「Change text with js」が表示されます。
jQueryをダウンロードしてHTMLファイルに読み込む、そしてjqueryの読み込みを確認するためにHTMLファイル内のh1タグでマークアップしたテキストをjqueryで変更してみるまでの説明は以上です。