JavaScript
html
javascript
jQuery
programming

jQueryを書いてみよう！使い方の基礎を解説！

2021/10/25

( 更新日：2022/05/17 )

JavaScriptを人間がより直感的に使用できるようにできているjQueryはJavaScriptに比べて便利な反面、前準備や独特な記法があるのでまずはそれをおぼえなければなりません。

なので、この記事ではそれらを分かりやすく解説していきます。

読み終わるころには、それらを理解して自分で記述できるようになりますので、jQueryの基本的な使い方をおぼえてWebサイト作成のランクをあげていきましょう。

JavaScriptとjQueryの導入方法の違い

JavaScript

まずはJavaScriptですが、下図のようなファイル構成で読み込めます。

大元のフォルダ内に、HTMLファイルとJSフォルダ、CSSフォルダが格納されています。そして、index.htmlフォルダ内に下記のように記述したとします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/style.css" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <h1>jQueryの練習</h1>
      <p>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      </p>
    </div>
    <script src="js/script.js"></script>
  </body>
</html>

このとき、JavaScriptを読み込んでいる位置はbodyタグと閉じる直前です。これは、HTMLをすべて読み込んでから実行するためにこの方法で記述します。

jQuery

jQueryは、JavaScriptのフォルダ構成に加え、jQuery専用のファイルも読み込む必要があります。

方法としては、ファイルをダウンロードして、scriptタグで読み込む方法と、URLを指定してネット経由で読み込む方法の２パターンがあります。

今回はネット経由で読み込んでみましょう。

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

上記のコードを、先ほどのscript.jsファイルと合わせてheadタグ内に記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="./js/script.js"></script>
    <title>Document</title>
  </head>

  <body>
    <div>
      <h1>jQueryの練習</h1>
      <p>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      </p>
    </div>
  </body>
</html>

このように記述することでjQueryの読み込みは完了していることになります。

注意点ですが、コードを記述するscript.jsより前にjQueryのファイルを読み込むコードを記述するようにしてください。そうしないと正常に動作しません。

今回はネットワーク経由で読み込みましたが、興味があればファイルをダウンロードして読み込む方法も試してみてください。

JavaScriptはbodyタグを閉じる直前にscriptタグを記述していましたが、jQueryに関してはheadタグに記述しました。これにはわけがありますが次の項目でご紹介したいと思います。

実はJavaScriptでもheadタグ内に書いて正常に読み込ませる方法はありますので、そちらも調べてみると知識が深まって良いかと思います。

jQueryのコードを記述する

では、script.jsファイル内にコードを記述していきますが、最初に記述する必要があるコードがあるのでご紹介します。

$(function () {});

それがこの記述になります。このコードの{}の中に実際処理したいコードを記述していくことになります。

これを記述する意味は、htmlを読み込んだ後にこの中に記述してあるコードを実行してねという指示をコンピュータに出しています。

つまり、bodyタグを閉じる直前にJavaScriptを読み込んでいたのと同じような意味になるということです。

この記述が無かった場合、Webサイトの情報を読み込む前に実行してしまうので、例えばh1タグの色を変えようと思ってもh1タグを読み込めていないので処理できないといった事態になってしまいます。

試しにコードを記述してみましょう。

jQueryで処理を行う

では、まず始めにh1タグの中に記述された文字列『jQueryの練習』の色を変えてみましょう。

$(function () {
  $('h1').css('color', 'red');
});

このように記述します。まず、色を変えたい箇所を指定しますが、方法は、

$('セレクター');

のように書きます。今回はh1タグなので上記のような記述をしていますが、クラスを指定するなら

$('.クラス名');

と記述しますし、IDを指定するなら

$('#ID名');

と記述します。

cssを書くときと同じ書き方なので分かりやすいですね。

そして、h1タグに対してどのような動作を行うかを『.(ドット)』を用いてつないであげます。

そのあとで、

css('color', 'red');

と記述してます。

これの意味はそのままで、cssを変更しますよと宣言し、()の中で、colorをredにしてくださいと指示していることになります。

最後に『;(セミコロン)』を付けることでその行の記述が終了していることを表します。

このコードを書いた結果が下図になります。

CSSを適用しているので中央揃えになってますが、h1の色が変更しているのはこれまでの手順をコピペするだけで確認できるかと思います。

以上が基本的なjQueryの記述方法になります。

今回のcss()というような、なにか動作を指示するものをメソッドと言いますが、他にも様々なメソッドを組み合わせる事で複雑な動きを実現することが可能となっています。

画像のスライドアニメーションなどもJavaScriptやjQueryを使用して実装されていますので、動画や書籍などで学んでみてください。

まとめ

いかがでしたでしょうか。今回の記事は、とりあえずjQueryを動作させてみるということに特化した構成になっているので、scriptタグを記述する場所など、解説し始めると混乱しそうな部分を省いて書きました。そのため疑問が多く生まれることもあるかと思います。まずは入門編としてこの記事を活用していただき、より深い知識を学ぶための足がかりとしていただけたら嬉しいです。

その後は自分に合った方法で学習をすすめて理解を深めてみてください。