CSSでもアニメーションなどの動きを付けることが出来ますが、JavaScriptというプログラミング言語を使うとよりカッコいいアニメーションを実装することが出来たり、診断ツールなどを作る事も出来ます。
そしてJavaScriptのライブラリ、要するにJavaScriptでよく使う物をまとめて簡単に使えるようにした物がjQueryとなります。
今回はこのjQueryを使えるようにする準備について説明していきます。
jQuery本体のファイルを読み込む
jQueryを使うにはまず本体のファイルを読み込まないといけません。
そして読み込む方法は2つあります。
- ファイルをダウンロードして読み込む
- CDNで読み込む
どちらでも大丈夫なので、両方のやり方を見てみたいと思います（一般的にはCDNの方が主流かと思います）
ファイルをダウンロードして読み込む方法
まず以下のjQueryのホームページにアクセスし、ファイルをダウンロードします。
2020年5月現在の最新は「Download the compressed, production jQuery 3.5.0」となります（右クリックして「名前を付けてリンク先を保存」をクリックすれば保存できます）
3.5.0がいくつもあるので迷いますが、productionは圧縮されたもので、developmentは非圧縮の物となります。
productionの方がファイルサイズは小さいので読み込みが速いです。
developmentの方はファイルサイズは大きいですが、ファイルの中身は見やすいです。
特に編集する予定でもない限り圧縮されたproductionを使えばOKです。
そしてこれをheadタグ内で読み込みます（index.htmlと同じ階層にあるjsフォルダにファイルがあるとします。）
<head>
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery-3.5.1.min.js"></script>
</head>ここで注意点が1つあり、CSSはjsより先に読み込む方がいいという事です。
理由としてはjsはファイルを読み込むまでページの読み込みを停止してしまうからです。
その点CSSはページの読み込みやjsの読み込みを並行して行うので、ページの読み込み速度も速くなります。
これで準備は整ったので後でプラグインや自作のjsファイルを読み込みますが、これはbodyの閉じタグ直前に書いた方がページの表示速度を速くする事が出来ます。
<head>
<link href="css/style.css" rel="stylesheet" />
<script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<main>中略</main>
<script src="js/main.js"></script>
</body>headタグ内に書いても動きますが、その際は必ずjQuery本体より後に書きましょう。
つまりheadタグでCSS ⇒ jQuery本体を読み込んだ後、body閉じタグ直前で外部ファイルを読み込むという形になります。
プラグインや自作のjsファイルなど、外部ファイルが増えると読み込む順番によっては動かなくなることもあるので、その場合は順番を変えてみると解決することもあります。
またjsファイルを作らずにHTMLに直接書くことも可能ですが、ファイルを作って読み込むのが一般的だと思いますのでここではHTMLでの書き方については割愛します。
CDNを使って読み込む方法
CDNを使うメリットとしては、ブラウザにキャッシュされることによってサイト表示の高速化が期待できるという点です。
ただしネット環境がない場所では動かないので、ネット環境がない場所で作業するときなどは注意が必要です。
そしてこのCDNを利用できるサイトはjQueryの公式サイト以外にもあり、今回は公式サイトより高速なサーバーらしいgoogleのCDNを使ってみたいと思います。
以下のサイトからこちらのコードをコピーして、先ほどと同じくheadタグ内に書きます。
<head>
<link href="css/style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/d3js/5.15.1/d3.min.js"></script>
</head>Hosted Libraries | Google Developers
ダウンロードしたファイルかCDNを使うかの違いなので、コードを書く場所などは一緒です。
今回は以上です。
実際にjQueryを使ったアニメーションなどを作ってみないと、ちゃんとjQueryが使えるようになったか分からないと思います。
次回はjQueryを使ったページ内リンクの作り方について書きたいと思いますので、この記事でjQuery本体の読み込み準備が出来たらそちらの記事で実際に使えるようになったか試してみるのもいいでしょう。