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

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

Webページを作るにはHTMLとCSSが必要になります。

そのHTMLとCSSで作ったWebページに、HTMLやCSSだけでは実現出来ないような動きを付けたり色々な仕掛けをするためにjQueryというプログラムが良く使われています。

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

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

今日はjQueryの導入方法について書きたいと思います。

2種類の導入方法
- 外部からファイルを読み込む方法
- jQueryのファイルをダウンロードしてそのファイルを読み込む方法
jQueryが読み込まれているかどうかのチェック
- Chromeを使っている場合
- FireFoxを使っている場合

2種類の導入方法

jQueryの導入方法は外部からファイルを読み込む方法と、jQueryのファイルをダウンロードし、そのファイルを読み込む方法の2種類の方法があります。

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

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

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

　
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/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.3.1/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.3.1/jquery.min.js"></script>
</body>
</html>

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

ゆんつ

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

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

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

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

https://jquery.com/download/

すると「Download the compressed, production jQuery 3.3.1」というリンクがあります。

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

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

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

ゆんつ

外部から読み込むよりも導入にひと手間多くかかりますが

オフラインでもjQueryを利用することが出来ます

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

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

Chromeを使っている場合

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

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

FireFoxを使っている場合

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

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

ちゃんとjQueryが読み込まれていることが確認出来たら、後はコードを書いて使うだけです。

ゆんつ

本日は以上です

それでは、またー。