プロデミア

jQuery

01jQueryとは？

jQueryはJavaScriptのためのライブラリです。

jQueryを使用することでシンプルにJavaScriptを記述できるようになり、それまで数十行にわたるコードが必要だった処理もわずか数行で実行できるようになります。

jQueryの登場によりフロントエンド開発が効率化され、JavaScriptを用いた複雑な記述が必要なくなったことで、多くの人がフロントエンドエンジニアとして活躍できるようになりました。

02jQueryの使い方

jQueryの導入

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

タグの直前に上記のタグを読み込むことで使えるようになります。

jQueryを使ってみる

Cloud9に新しく「Lesson3_jQuery」という名前のフォルダを作成してください。

その中にindex.htmlファイルを作成しましょう。

作成できたら以下のコードをコピペしましょう。

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" />
    <title>jQuery Start</title>
  </head>
  <body>
    <div id="box"></div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $('#box').text('Hello jQuery!');
    </script>
  </body>
</html>

Cloud9の「Preview」から「Preview File index.html」をクリックしましょう。

画面にHello jQuery!が表示されていたらOKです。

$('#box').text('Hello jQuery!');の部分に注目してみましょう。

jQueryは先ほど言った通りJavaScriptを簡単に記述できるライブラリです。

この部分をJavaScriptで記述すると、以下のようになります。

document.getElementById('box').textContent = "Hello jQuery!";

記述量がずいぶん減っていますよね？

このように記述量を減らすことができる点がjQueryのメリットの１つです。このレッスンでjQueryの記述に慣れていきましょう。

では、コードの詳細を説明します。

まず$(’#box’)の部分、$と記述するだけでなんとdocument.getElementByIdが省略できます。

jQuery　の　$(’#box’)

と

JavaScript　の　document.getElementById(’box’)

は同じ意味です。

簡単に書けますが１つ気を付けないといけないことがあります。

()の中にidを指定する場合はid名の前に「#（シャープ）」をつけます。classを指定する場合は「.（ドット）」をつけます。

// idを指定する場合
$('#box')

// classを指定する場合
$('.box')

「#」と「.」 は忘れがちなので気を付けましょう。

jQueryには様々な便利メソッドが用意されています。

例を下の表にまとめます。

メソッド意味パラメータ追加時
.css()CSSの値を取得 or 書き換え指定のCSSスタイルに変更
.html()要素の値をHTMLとして取得 or 書き換え指定のhtmlに書き換える
.text()要素の値をテキストとして取得 or 書き換え指定のテキストに書き換える
.prepend()要素内の先頭にHTMLを挿入【必須】 挿入するhtmlの指定
.append()要素内の末尾にHTMLを挿入【必須】 挿入するhtmlの指定
.attr()属性値の取得 or 設定指定の値に設定・変更
.hide()要素を非表示にするミリ秒でスピードを指定
.show()非表示要素を表示するミリ秒でスピードを指定

一部のメソッドですが、これだけでもJavaScriptよりも大幅に少ない記述で同じコードを実装できます。

ちなみにですがtext() = textContent です。

JavaScriptと同じようなメソッドも使うことができます。

03jQueryをさらに深く知る

セレクタの指定方法

先ほどidは#で指定するといいましたがidとclass以外にも様々なセレクタを指定することができます。

href属性の指定法

<a href="index.html">サンプル</a>
$('[href="index.html"]').text('こんにちは！');

変数での指定法

<div>サンプル</div>
const element = 'div';
$(element).text('こんにちは！');

変数を組み込む方法

<a href="index.html">サンプル</a>
const url = 'index.html';
$(`[href="${url}"]`).text('こんにちは！');

注意

$の中身は「“（バッククォート）」です。

04CSSを操作する

css()メソッドを用いると簡単にCSSを変更することができます。

「Lesson3_jQuery」ファイルの中に新しく「css_index.html」を作成しましょう。

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" />
    <title>jQuery CSS</title>
  </head>
  <body>
    <div id="box">赤文字</div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $('#box').css('color', 'red');
    </script>
  </body>
</html>

ブラウザを読み込むと赤文字になっているはずです。

デベロッパーツールで確認してみると、

しっかりとCSSが充てられていることが確認できました。

jQueryでメソッドチェーンする

先ほどの例ではメソッドを一つしか記述していませんでした。

jQueryだけでなくLaravelやJavaScriptでもある記述方法でメソッドチェーンというものがあり、メソッドを複数つなげて記述することができます。

新しく「Lesson3_jQuery」フォルダの中にmethod_chain.htmlを作成しましょう。

method_chain.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" />
    <title>jQuery chain</title>
  </head>
  <body>
    <div id="outer">
      親要素
      <div id="inner">子要素</div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $('#outer').children().css({ 'background-color': 'blue' });
    </script>
  </body>
</html>

$(‘#outer’)でまずはidがouterの要素を取得しました。

そしてchildren()でouterの子要素であるinnerの要素を取得しています。

最後にcss({ ‘background-color’: ‘blue’ })で背景色に青色を設定しています。

今回は２つのメソッドでチェーンしましたが、実務では５つや６つなど複雑にチェーンされているケースが存在します。

そのときもあせらず左からそれぞれのメソッドが何をしているか確認していけば、複雑なコードも理解できるようになります。

HTML要素を操作する

JavaScriptでもあったようにjQueryでもHTML要素を操作することができます。

また新しく「Lesson3_jQuery」フォルダの中にHTMLファイルを新しく作成しその中にoperation.htmlを作成しましょう。

operation.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" />
    <title>jQuery html</title>
  </head>
  <body>
    <div id="box"></div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $('#box').append('<p>こんばんは</p>');
    </script>
  </body>
</html>

ブラウザを読み込むと「こんばんは」が表示されます。

デベロッパーツールで確認するとちゃんとpタグの中に「こんばんは」が格納されています。

また、削除も簡単に行うことができます。

$('#box').remove();

remove()メソッドを使うとidがboxの要素事態を削除できます。

Formからデータを受け取る

inputタグに入力された値はval()メソッドを使います。

このval()メソッドは今後多く見かけると思いますので使いこなせるようにしましょう。

「Lesson3_jQuery」フォルダの中に新しくform.htmlを作成しましょう。

form.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" />
    <title>jQuery form</title>
  </head>
  <body>
    <input type="text" id="text" value="サンプル" />
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      console.log($('#text').val());
    </script>
  </body>
</html>

ブラウザを表示しコンソールを開いてみましょう。

コンソールにサンプルが表示されています。

val()メソッドでフォームのvalue属性を取得できます。また、val()メソッドの引数に値をいれることでvalue属性に値を設定できます。

例えば、

$('#text').val('サンプルテキスト');

これでidがtextのvalue属性にサンプルテキストを入れることができます。

05クリックイベント

JavaScriptでもあったようにjQueryにもクリックイベントが存在します。

「Lesson3_jQuery」フォルダに新しくevent.htmlを作成しましょう。

event.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>jQuery イベント</title>
    <style>
      .parent {
        min-height: 100vh;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <button type="button" class="my-button">ボタン</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $('.my-button').on('click', function () {
        $(this).parent().css({ 'background-color': '#ff6666' });
      });
    </script>
  </body>
</html>

JavaScriptではaddEventListener()を使っていましたがjQueryはonを用いることでクリックイベントを実現します。

まず、$(this).parent()の「this」についてです。「this」はクリックされた要素自体のことを指します。

今回で言う「$(‘.my-button’)」の部分、つまりボタンのことです。

ですので、

$(this).parent().css({ 'background-color': '#ff6666' });

この部分はクリックされたボタンの親要素のCSSを「 ‘background-color’: ‘#ff6666’」にしてください、という意味になります。

06要素の表示・非表示

要素を非表示にしたいときは、hideメソッドを使います。

<div class="box">テキスト</div>
// boxクラスの要素をすべて非表示にする
$('.box').hide();

// boxクラスの要素をすべて表示する
$('.box').show();

表示、非表示を切り替えたいだけのときは、toggleメソッドが使えます。

<button type="button" class="my-button">表示切り替え</button>
<div class="box">テキスト</div>
$('.my-button').on('click', () => {
  $('.box').toggle();
});

07課題

Lesson３のJavaScript課題をjQueryに書き換えてみましょう。

対象の課題

  • 7-5 CSS操作
  • 8-2 電卓作成
  • 9-2 配列作成

上記３つが対象になります。

Lesson3_jQueryの中に新しく「kadai」という名前のフォルダを作成しましょう。

作成できたら、「kadai1.js」「kadai2.js」「kadai3.js」ファイルを作成し、

「kadai1.js」には 7-5 CSS操作

「kadai2.js」には 8-2 電卓作成

「kadai3.js」には 9-2 配列作成

の課題をそれぞれ記述するようにしてください。

投稿日

カテゴリー:

投稿者:

prodemia-admin-user

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です