【入門】jQueryの書き方　〜 jQueryとは？〜

2020.01.11
2022.05.04
jQuery

みなさんこんにちは、さくちゃんです。
本日から、初めてjQueryを学ぶ方向けに「jQueryの書き方」について、解説していきます。
本日学ぶ内容は、以下の３つです。

公式サイトの確認
jQueryとは？
基本的な書き方

では早速やっていきましょう！

1. 【jQueryの書き方】jQueryとは？
2. まとめ

【jQueryの書き方】jQueryとは？

公式サイトの確認

まずは公式サイトの確認をしていきます。
公式サイトはこちらになります。

公式サイトでは「Documentation」が確認でき、それぞれの使い方について記載されているので、都度確認しながら書いていくといいかと思います。

jQueryとは？

次にjQueryについて解説していきます。
Wiki先生では、このように解説されています。

jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。
https://ja.wikipedia.org/wiki/JQuery

前に紹介したCSSのデザインテンプレート「Bootstrap」の、JavaScript版だと思えばいいです。これが「jQuery」です。

では実際に、基本的な「jQueryの書き方」について見ていきます。

基本的な書き方

次に「jQueryの基本的な書き方」について解説いていきます。
まずはHTMLを書いていきます。書き方は下のように書いていきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
  </head>
      <body> 
      <script>
      
      </script>
      </body>
</html>

HTMLが書けたら、次にjQueryを書いていきます。
jQueryを書くときは、jQueryファイルを読み込む必要があります。

jQueryファイルを読み込む方法には、「ダウンロードして読み込む方法」と「直接jQueryファイルを指定して読み込む方法」の2種類あります。
ではそれぞれについて解説していきます。

✅ ダウンロードして読み込む方法

１.　公式サイトの「Download」をクリックします。

２.　ダウンロードページに移動するので、その中の「Download the compressed, production jQuery 3.4.1」を右クリックして、メニューを表示させます。

※そのままクリックしてしまうと、下のようなページに移動するので、注意です。

３.　メニューを表示させたら、「リンク先を別名で保存」をクリックし、jQueryファイルをHTMLファイルが保存されているフォルダに保存します。
今回は「HTMLフォルダ」の中に「jsフォルダ」を作成し、その中に保存します。

４.　保存ができたら、HTMLでjQueryファイルを呼び出します。
先ほどのHTMLに下の記述を追記します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="js/jquery-3.4.1.min.js"></script>
  </head>
      <body>
      <script>
      </script>
      </body>
</html>

✅ 直接jQueryファイルを指定して読み込む方法

「直接jQueryファイルを指定して読み込む方法」は「ダウンロードして読み込む方法」とは違い、手間がかかりません。
下記のコードをHTMLに記述するだけでOKです。

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

記述する場所は<head>タグの中か、<body>タグの中に記述していきます。
ここで注意するべき点は、<head>タグに記述するときは大丈夫なのですが、<body>タグに記述するときは、jQueryファイルのコードの下に、jQueryコードを書いていかなければなりません。それより上に書いてしますと、うまく読み込まれません。

//<head>タグに記述する場合

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script> 
  </head>
      <body>
       <script>
       </script>
      </body>
</html>

//<body>タグに記述する場合

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
  </head>
      <body>
　　　　　 　//ここにjQueryのコードは書かない！
         <script src="https://code.jquery.com/jquery-3.4.1.js"></script> 
         
         <script>          
           //ここにjQueryのコードを書く
         </script>
      </body>
</html>

これで「直接jQueryファイルを指定して読み込む方法」は終了です。

まとめ

本日は、「公式サイトの確認」「jQueryとは？」「基本的な書き方」について解説してきました。
次回から実際にjQueryのコードについて解説していきます。

では本日は以上になります。

オススメの教材

前の記事
【CSSの書き方】メディアクエリの使い方 2020.01.06
次の記事
【入門】jQueryの書き方　〜 jQueryの基本〜 2020.01.25