HTMLにjQueryの動作環境を作る


## 手順
### 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>
```