カテゴリ jquery

当サイトはアフィリエイト広告を使用しています

【jQuery入門】jQueryの基礎と導入方法

ページに動きを付けるのに便利なjQueryを紹介します。

今までの記事で紹介したHTMLとCSSを用いたコーディングで、動きのない静的なWEBページを作る事は出来ました。

この記事からはjQueryを使って、動きのあるWEBページを作っていきます！

HTML入門編とCSS入門編をまだご覧になっていない方はぜひ先にご覧ください！

JavaScriptでWEBページを動的に書き換える

今までの記事で紹介したHTMLとCSSを用いたコーディングで、動きのない静的なWEBページを作る事は出来ました。

ボタンをクリックしたら何等かの要素を動かしたり、ウィンドウのスクロールによって表示を変化させたりする動的なページを構築するには、JavaScriptを用います。

ですが、JavaScriptをコーディングしていくのはHTML、CSSのコーディングより一段と難しくなります。

特にプログラミングの経験のない方は尚更です。

次の例を見てみましょう。

以下のファイル構成でscript.jsに記述したJavaScriptから、HTML要素を操作してみます。

sample/
  ├ index.html
  └ js/
     └ script.js

index.htmlファイルをエディタで開き、JavaScriptを読込むように<head>要素内に<script>要素を記述します。※defer属性を付けるのを忘れずに！

また、JavaScript側から操作する要素(<div id="box">)も追加しておきます。

<html>
  <head>
    <script src="./js/script.js" defer></script>  </head>
  <body>
    <div id="box"></div>  </body>
</html>

次にscript.jsをエディタで開き、次の記述をします。

const box = document.getElementById("box");
box.textContent = "Hello, world!";

index.htmlファイルをブラウザで開くと、次のテキストが表示されます。

Hello, world!

index.htmlファイルを開いた際、要素の読み込み後に、<script>で指定したscript.jsが実行されます。

スクリプトの処理内容は、<div id="box">要素の取得と、取得した要素のテキストの変更をしているだけですが、これだけでもまあまあ長めな記述をする必要があります。

複雑な動きを実装しようとすると、かなり大変になりそうな予感がしますね。

jQueryを使ってみる

要素の取得、取得した要素の操作だけなのに、そこそこ長いスクリプトを書かなければならず、分かりづらく面倒な上、タイプミスすることもあります。

そこで登場したのがjQueryです。jQueryを用いると簡潔にスクリプトを記述できます。

同じ処理をjQueryで書いてみましょう。

先程のscript.jsファイルを以下のように書き換えます。

$("#box").text("Hello, world!");

$("#box")の部分で<div id="box">要素の取得、.text("Hello, world!");の部分でテキストを変更する処理となります。

スクリプトが短くなったのも良い事ですが、$("#box")の部分を見てピンと来るでしょうか？

jQueryの要素の取得では、CSSとほぼ同じセレクターを使うことができる、優しい設計になっています。

但し、このjQueryの構文は通常のJavaScriptの構文とは異なり、このまま$("#box) ..."と記述しても、ブラウザは解釈できず、動作しません。

jQueryの構文を使えるようにするためにはjQueryライブラリを読込む必要があります。

jQueryライブラリを読込む

jQueryライブラリもJavaScriptで記述されており、<script>要素で読み込むことで、jQuery構文を使えるようになります。

jQueryライブラリの.jsファイルをダウンロードしてindex.htmlから読込むようにする事ができますが、今回はCDNを使用します。

※CDN(Content Delivery Network)...インターネット経由でファイルを配信する仕組み

CDNを使用すると、プロジェクト内でjQueryライブラリの入っている.jsファイルを自前で用意せずに、CDNからjQueryライブラリを読込めるようになります。

まずはhttps://releases.jquery.com/を開きます。

バージョン選択

上から新しいバージョンの順に並んでおり、更にuncompressed, minified, slim, slim minifiedとあります。

ここでは最新版のminifiedを選択するのが良いでしょう。

※ちなみにuncompressed等は下記のようになっています

  • uncompressed ... 通常バージョン
  • minified ... 改行や余分なスペース等の無い圧縮されたバージョン
  • slim ... ajax、effectsの無いバージョン
  • slim minified ... slimの圧縮バージョン

任意のjQueryを選択すると、次のようなウィンドウが表示されるので、コピーするアイコンをクリックして、コードをコピーします。

スクリプトのコピー

index.htmlをエディタで開き、<head>内に先ほどコピーした<script>を追加しましょう。

<head>
  ...
  <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>  <script src="./js/script.js" defer></script>
  ...
</head>

ここで、自前のjQuery構文を使用するスクリプトよりも、jQueryライブラリを読込むスクリプトを上に記述することがポイントです。

.htmlファイルの読込において、上に記述している要素から読込されるので、先に自前のjQuery構文を使用するスクリプトを読込みしても、まだjQueryの構文をブラウザが認識できないためです。

更に、こちらもdefer属性を付けてあげましょう。

<head>
  ...
  <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous" defer></script>  <script src="./js/script.js" defer></script>
  ...
</head>

これでjQueryの構文を使えるようになりした。

index.htmlをブラウザで開いて、"Hello, world!"と表示されれば成功です！

jQueryの基本的な構文

jQueryでは、基本的に次のような構文で要素に対する処理を記述できます。

$("セレクタ").メソッド(引数);

$("")のダブルクォーテーション内で、CSSのセレクタと同じ要領で要素を指定し、取得します。

その後に続く.メソッド(引数)で取得した要素に対する処理を記述します。

引数の部分はメソッドに使用するパラメータを指定します。(引数の無いものもあります)

任意のタイミングで実行する

<script>要素でsrc属性に指定したスクリプトは、HTMLの読込の時点で実行されます。(defer属性が付いているものはHTML要素の読込後、記述順に実行されます)

つまり、先程のスクリプトはページを読込終了した時点で実行され、その時点から文字が表示されている状態となります。

WEBページを作成する際は、ボタンをクリックした時や、要素にカーソルをかざした時などの、任意のタイミングで処理を実行したい場合がほとんどです。

例えば、btnというIDを持つ要素をクリックした時に何らかの処理を実行させたい時は次のようにします。

$("#btn").click(function(){
  // この中括弧内に実行したい処理を記述
});

$("#btn")でbtnIDの要素を取得し、.click()メソッドを実行し、引数として、クリックしたときに実行させたい処理を記述した関数(function(){ })を渡しています。

※関数 ... 何らかの処理の塊

ここまでを組合せて、btnIDの要素をクリックしたら、boxIDの要素のテキストを変化させるような処理を記述してみましょう。

まずはindex.htmlにて<body>内にボタンを追加します。

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous" defer></script>
    <script src="./js/script.js" defer></script>
  </head>
  <body>    <button id="btn">click！！</button>
    <div id="box"></div>
  </body>
</html>

script.jsを開き、以下のようにスクリプトを書き換えます。

$("#btn").click(function(){
  $("#box").text("Hello, world!");
});

これでindex.htmlをブラウザで開き、動作を見て見ましょう。

jQueryテスト

ちゃんとボタンをクリックした時にテキストが表示されていますね！

まとめ

まとめると、jQueryの基本は次のようになります。

  • $(セレクタ)で、HTML要素を取得する
  • $(セレクタ).メソッド()でメソッドを実行し、取得した要素に対する操作をする
  • 必要に応じて$(セレクタ).click(function(){ })等で、イベントを指定して上記処理を実行させる

次回以降、メソッドの種類や、イベントの種類について詳しく紹介していきます！






次の記事
セレクタで要素を取得する方法について紹介します！