「jQuery」は、
「Javascript」のライブラリーの１つで、
「Javascript」なしには機能できない。

「jQuery」は、ライブラリーの１つだが、
とても便利な機能が多く、
記述も独自の書式が多いので、
もう一つの言語のように思われることも多い。

実際には、「jQuery」のファイルをダウンロードしてきて、
サーバー上に「Javascript」の外部ファイルとしてアップロードして、
「HTML」ファイルに、「Javascript」の外部ファイルとしてリンクさせることで、
「jQuery」を利用することができる。

もう一つ使用する方法があり、
サーバー上に公開されている「CDN」と呼ばれる「jQuery」ファイルにリンクさせて「jQuery」を利用することもできる。

「jQuery」を利用するメリットは、
・多様な便利な機能が用意されている
・各ブラウザなどの個別の対応などをすでにしてくれている
というところ。
それぞれの動作確認などもをしなくても、
すでに行ってくれているのがありがたい。

Back

「jQuery」の使い方

「jQuery」は、
・「jQuery」が公開している「jQuery」ファイルをダウンロードして使う
・直接「jQuery」公式Web上のファイルにリンクをはる
の２つの利用方法がある。

「jQuery」が公開している「jQuery」ファイルをダウンロードして使う方法

・「jQuery」公式Webからダウンロードする
・「jQuery」ファイルをWebにアップロード
・HTMLファイルのヘッダータグの間に、「javascript（jQuery）」へのリンク作る

「jQuery」が公開しているファイルアドレスにリンクを張る方法

「jQuery」が公開しているファイル「CDN」を利用するには、
ただ、「jQuery」が公開しているファイルアドレスにリンクを張るだけで済む。
HTMLファイルのヘッダータグの間に、「<script>」タグを使って、

「jQuery」の公式Web上にある「javascript（jQuery）」ファイルへのリンク作る。

「jQuery」が使える「CDN」は、
・jQueryのCDN
・GoogleのCDN
・MicrosoftのCDN
など。

「min.js」とは

通常の拡張子は、「ファイル名.js」だが、「ファイル名.min.js」は、「圧縮版（minified）」という意味。
改行・コメント・インデントなどが、すべて削除され、ファイル容量をできる限り小さくしてもので、読み込み時間の短縮・高速化をしてあるファイル。
プログラムコードは同じ。

Back

「jQuery」のダウンロード

「jQuery」は、OfficialWebからダウンロードができます。
「jQuery」のOfficialWeb「https://jquery.com/」

ダウンロードの選択肢には、
・「Download the compressed, production jQuery バージョン」＝改行・スペースなし（高速処理）
・「Download the uncompressed, development jQuery バージョン」＝改行・スペースあり（開発向き）
の２つがあるが、両方ともダウンロードしておいても良い。
リンクをクリックすると、「jQuery」のコードだけがシンプルに表示されるページに移行するので、
自分で「名前を付けて保存」をする。

ファイル名の後ろにある拡張子が、
・「js」
・「min.js」
で分かれているが、
「min.js」は、
「圧縮版（minified）」という意味。
改行・コメント・インデントなどが、すべて削除され、
ファイル容量をできる限り小さくしてもので、
読み込み時間の短縮・高速化をしてあるファイル。
プログラムコードは同じ。
「Download the compressed, production jQuery バージョン」は、「min.js」。

「js」は、
読みやすいように、
改行・コメント・インデントなどを使って編集されている。
「Download the uncompressed, development jQuery バージョン」は「js」。

「jQuery」をダウンロードする流れ

「「jQuery」のOfficialWeb」にアクセスする
↓
「Download」を選択。
↓
[ 「Download the compressed, production jQuery バージョン」＝改行・スペースなし（高速処理）
「Download the uncompressed, development jQuery バージョン」＝改行・スペースあり（開発向き）
のどちらかを選択すると、
それぞれのコードが記述されたページが開く。
↓
「別名で保存」を保存するを選択。
保存場所は、どこでも良いですが、
使用するときは、サーバーにアップロードして使います。
「jQuery」が公開しているファイル「CDN」へリンクを張ってを利用することもできるので、
その場合は、サーバー上にアップロードしなくても良い。

サーバー上の配置場所は、
「js」フォルダを最上位フォルダ内に作成して、その中に保存しておけば良い。
あとは「HTML」ファイルに、リンクを張れば「jQuery」が使える。

「HTML」ファイルのリンクコード

「jQuery」のテストコード

サーバー上にアップロードして、
リンクを張った後に、下記のコードを試してみると、
「jQuery」が機能しているか確認できる。

<html>
<head>
<script src="./jquery-3.4.1.min.js"></script>
<script>
$(function(){
alert('メッセージ');
});
</script>
</head>
<body>
</body>
</html>

Back

「jQuery」の「CDN」で使う方法

「CDN」は、
「Content Delivery Network」の略で、
インターネット上で、ファイルを配信し共有して使えるネットワークを意味している。

「jQuery」も「CDN」を使用することで、
ファイルをダウンロードすることなく、
使用することが可能になります。

「jQuery」の「CDN」を使うメリット

・ファイルのダウンロード・アップロードの手間が不要
・URLをscriptタグに記述するだけなので手軽に利用できる
・ブラウザにキャッシュされるので高速に読み込める

「jQuery」の「CDN」を使うデメリット

・SSLの対応状況によっては利用できない場合がある
・配信が停止されると当然ながら利用できない

「jQuery」の「CDN」を確認・取得できる場所

・https://code.jquery.com/
・Google CDN
・Microsoft CDN
・CDNJS CDN
・jsDelivr CDN

「jQuery」の「CDN」を使うためのサンプルコード

<html>
<head>
<script src="サーバー上の「jQuery」ファイルへのURL"></script>
<script src="./jquery-3.4.1.min.js"></script>

<script src="「jQuery」の「CDN」へのURL"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<script>
$(function(){
alert('Hello jQuery!!');
});
</script>
</head>
<body>
</body>
</html>

Back