初心者向け!jqueryのダウンロード方法。できない理由も解説

今回は、javascriptのライブラリであるjqueryをダウンロードする方法を解説します。クリックするだけだとダウンロードできないので、その辺りを丁寧に説明します。

また、CDNを使う方法も紹介します。それでは早速説明を進めましょう。

目次

  1. jqueryをダウンロードする方法
  2. jqueryをCDNで利用する方法

1.jqueryをダウンロードする方法

jqueryのダウンロードは、jqueryのホームページからダウンロードできます。

まずはこちらのリンクでトップページにいきます。

jquery トップページ

Download jQueryからダウンロードページに飛びます。

jqueryには、compressed(圧縮版)とuncompressed(圧縮されてない版)の2種類があります。違いは、改行や空白が取り除かれているかどうかです。

エラー箇所の特定やデバッグのため、開発時にはuncompressedのファイルを、改行や空白が取り除かれて軽いため、本番環境ではcompressedのファイルを使うのが一般的です。

また下の方に、slim buildというものがあります。こちらはajaxやeffectといったモジュールを取り除いたjQueryです。もし非同期通信やアニメーションをjQueryで扱わない場合はslimを使う方が軽いです。

今回は、compressedを使用します。

画像のリンクを右クリックしてください。左クリックだとソースに飛んでしまってダウンロードできません。

それから、右クリックメニューのリンク先を別名で保存をクリックします。

ウィンドウが出るので保存をクリックすればダウンロード完了です。

これでダウンロード方法の解説は終わりです。

2.jqueryをCDNで利用する方法

jqueryはダウンロードしなくても、CDN(コンテントデリバリーネットワーク)という仕組みを使うことで利用可能です。

jqueryのCDNは、以下のサイトでコードをゲットできます。

jQuery CDN

こちらでは、以下の4種類が用意されていますが意味は先ほどと変わらず以下のような意味です。

  • uncompressed (圧縮していない版、エラー特定・デバックがしやすい)
  • minified (改行や空白を取り除いた圧縮版、軽量で本番環境向き)
  • slim (非同期通信やアニメーションのモジュールを取り除いたもの)
  • slim minified (slimの改行や空白を取り除いた圧縮版)

今回は、minifiedを使います。minifiedをクリックしてください。

出てきたウィンドウから、コードをコピーします。

コピーしたコードは、htmlファイルのbodyタグに貼り付けると使えるようになります。

<!DOCTYPE html>
<html lang='en'>
<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>
</head>
<body>

  <!-- ここにコピー -->
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
</body>
</html>

これでjqueryが使えるようになります。

以上で解説は終わりです。ダウンロードやCDNで早速jqueryを使ってみましょう。