jQueryの導入方法と、導入後の確認方法

jQuery

こんにちは、ゆんつです。

Webサイトを作るにはHTMLとCSSが必要になります。

そのHTMLとCSSで作ったWebサイトに、HTMLやCSSだけでは実現出来ないような動きを付けたり色々な仕掛けをするためには「jQuery」が良く使われています。

jQueryは「JavaScript」を簡単に扱えるようにしたもので、僕のようなプログラミングの初心者でも少し勉強するだけで、数行のコードを書くだけで動きのあるページを実現することが出来て便利です。

例えば、以下のボタンを押すことで起きる仕掛けもjQueryで作ることができます。

See the Pen
jquery
by konpure (@yuntu)
on CodePen.

今日は

jQueryの導入方法と導入後の確認方法

について書きたいと思います。

jQueryの導入方法

jQueryの導入方法は

  • 外部からファイルを読み込む方法
  • jQueryのファイルをダウンロードし、そのファイルを読み込む方法

の2種類の方法があります。

外部からファイルを読み込む方法

とても手軽で簡単な方法です。

headタグの中、又は</body>タグの直前に、以下のコードを貼り付けるだけです。

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 

たった、これだけでjQueryの導入は完了です。

例)head要素内に書く場合

 
    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
</body>
</html>
 

例)</body>の直前に書く場合

 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JQuery</title>
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>
 

ファイルをダウンロードしなくても、URLをHTMLにコピペするだけで外部からjQueryが読み込まれてすぐに使い始めることができます。

ちなみに、jQueryを利用するためのURLは以下のリンク先で確認できます。

Hosted Libraries  |  Google Developers
A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries.
ゆんつ
ゆんつ

とても手軽に導入できますが、外部から読み込んでいるため

オフラインの状態ではjQueryが機能しません!

jQueryのファイルをダウンロードしてそのファイルを読み込む方法

jQueryの公式サイトのダウンロードページに行きます。

Download jQuery | jQuery
jQuery: The Write Less, Do More, JavaScript Library

すると「Download the compressed, production jQuery 3.6.0」というリンクがあります(※3.6.0という部分はバージョンアップにより数字が変わることがあります)。

jQueryのダウンロードリンク

そのリンクを右クリックして出てきたメニューから「名前をつけてリンク先を保存」を選択し、jQueryファイルを任意の場所にダウンロードします。

jQueryのダウンロード

jQueryファイル

後は、外部のファイルを読み込むときと同様に、head要素内か</body>タグの手前でscriptタグの中でダウンロードしたjQueryのファイルを読み込んであげれば完了です。

 
<script src="jQueryファイルへのパス"></script>
 
ゆんつ
ゆんつ

外部から読み込むよりも導入にひと手間多くかかりますが、オフラインでもjQueryを利用することが出来ます

jQueryが読み込まれているかどうかのチェック

jQueryの導入は終わったものの、きちんとjQueryファイルが読み込まれているか不安な場合は、次の方法でjQueryが読み込まれているかどうかを確認することが出来ます。

Chromeを使っている場合

キーボードのF12をクリックして開発者ツールを開き「Source」をクリック。

jQueryが読み込まれている場合には、ツリーの一覧に読み込まれているjQueryが表示されます。

外部から読み込んでいる場合

「ajax.googleapis.com」に読み込まれているjQueryが表示されているはずです。

chromeの場合はsourceで導入出来ているか確認できる

ダウンロードしたjQueryを読み込んでいる場合

jQueryを設置した場所に、読み込まれているjQueryファイルが表示されるはずです。

chromeの場合はsourceで導入出来ているか確認できる

FireFoxを使っている場合

キーボードのF12をクリックして開発者ツールを開き「デバッガ―」を選択。

jQueryが読み込まれている場合には、ツリーの一覧に読み込まれているjQueryが表示されます。

外部から読み込んでいる場合

「ajax.googleapis.com」に読み込まれているjQueryが表示されているはずです。

FireFoxの場合にはデバッガーで導入の確認が出来る

ダウンロードしたjQueryを読み込んでいる場合

jQueryを設置した場所に、読み込まれているjQueryファイルが表示されるはずです。

FireFoxの場合にはデバッガーで導入の確認が出来る

用途に合わせて使い分けてください

以上のように、jQueryの導入には

・外部からファイルを読み込む方法(オフラインではjQueryが機能しない)

・jQueryのファイルをダウンロードし、そのファイルを読み込む方法(オフラインでもjQueryが機能する)

の2の方法があります。

ご自身の都合に合う方法で、jQueryを導入して使ってください。

それでは、またー。

コメント