手順
1 VSCodeにHTMLの雛形を作成
VSCodeを起動して、Emmet記法を利用して、! + Enterを実行して、HTMLの雛形を作る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2 jQueryの公式サイトよりCDNを記述
公式サイトを参照する。Download－Using jQuery with a CDNより、To see all available files and versions, visit https://code.jquery.comのリンクを参照する。
該当のjQueryのバージョンを指定して、CDNのコピーをHTMLに貼り付ける。
jQueryの公式サイトのCDNには、integrity属性がついているが、Google等のサードパーティーのCDNにはついていない。integrity属性とは、jQueryのコードが改ざんされていないかを、ブラウザ側でチェックするための情報のことになる。セキュリティを重視する場合は、公式サイトのCDNから取得した方が安全という判断となる。ただし、セキュリティよりも速度を重視したい場合は、GoogleサイトのCDNから取得した方がいいという判断となる。
コピーしたCDNをHTMLのbodyの直下に貼り付ける。headでもいいのだが、bodyの直下に書くのが今のトレンドとなっている。
<body>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</body>
3 CSSファイルのリンク先を記述
CSSファイルのリンク先も、headに記述しても、bodyに記述してもいいが、CDNをbodyに記述するのであれば、同じ個所に記述した方がいい。
<body>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</body>
4 スクリプトを書く
スクリプトは、必ず、CDNを組み込んだ箇所の下に記述します。
<body>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
// ひと昔は全てこの内部に書いていた
// readyはHTML全体が読み込まれた後に実行するメソッド
$(document).ready(function(){
});
//今の書き方
$(function(){
});
</script>
</body>
jQueryの説明
jQueryの種類
jQueryには、1.x、2.x、3.xの３つのバージョンが存在している。1.xはIE8以前をサポートしている。IE8以前とは、WindowsXP以前ということ。WindowsXPを含め、古いOSでも動作させたい場合は、1.xを選択することになる。XPより上のバージョンで動作することを想定してるのであれば、2.x or 3.xを選択する。2.xと3.xの間に実質差はないといわれている。
CDNの種類
jQuery UIとは
UI（ユーザーインターフェース）に特化したjQueryのライブラリで、カレンダー入力、アニメーション等のライブラリが提供されている。jQuery Migrateとは
jQueryのバージョンアップをサポートするプラグイン。古いバージョンで作成したソースを、最新バージョンにアップしたい場合、このプラグインを埋め込むことで使えるようになる。jQueryは基本的に、後方互換性を強く意識して作られている。古いのバージョンで作成したアプリであっても、最新のjQueryでも大抵は動作するようになっている。しかし、jQuery1.9を境に、大幅な改変が行われた過去がある。jQuery 1.9以前のバージョンで作成したソースは、1.9以上では動作しないことが多々発生している。Migrateとは移行という意味で、jQuery Migrateを利用すると、1.9の大幅改変時に削除されたメソッドであっても使えるようになる。
1.9以前のバージョンで作成したコードを、1.9にバージョンアップさせて、動作させたい場合は、コードを改修するのではなく、jQuery Migrateを組み込めば利用できるようになる。jQuery Colorとは
プラグインのひとつで背景色の色のバリエーションを増やすことができる。
QUnitとは
jQueryのテストを行うためのプラグイン。
PEPとは
マウスをドラックして、要素を動かす事ができるプラグイン。
ファイルの種類
下記、４種類のファイルが存在する。
uncompressed minified slim slim minified jquery-3.5.1.js jquery-3.5.1.min.js jquery-3.5.1.slim.js jquery-3.5.1.slim.min.js
uncompressed
開発で利用するバージョン。
minified
本番ではこれを使う。uncompressed版をminifyした版。minifyとは、少しでも軽くするために、uncompressed版から、インテンドとか改行とか取り除いて１行にしている。中身のソースは同じ。本番では少しでも高速にするためにこっちが使われる。開発途中で、ソースの中身も確認したい場合は、uncompressed版を使う。
slim
ajax、Effectの機能を除いて、より軽量にしたバージョン。
slim minified
slim版をminifyした版。
補足
JSをHTMLの中に記述するのではなく、別ファイルにする場合
<head>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" href="css/css.css">
</head>