手順

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>