jQueryを書くための下準備

まずはじめにjQueryを書くための下準備にどういったものがあるのかまとめてリストアップしてみました。

HTMLの作成
HTMLにjQueryを読み込ませる

それでは次から各項目について触れていこうと思います。

HTMLの作成

そもそも動きのあるWebサイトを作成するために使われるJavaScriptのライブラリの1つがjQueryです。
そのため、動きをつけたいWebページが存在しなければ、jQueryを書くことができません。

まずはHTMLの作成を行います。

HTMLにjQueryを読み込ませる

次に作成したHTMLファイル上でjQueryを使えるようにするためにHTML内にjQuery.comからURLをコピーしてきて、headタグ内に埋め込みます。

jQueryを読み込ませるための方法はいくつかありますが、今回はheadタグまたはbody閉じタグ直前に直接URLを貼り付ける方法をまとめています。

jQuery.comを開く
画面右上あたりにあるDownload ボタンをクリック
CDNの中にあるhttps://code.jquery.comを開く
最新版のminified をクリック
scriptタグの中にあるsrchttps://code.jquery.com/jquery-3.4.1.min.js をコピー
headタグ内またはbody閉じタグ直前にペーストする

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>

</body>
</html>

scriptタグを挿入する位置に決まりはある？

特に決まりはないようですが、一般的にはheadタグ内に入れておくパターンとbody閉じタグの直前に埋め込むパターンの2パターンあるようです。

ドットインストールのjQuery入門＃02ではbodyタグの閉じタグの直前が一般的と説明していますし、実際のWebページのHTMLを見るとheadタグ内に埋め込まれているページも目にします。

body閉じタグ直前に埋め込むメリット

ページの読み込み速度が速い

HTMLは上から下へ読み込まれるため、JavaScriptで重い処理を行っていたとしてもbody閉じタグの直前で読み込みが行われていればページの読み込みが遅くなるリスクを回避することができるわけです。

headタグ内に埋め込むメリット

HTMLの解析よりも先にJavaScriptファイルを読み込める

HTMLを解析するよりも先にJavaScriptファイルを実行しなくてはならないケースがあり、そういったときはheadタグ内に埋め込む必要があります。
また、JavaScriptが軽い処理であればページの読み込み速度に影響してくる心配もありません。

まとめ

これでjQueryを書く前の下準備が終了しました。

自身が業務でjQueryを使用する際にHTMLに何を埋め込まなくちゃいけないんだっけ？
埋め込むsrcはどこに埋め込んだ方がいいんだっけ？
と、悩んだ際に確認するために記事にまとめてみました。

Scriptタグの埋め込み位置に関しては、適材適所のようなのでどちらが正しいというものでもないようです。

間違い等があればご指摘いただけると幸いです。

jQuery書く前の下準備