3-02jQueryを使ってみよう

前回は JavaScript の基本を学び、簡単なゲームづくりにチャレンジしてみました。今回は jQuery というライブラリーを使って、JavaScript で Web デザインを操作する方法を勉強していきます。

ライブラリーとは

ライブラリーというのはプログラミング用語の 1 つで、複雑なプログラムを簡単に扱えるようにするためのプログラムの塊です。あらかじめ再利用しやすいプログラムをまとめてあるファイルから、使いたいプログラムを呼び出して実行します。

もともとライブラリーというのは「図書館」という意味です。みなさんも調べごとをしたりするときに図書館を利用したことがあると思います。現代のプログラミングでは、先人の方々がつくった沢山のライブラリーがあるおかげで、難しいコードをたくさん書かなくても、複雑なプログラムを簡単に実行できるようになってきています。

jQuery とは？

jQuery は JavaScript のライブラリーの中でも最も有名なものの 1 つです。一番最初に提供されたのは 2006 年なので、もう 10 年以上たくさんの人に使われているライブラリーです。JavaScript で Web デザインを操作するにはちょっとしたコツが必要で、そのコツを簡単にしてくれる機能が備わっています。

主な特徴

  • プレーンな状態で記述をすると非常にたくさんのコードを書かなければならないような内容をシンプルにまとめることができる
  • 非常に軽量（30KB）なファイルで提供が可能
  • ブラウザが違うことによって動作不良が起きないように補完をしてくれる（クロスブラウザー）

jQuery を導入する

それではさっそく jQuery を導入して試しに実行してみましょう。

サンプルファイルのダウンロード

サンプルファイルのダウンロードはこちら

今回配布したサンプルファイルには以下のようなものが入っています

  • 3-2_sample
    • index.html
    • assets
      • style.css
      • app.js

基本の使い方

まずは jQuery のファイルをサイトからダウンロードする必要があります。

こちらのサイトを開きましょう

jQueryを配布しているサイト

「Download jQuery」というボタンからダウンロードページを開きます。

jQueryのダウンロードページ

「Download the compressed, production jQuery 3.3.1」というリンクを右クリックして、リンク先を別名で保存しましょう。

ダウンロード方法

3-2_sample の assets フォルダ（style.css と同じ場所）に「jquery-3.3.1.min.js」という名前で保存しましょう。

続いて index.html を開いて、<head>内に<script src="assets/jquery-3.3.1.min.js"></script>を追加しましょう。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>3-2 jQueryを使ってみよう</title>
  <link rel="stylesheet" href="assets/style.css">
  <script src="assets/jquery-3.3.1.min.js"></script>
  <script src="assets/app.js"></script>
</head>

これで jQuery が読み込まれます。

あとは app.js に、jQuery から呼び出して実行したいプログラムを書いていきます。

実行タイミング

jQuery は Web ページを操作するためのライブラリーなので、Web ページ全体が読み込まれてから実行しなければなりません。なので利用する際には必ず実行のタイミングを指定する必要があります。app.js に以下の内容を記述します。

$(document).ready(function() {
  // 実行したい内容を記述
});

これが jQuery を利用する際に必ず記述しなければいけない内容です。これは省略した書き方もあります。

$(function(){
  // 実行したい内容を記述
});

こちらのほうがメジャーなので、カリキュラムではこの書き方で進めていきます。

jQuery で文字の色を変えてみよう

それでは簡単なコードを書いて、jQuery がちゃんと使えるか試してみましょう。

まずは index.html をブラウザで確認します。

この段階では「Hello,World!」という文字が表示されているだけです。

こちらのコードを app.js に貼り付けてください。

$(function() {
  $("h1").text("N高のみなさん、こんにちは！");
});

上書きしてブラウザで確認しましょう。

先程まで表示されていた「Hello,World!」が「N高のみなさん、こんにちは！」に変わっています。

さきほどのプログラムは以下のような意味のことが書かれていました。

このような感じで JavaScript によって HTML や CSS を書き換えたり追加することで、Web デザインを操作することができます。今はページが読み込まれたタイミングで実行していますが、ボタンをクリックしたりブラウザをスクロールしたタイミングで実行することもできます。

HTML の要素を指定する

さきほどのサンプルでは$(“h1")と記述することで<h1>タグを指定していました。jQuery ではこのように簡単に HTML を指定することができます。

いくつか指定の方法があるので紹介します。

タグ名で指定する

HTML のタグ名によって要素を指定します。例えば<p>タグを指定したいときは以下のように記述します。

$("p").text("こんにちは、N高のみなさん");

id で指定する

例えば<h1 id="logo">のように、id が名付けられている要素の場合は、id で要素を指定することができます。

$("#logo").text("こんにちは、N高のみなさん");

class で指定する

例えば<i class="icon">のように、class が名付けられている要素の場合は、class で要素を指定することができます。

$(".icon").text("こんにちは、N高のみなさん");

複数の指定

要素を複数指定したいときは「,（カンマ）」で区切ることで指定することができます。

$("div,p,span")

イベントを使いこなす

さきほどのサンプルではページを読み込んだあと、すぐにプログラムが実行されていました。jQuery ではユーザーがクリックをしたりスクロールをしたときにプログラムを実行する、「イベント」というものがあります。簡単なものをいくつか紹介したいと思います。

click イベント

マウスをクリックしたり、スマホでボタンをタップしたときにプログラムを実行するイベントです。

index.html に<button id="btn"></button>を追加します。

<body>
  <h1>Hello,World!</h1>
  <button id="btn">クリックして！</button>
</body>

app.js を以下のようにしてみましょう。

$(function() {
  $("#btn").click(function() {
    $("h1").text("N高へようこそ！");
  });
});

ボタンをクリックしたら以下のような動作になります。

クリックイベントのときも必ず冒頭にページ読み込みの$(function(){ 〜 })が必要です。

mousedown/mouseup イベント

マウスをクリックし、ボタンを押したとき（mousedown）と上げたとき（mouseup）にプログラムを実行するイベントです。

$(function() {
  $("#btn").mousedown(function() {
    $("h1").text("N高へようこそ！");
  });
  $("#btn").mouseup(function() {
    $("h1").text("Hello,World!");
  });
});

ボタンを押したときには「N高へようこそ！」、上げたときに「Hello,World!」に戻るようにしています。

scroll イベント

マウスをスクロールしたときにプログラムを実行するイベントです。

こちらのサンプルをダウンロードして編集していきます。

サンプルファイルのダウンロードはこちら

  • 3-2_scroll
    • scroll.html
    • assets
      • style.css
      • app.js
      • jquery-3.3.1.min.js

scroll.html を開きます。

0 という文字が真ん中に表示されています。スクロールしたらここにスクロールした高さが表示されるようにしてみましょう。

app.js に以下の内容を記述します。

$(function() {
  var scroll;
  $(window).scroll(function() {
    scroll = $(this).scrollTop();
    $("#scroll-position").text(scroll);
  });
});

スクロールするとこんな感じになります。

前回勉強した「var（変数）」が出てきました。この変数「scroll」にスクロールした高さが入るようにします。

$(window).scroll(function(){ 〜 })でスクロールのイベントを設定します。

$(window)はブラウザの画面全体を指定します。この場合はダブルクオーテーションがいりません。

そして$(this).scrollTop()でスクロールの値を取得します。thisというのは特別な変数で、イベント内で利用すると、イベントを起こす元となった要素を指定します。この場合は$(window)を指定しています。

.scrollTop()はスクロールの高さを数値で取得します。取得した数値は変数 scroll の中にしまいます。

.text()は、指定した要素のテキストを書き換えることができます。$("scroll-position")の中身を変数 scroll に入ってきた数値の内容に書き換えています。

今回は数値を書き換えるだけでしたが、スクロールの値が取得できると、パララックス効果という動きのあるデザインのサイトが作れたりします。

視差効果（パララックス）| 縦長の web デザインギャラリー・サイトリンク集｜ MUUUUU.ORG

HTML と CSS を操作する

それではここから「要素の指定」と「イベントの実行」を活用して、JavaScript で Web ページのデザインを操作してみましょう。

ここからは 3-2_sample の index.html と app.js を編集していきます。

文字色の変更

ボタンをクリックしたら文字の色が変わるようにしてみましょう。

こちらのコードを試しに app.js に貼ってブラウザで確認します。

$(function() {
  $("#btn").click(function() {
    $("h1").css("color", "#ff0000");
  });
});

文字の色を変えるには、JavaScript で CSS を追加してあげます。要素を指定し、そのあとに.cssと書いて("color","#ffoooo")と指定すると CSS が書き加えられます。CSS のプロパティと値をダブルクオーテーションで囲い、カンマで区切って指定するのだけ間違えないようにしましょう。

背景色の変更

次にボタンをクリックしたらページ全体の背景色が変わるようにしてみましょう。

こちらのコードを試しに app.js に貼ってブラウザで確認します。

$(function() {
  $("#btn").click(function() {
    $("body").css("background", "#ffff00");
  });
});

color を変更したのと同じように、background を変更してみました。このように CSS を簡単に変更することができます。

CSS を複数変更する

jQuery では CSS のプロパティを同時に複数指定して変更することも可能です。

$(function() {
  $("#btn").click(function() {
    $("body").css({
      "color": "red",
      "background": "yellow"
    });
  });
});

この書き方、どこかで見た覚えはありませんか？実は前回やった「連想配列」です。

.cssに続いて{}で CSS のプロパティと値を,区切りで指定します。

テキストを変更して、CSS も変更する

複数指定できるのは CSS のプロパティだけではありません。.text()と.css()はつなげることができます。

$(function() {
  $("#btn").click(function() {
    $("h1").text("ようこそ、N高のみなさん").css("color","red");
  });
});

上のサンプルでは一行にまとめてしまいましたが、コードを読みやすくするために改行することもできます。

$(function() {
  $("#btn").click(function() {
    $("h1")
      .text("ようこそ、N高のみなさん")
      .css("color", "red");
  });
});

このように複数のメソッドをつなげることをメソッドチェーンと言います。

おみくじを作ろう

それではここまで勉強したことを元に、おみくじのゲームを作ってみたいと思います。

ファイルの作成

まずはフォルダとファイルを作成しましょう。

  • omikuji（フォルダ）
    • omikuji.html
    • assets（フォルダ）
      • omikuji.css
      • omikuji.js

assets フォルダには jQuery ファイルを設置します。

CSS と JavaScript の読み込み

omikuji.html に HTML の雛形を作りましょう。html:5と打ち込んで Tab キーを押します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
</html>

次に CSS と JavaScript を読み込みます。

  <link rel="stylesheet" href="assets/omikuji.css">
  <script src="assets/jquery-3.3.1.min.js"></script>
  <script src="assets/omikuji.js"></script>

HTML と CSS で最初の画面を作成

omikuji.html に以下の内容を記述しましょう。

<body>
  <p>ボタンを押して、おみくじを引いてね！</p>
  <p>
    <input type="button" id="omikujiBtn" value="おみくじを引く">
  </p>
  <p>結果は…？</p>
  <div id="omikujiResult">
  </div>
</body>

omikuji.css には以下の内容を記述します。

body {
  text-align: center;
}
.omikujiResultInner {
  width: 300px;
  height: 300px;
  margin: auto;
  line-height: 300px;
  font-size: 100px;
  font-weight: bold;
  background: yellow;
}

まずはおみくじの基本の動きを JavaScript で記述

いよいよここから JavaScript＆jQuery の出番です。以下の内容を記述します。

var omikujiResult = [
  "大吉",
  "中吉",
  "小吉",
  "凶" 
];
$(function() {
  $("#omikujiBtn").click(function() {
    var result = omikujiResult[Math.floor( Math.random() * omikujiResult.length)];
    $("#omikujiResult").html("<div class='omikujiResultInner'>" + result + "</div>");
  });
});
  • 変数「omikujiResult」は配列でおみくじの結果をしまっています。
  • omikujiBtn という id が設定されたボタンをクリックするとイベントが発生するようにします。
  • Math.random()というのは乱数と呼ばれるものを呼び出す関数です。
  • Math.floor()というのはカッコの中に入っている数値の小数点以下を切り捨てて整数にする関数です。
  • omikujiResult.length は omikujiResult の配列の中に何個の要素が入っているかを結果として返しています。
  • この場合、omikujiResult.length の結果は 4 です。
  • Math.floor(Math.random()*4) とすると 0〜3 の中からランダムに 1 つが結果として返ってきます。
  • ランダムに出た数字が「0」だったとすると、変数 result の中には omikujiResult[0]、つまり「大吉」が入ってきます。
  • 最後に HTML の<div id="omikujiResult"></div>の中身に result の内容を埋め込んで書き換えています。

うまくこれが動くとこのようになります。

画像とアニメーションを追加する

ただ文字で結果がでるだけでは少しさびしいので、画像やアニメーションを追加していきましょう。

おみくじのイラストを用意したので、こちらからダウンロードして assets フォルダ内に置いてください。

サンプルファイルのダウンロードはこちら

画像を omikuji.html 内に設置します。

  <div id="omikujiResult">
    <img id="omikujiImg" src="assets/omikuji.png">
  </div>

CSS と JavaScript を使って、おみくじをブルブル振ったあとに、ひっくり返すと結果が表示される、という演出を作ってみたいと思います。

まずは CSS です。以下の内容を記述します。

#omikujiImg {
  transition: 1000ms;
}
.buruburu {
  text-align: center;
  animation: buruburu-animation .1s infinite;
}
@keyframes buruburu-animation {
  0% {transform: translate(0px, 0px)}
  25% {transform: translate(10px, 10px)}
  50% {transform: translate(0px, 10px)}
  75% {transform: translate(10px, 0px)}
  100% {transform: translate(0px, 0px)}
}
.rotate {
  transform: rotate(-180deg);
}

次に JavaScript です。以下の内容を記述します。

$(function() {
  $("#omikujiBtn").click(function() {
    // おみくじを振る
    $("#omikujiImg").addClass("buruburu");
    // ブルブルを止める
    setTimeout(function() {
      $("#omikujiImg").removeClass("buruburu");
    }, 1500);
    // おみくじをひっくり返す
    setTimeout(function() {
      $("#omikujiImg").addClass("rotate");
    }, 3000);
    // 結果が表示される
    setTimeout(function() {
      var result = omikujiResult[Math.floor( Math.random() * omikujiResult.length)];
      $("#omikujiResult").html("<div class='omikujiResultInner'>" + result + "</div>");
    }, 5000);
    // リセットする
    setTimeout(function() {
      $("#omikujiResult").html("<img id='omikujiImg' src='assets/omikuji.png'>");
    }, 8000);
  });
});

setTimeout()という新しい関数が出てきました。これは ◯ 秒後に〜〜する…というようなことができる関数です。例えば 3 秒後にアラートを表示する、ということをやりたいときはこのような記述をします。

setTimeout(function() {
  alert("N高のみなさん、こんにちは");
}, 3000);

今回のおみくじでは

  • クリックしたらブルブル
  • 1.5 秒後にブルブルをストップ
  • 3 秒後におみくじをひっくり返して
  • 5 秒後に結果が表示
  • 8 秒後にリセットされる

というふうにしています。

連打を防止する

ボタンをクリックしたら、ボタンが無効になるように.prop("disabled",true)というメソッドを使います。無効にしたいボタンを$(this)で取得し、そこにボタンを無効化するメソッドをあたえます。おみくじの結果が出たあとは再度.prop()のメソッドで無効を取り消しましょう。

$(function() {
  $("#omikujiBtn").click(function() {
    var btn = $(this);
    btn.prop("disabled", true);
    // おみくじを振る
    $("#omikujiImg").addClass("buruburu");
    // ブルブルを止める
    setTimeout(function() {
      $("#omikujiImg").removeClass("buruburu");
    }, 1500);
    // おみくじをひっくり返す
    setTimeout(function() {
      $("#omikujiImg").addClass("rotate");
    }, 3000);
    // 結果が表示される
    setTimeout(function() {
      var result = omikujiResult[Math.floor( Math.random() * omikujiResult.length)];
      $("#omikujiResult").html("<div class='omikujiResultInner'>" + result + "</div>");
    }, 5000);
    // リセットする
    setTimeout(function() {
      $("#omikujiResult").html("<img id='omikujiImg' src='assets/omikuji.png'>");
      btn.prop("disabled", false);
    }, 8000);
  });
});

完成したおみくじ

課題

それでは作ったおみくじを自分でカスタマイズしてみましょう

例えば…

  • おみくじの結果に合わせて背景を変える
  • おみくじの結果の確率を変える（大吉が出にくくなるなど）
  • アニメーションを工夫してみる

など。自分のアイデアを形にしてみましょう。

スポンサーリンク

Posted by エスパパの娘