プロデミア

Lesson５jQuery

01 jQueryとは？

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

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

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

なぜ学ぶのか

jQueryは非常に簡単に使えるライブラリで、DOM操作、イベントハンドリング、アニメーションなどの基本的なWeb開発のタスクを直感的に扱うことができます。このため、プログラミング初心者にとって理解しやすく、様々な実装が可能です。また、これを学ぶことでJavaScriptの理解を深めることができます。

jQueryを学んだ後は、さらにJavaScriptの知識を深めるために、フロントエンドフレームワーク（VueやReactなど）にもチャレンジしてみてください！

02 jQueryの使い方

jQueryの導入

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

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

ダウンロードして使用する場合

jQueryは公式ウェブサイトからダウンロードできます。以下のステップで進めてください。

  1. jQueryの公式ウェブサイトにアクセスします。
  2. 「Download jQuery」セクションを見つけます。通常、ページの上部にあります。
  3. 最新版を選択します。jQueryには通常、”compressed”（圧縮版）と”uncompressed”（非圧縮版）の2種類があります。開発中は非圧縮版を使うと、コードが読みやすくなりますが、本番環境ではパフォーマンスの観点から圧縮版を使うことを推奨します。
  4. リンクを右クリックし、「リンク先のファイルを保存」を選んで、ファイルをダウンロードします。

ダウンロードしたjQueryファイルをプロジェクトの適切なディレクトリに配置します。そして、HTMLファイル内で次のようにリンクします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- jQueryの読み込み(ローカルで保存したjQueryファイルを指定) -->
    <script src="jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- ここに内容を記述 -->
</body>
</html>

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と同じようなメソッドも使うことができます。

03 jQueryをさらに深く知る

セレクタの指定方法

先ほど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('こんにちは！');

注意

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

04 CSSを操作する

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 AJAXと通信

AJAX（Asynchronous JavaScript and XML）は、ウェブページがサーバーとの間でデータを非同期に交換し、ページをリロードせずに部分的に更新できる技術です。これにより、ウェブアプリケーションのパフォーマンスが向上し、ユーザー体験がスムーズになります。


例えば、レストランでの通常の注文プロセスを考えてみましょう。ウェイターが注文を受けてキッチンに伝え、料理が一度に全てテーブルに運ばれるまで待つ必要があります。これは同期処理に似ています。一方で、AJAXを使ったウェブページでは、まるで「タップ式注文システム」を使用しているレストランのように、各料理を個別に注文し、準備ができ次第すぐに受け取ることができます。これは非同期処理に相当し、各料理を待たずに次々と受け取ることができるため、体験が流動的で効率的になります。

jQueryでのAJAXの基本

上記の処理をjQueryでは簡単に実装することができます。

jQueryでは主に$.ajax()メソッドを使用してAJAXリクエストを行います。

これは柔軟性が高く、様々なオプションをカスタマイズできるメソッドです。他にも、より簡略化された$.get(), $.post()などのメソッドがあります。これは後ほど説明いたします。

書き方は下記の通りです。これはJSONPlaceholderを利用した例になります。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>AJAX Demo with JSON Placeholder</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="load-button">データをロード</button>
    <div id="data-container">ここにデータが表示されます。</div>

    <script>
        $(document).ready(function() {
            $('#load-button').click(function() {
                $.ajax({
                    url: '{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}', // JSON Placeholderからユーザー情報を取得
                    type: 'GET', // リクエストのタイプ
                    dataType: 'json', // 期待するレスポンスのデータタイプ
                    success: function(data) {
                        // リクエストが成功した時の処理
                        // JSON Placeholderから返されるデータに基づき、ユーザーの名前とメールを表示
                        $('#data-container').html('<p>名前: ' + data.name + '</p><p>メール: ' + data.email + '</p>');
                    },
                    error: function() {
                        // リクエストが失敗した時の処理
                        $('#data-container').html('<p>データのロードに失敗しました。</p>');
                    }
                });
            });
        });
    </script>
</body>
</html>

・「https://jsonplaceholder.typicode.com/users/1」の出力
{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

・出力結果



処理のポイントは以下になります。また、今回のようにJSONとの連携された事例は頻繁に利用されます。

1. jQueryの利用
jQueryの読み込み: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>により、jQueryライブラリが読み込まれています。これにより、AJAXリクエストの実行やDOMの操作が簡単に行えます。
2. DOMの準備完了の待機
DOM Readyイベント: $(document).ready(function() {...});は、HTMLドキュメントが完全に読み込まれ、DOMが操作可能な状態になったときに実行される関数を定義します。
3. イベントハンドラの設定
クリックイベントの割り当て: $('#load-button').click(function() {...});は、IDがload-buttonのHTML要素（この場合はボタン）がクリックされたときに関数を実行するように設定しています。
4. AJAXリクエストの実行
AJAXの設定と実行: $.ajax({...});は、指定された設定で非同期リクエストを実行します。主要なプロパティには以下が含まれます：
url: リクエストを送信するURL。ここではJSON PlaceholderのAPIエンドポイントが指定されています。
type: HTTPメソッドの指定。ここではGETが使われており、データの取得を意味します。
dataType: レスポンスとして期待するデータの形式。'json'が指定されているため、JSON形式のデータを期待しています。
5. 成功とエラーのハンドリング
成功時の処理: success関数は、リクエストが成功した際に実行されます。ここで、dataパラメータからユーザーの名前とメールアドレスを取り出し、それをdata-containerというIDを持つdiv要素に表示しています。
エラー時の処理: error関数は、リクエストが失敗した場合に実行されます。この関数では、エラーメッセージをdata-containerに表示しています。
6. データの表示
HTML更新: 成功時のsuccess関数内で、取得したデータをHTML要素に挿入しています。これにより、ページのリロードなしに情報が動的に更新されます。

GETとPOSTリクエスト

使用頻度の高いGETやPOST通信に関してはそれぞれメソッドが用意されており、以下のように簡単に記述することができます。

$.get()メソッド

$.get()メソッドは、HTTP GETリクエストを簡単に実行するためのメソッドです。これはサーバーからデータを取得する際に使用され、主にデータを読み込む場合に適しています。$.get()は次のように使用します：

javascriptCopy code// $.get()の基本的な使用法
$.get("server.php", function(data) {
    // コールバック関数：リクエストが成功した場合に実行される
    console.log("受け取ったデータ:", data);
}).fail(function() {
    // リクエストが失敗した場合に実行される
    console.error("エラーが発生しました");
});

この例では、”server.php”からデータを取得し、取得できた場合はそのデータをコンソールに表示します。何らかのエラーが発生した場合にはエラーメッセージがコンソールに表示されます。

$.post()メソッド

$.post()メソッドは、HTTP POSTリクエストを簡単に実行するためのメソッドです。このメソッドはサーバーにデータを送信する際に使用され、フォームデータの送信やデータの更新に適しています。$.post()の使用法は以下の通りです：

javascriptCopy code// $.post()の基本的な使用法
$.post("server.php", { name: "Taro", age: 30 }, function(data) {
    // コールバック関数：リクエストが成功した場合に実行される
    console.log("サーバーからの応答:", data);
}).fail(function() {
    // リクエストが失敗した場合に実行される
    console.error("エラーが発生しました");
});

この例では、”server.php”に対してnameとageのデータをPOSTメソッドで送信し、サーバーからの応答をコンソールで表示しています。同じく、エラー処理も含まれています。

08 フォームとバリデーション

ウェブアプリケーションでは、フォームとバリデーションが非常に重要です。フォームはユーザーから情報を収集するための手段で、バリデーションはその収集した情報が正しく、期待されるルールや要件に合致しているかを確認するプロセスです。

フォーム・バリデーションの実装

jQueryを使ったフォームの全体的な例を作成してみましょう。この例では、単純なユーザー登録フォームを作成し、jQueryを用いてフォームの入力値を取得し、バリデーションを行い、最終的にはフォームをプログラム的に送信する方法を示します。

HTMLフォーム

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ユーザー登録フォーム</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="registrationForm">
        <label for="username">ユーザー名:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <label for="password">パスワード:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">登録</button>
    </form>

    <script src="form-script.js"></script>
</body>
</html>

JavaScript (jQuery) でのフォーム操作

フォームスクリプト（form-script.js）では、以下の機能を実装します

  1. フォームのバリデーション
  2. フォームデータの取得
  3. フォームの送信防止とカスタム送信処理
$(document).ready(function() {
    $('#registrationForm').submit(function(event) {
        event.preventDefault(); // フォームの自動送信を防ぐ

        var username = $('#username').val().trim();
        var email = $('#email').val().trim();
        var password = $('#password').val().trim();

        // 簡単なバリデーション
        if (username === "" || email === "" || password === "") {
            alert("すべてのフィールドを入力してください。");
            return;
        }
        if (!email.includes('@')) {
            alert("有効なメールアドレスを入力してください。");
            return;
        }

        // フォームデータの使用、例えばAjaxを使ってサーバーに送信
        $.ajax({
            url: 'register.php', // 送信先URL
            type: 'POST',
            data: {
                username: username,
                email: email,
                password: password
            },
            success: function(response) {
                console.log('登録成功: ', response);
                alert('登録が完了しました！');
            },
            error: function() {
                alert('登録に失敗しました。');
            }
        });
    });
});

・バリデーション例1

・バリデーション例2

この例では、ユーザーがフォームに入力したデータを取得し、いくつかの基本的なバリデーションチェックを行った後、すべてのチェックが通過したら、Ajaxを使用してこれらのデータをサーバーに送信します。サーバー側でさらに処理が行われた後、成功または失敗のレスポンスに基づいてユーザーに通知します。

このように、jQueryを使用するとフォームの操作が簡単にでき、ユーザーエクスペリエンスの向上に役立ちます。この例を基にして、さらに複雑なバリデーションや機能を追加することも可能です。

09 発展

パフォーマンスの最適化

jQueryを使ったWeb開発では、パフォーマンス最適化は非常に重要です。適切な最適化を行うことで、ページの読み込み速度を向上させ、ユーザー体験を大きく改善することができます。以下に、jQueryのパフォーマンスを最適化するためのいくつかの具体的な方法を紹介します。

1. 適切なセレクタを使用する

jQueryでは、DOM要素を選択するためのセレクタが非常に重要です。不適切なセレクタは、パフォーマンスを低下させる原因となります。例えば、IDセレクタ（$('#id')）は、クラスセレクタ（$('.class')）やタグセレクタ（$('tag')）よりも処理が速いです。また、可能な限り具体的なセレクタを使用することで、検索範囲を狭め、処理速度を向上させることができます。

  • IDセレクタ: $('#id')の形式で、特定のIDを持つ要素を直接選択します。これはブラウザがIDをもとに要素を非常に迅速に見つけることができるため、最も高速です。
  • クラスセレクタ: $('.class')はクラス名に基づいて要素を選択します。IDセレクタに比べると若干遅いですが、一般的には効率的です。
  • 子孫セレクタ: 特定の親要素の下の子要素を指定する際に $('#parent .child') のように使います。このとき、左側から右に向かって絞り込みを行うため、左のセレクタがより具体的であるほど効率が良くなります。

2. DOM操作の最小化

DOMへの操作はコストが高いため、これを最小限に抑えることが推奨されます。例えば、複数のDOM変更を一度に行う場合は、一旦変数にHTMLを格納し、最後にそれをDOMに挿入する方法が効率的です。

var content = '';
for (var i = 0; i < 100; i++) {
  content += '<li>項目 ' + i + '</li>';
}
$('#list').html(content);

3. イベント委譲を利用する

多数の要素に対してイベントを設定する場合、個々の要素にイベントリスナーを設定するのではなく、親要素でイベントを委譲することが有効です。これにより、イベントハンドラの数が減少し、メモリ使用量も削減されます。

$('#parent').on('click', 'button', function() {
  alert('Clicked');
});

4. チェーンメソッドの使用

jQueryでは、複数のメソッドをチェーンさせることができます。これにより、コードがシンプルになり、DOMへのアクセス回数を減少させることができるためパフォーマンスが向上することがあります。

$('#id').addClass('active').fadeIn('slow');

5. .ready()の使用を避ける

ページの読み込みが完了した後にのみ実行する必要があるコード以外は、.ready()メソッドを使わずにスクリプトを配置することで、ページのレンダリングを遅延させることなく処理を開始できます。

これらのテクニックを適切に利用することで、jQueryを用いたアプリケーションのパフォーマンスを大幅に向上させることが可能です。パフォーマンスの問題に対しては、プロファイリングツールを使用して、具体的なボトルネックを特定し、適切な対策を講じることが重要です。

メモリリークの防止

jQueryを使用する際に発生する可能性のあるメモリリークは、パフォーマンスに悪影響を及ぼすだけでなく、長時間動作するアプリケーションの安定性にも影響します。メモリリークを防止するための主な方法としては、イベントハンドラやDOM要素の適切な管理が挙げられます。以下に、メモリリークを防ぐための具体的な手法を紹介します。

1. イベントハンドラの適切な解除

イベントハンドラが不要になった場合は、それを明示的に解除することが重要です。例えば、ページ上から削除される要素に対して設定されたイベントハンドラは、要素が削除される前に解除する必要があります。

これらのハンドラを解除しないと、DOM要素が削除された後もメモリ内に残り続ける可能性があります。特に、大量のDOM操作を行うアプリケーションでは、これが顕著に問題となります。

var $button = $('#myButton');
$button.on('click', function() {
  console.log('Clicked');
});

// ボタンが不要になった時、イベントハンドラを解除
$button.off('click');
$button.remove();

2. DOM要素との関連を切る

jQueryで作成したDOM要素が不要になった場合、その要素とjQueryデータオブジェクトの関連を適切に切る必要があります。remove()メソッドを使用すると、要素自体だけでなく、その要素に関連付けられたイベントハンドラやjQueryデータも一緒に削除されます。

// 要素を削除し、関連付けられたデータもクリア
$('#myElement').remove();

3. グローバル変数の使用を避ける

グローバル変数は、その値が不要になった後もメモリ内に残り続けることがあります。可能な限り、変数はローカルスコープで定義するか、必要なくなったら null や適当なデフォルト値で上書きして参照を解放します。

function process() {
  var localData = "Important data";
  console.log(localData);
}

process();

4. クロージャの使用に注意する

クロージャは外部スコープの変数を内部関数から参照できるJavaScriptの強力な特性です。しかし、クロージャが大きなデータ構造を参照している場合、そのデータ構造はクロージャが生存している限りメモリから解放されません。これを防ぐためには、クロージャが不要になったら外部スコープの変数をnullに設定するなどして参照を切ることが有効です。

5. ツールを使用してメモリリークを検出する

ブラウザの開発者ツールを使用して、ページのパフォーマンスとメモリ使用状況を定期的に監視しましょう。Chromeの「Developer Tools」の「Performance」タブや「Memory」タブが有用です。

ベストプラクティス

上記の説明を踏まえ、jQueryを活用する際は以下の観点を考慮してみてください。

1. チェーンメソッドを活用する

jQueryのチェーンメソッドを活用することで、複数のjQueryメソッドを同一の要素に対して効率的に適用できます。これにより、コードの冗長性が減少し、パフォーマンスが向上します。

$('#element').addClass('active').fadeIn('slow').css('color', 'red');

2. DOMへのアクセスを最小限にする

DOMは操作が重たいため、可能な限りDOMへのアクセスは最小限に抑えるべきです。例えば、必要な要素を一度変数に格納してから操作することで、同じ要素への繰り返しアクセスを避けられます。

var $element = $('#element');
$element.hide();
$element.show();

3. イベント委譲を利用する

特に動的に要素が追加される場合には、イベント委譲を活用すると効率的です。親要素にイベントリスナーを設定し、イベントが発生したときに子要素を特定します。これにより、イベントハンドラの数を減少させ、メモリ使用量を削減できます。

$(document).on('click', '.button', function() {
    alert('Button clicked!');
});

4. .ready()の適切な使用

ドキュメントが完全に読み込まれた後に実行する必要があるスクリプトは、$(document).ready()内に配置します。しかし、可能な限りスクリプトはページの末尾に置くことで、DOMの構築を遅らせずにスクリプトの読み込みを開始できます。

javascriptCopy code$(document).ready(function() {
    // DOM準備完了後に実行されるコード
});

5. セレクタのパフォーマンスを考慮する

セレクタの効率はパフォーマンスに大きく影響するため、可能な限りIDセレクタや子孫セレクタを適切に利用し、複雑なセレクタの使用を避けることが重要です。また、:visibleや:hiddenなどのjQuery固有のフィルタよりもCSSクラスを用いた判定の方が高速です。

javascriptCopy code$('#container > .list-item'); // 高速なセレクタ
$('div:visible');            // 低速なセレクタ

6. 不要なライブラリのロードを避ける

ページのパフォーマンスを考慮し、本当に必要な機能に対してのみjQueryライブラリやプラグインをロードすることが望ましいです。また、jQueryの軽量バージョンを使用することも検討してみてください。

これらのベストプラクティスを実践することで、jQueryを使用したWeb開発をより効率的でメンテナンスしやすいものにすることができます。また、これらのテクニックは、良いコードを書くための基本的な考え方として、他のライブラリやフレームワークにも応用可能です。

是非挑戦してみてください！

10 その他のフレームワーク

Vue.js

Vue.jsは、ウェブアプリケーションのフロントエンド開発のためのプログレッシブJavaScriptフレームワークです。リアクティブなデータバインディングとコンポーネント指向の開発を容易にする設計が特徴です。リアクティブなデータバインディングとは、データの変更が自動的にビュー（画面表示）に反映されることを意味します。これにより、DOMを直接操作する必要がなくなり、開発がよりシンプルで保守が容易になります。

jQueryと比べた際のVue.jsのメリット

  1. データバインディング: jQueryでは、DOM要素の内容や属性を手動で更新する必要がありますが、Vue.jsではデータモデルとビューが双方向に結びついており、データが更新されると自動的にビューが更新されます。
  2. コンポーネントベース: Vue.jsではアプリケーションを小さな再利用可能なコンポーネントに分割して開発することが推奨されます。これにより、大規模なアプリケーションの開発とメンテナンスが容易になります。
  3. 仮想DOM: Vue.jsは内部的に仮想DOMを使用しています。これは、実際のDOMへの変更が最小限に抑えられるため、アプリケーションのパフォーマンスが向上します。

Vue.jsの基本的な使い方

Vue.jsを使って簡単な例を紹介します。以下は、メッセージを表示し、ボタンクリックでそのメッセージを更新する単純なVueアプリケーションです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js Example</title>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <button v-on:click="updateMessage">メッセージを更新</button>
    </div>

    <!-- Vue.jsのCDNリンク -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'こんにちは、Vue.js!'
            },
            methods: {
                updateMessage: function() {
                    this.message = 'Vue.jsで更新されました!';
                }
            }
        });
    </script>
</body>
</html>

このコードでは、Vueインスタンスを作成して、#app要素にマウントしています。dataオブジェクト内のmessageは、ページ上で双方向データバインディングされており、ボタンがクリックされるとupdateMessageメソッドが呼ばれ、メッセージが更新されます。

まとめ

Vue.jsは、jQueryと比較してより宣言的でモダンなフロントエンドの開発アプローチを提供します。アプリケーションの状態管理がシンプルになり、コードの構造も整理されます。Vue.jsの学習は、新しいプロジェクトにおける生産性の向上につながるでしょう。

React

Reactは、Facebookによって開発され、2013年にリリースされたJavaScriptのフロントエンドライブラリです。Vue.jsと同様に、ユーザーインターフェースを構築するために設計されており、コンポーネントベースのアーキテクチャを採用しています。Reactの特徴の一つに、JSX（JavaScript XML）があります。JSXはHTMLに似た構文をJavaScript内で使用できるようにする拡張構文で、コンポーネントの構造を直感的に記述でき、複雑なユーザーインターフェースやデータバインディングの実装を容易にします。このシンタックスシュガーを利用することで、Reactのコンポーネントのコードはより読みやすく、書きやすくなります。また、JSXを使用することで、開発者は視覚的なコンポーネントの構造を明確に把握しやすくなり、効率的に開発ができるようになります。

jQueryと比べた際のReactのメリット

  1. 宣言的ビュー: Reactは宣言的にビューを記述することができます。これにより、アプリケーションの各状態に対してUIがどのように見えるべきかを簡単に記述し、予測できます。一方、jQueryでは手続き的なアプローチを取るため、複雑なインタラクションやデータ依存の更新が多いアプリケーションではコードが煩雑になりがちです。
  2. コンポーネントベース: Reactはコンポーネントベースの設計を採用しています。これにより、再利用可能で独立したコンポーネントを作成することができ、それらを組み合わせて複雑なアプリケーションを構築できます。jQueryでは、通常はDOM要素に直接操作を行うため、コンポーネントの概念が本質的ではありません。
  3. パフォーマンス: Reactの仮想DOMは、実際のDOMへの操作が最小限に抑えられるため、特に大規模なアプリケーションにおいて高いパフォーマンスを提供します。jQueryでのDOM操作はコストが高く、パフォーマンスのボトルネックになることがあります。

Reactの基本的な使い方

以下は、Reactを使用してシンプルなメッセージ表示コンポーネントを作成する例です。この例では、ユーザーがボタンをクリックするとメッセージが更新される仕組みを示しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Example</title>
</head>
<body>
    <div id="root"></div> <!-- Reactアプリケーションのマウントポイント -->

    <!-- ReactとReactDOMのCDNリンク -->
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <!-- BabelのCDNリンク (JSXをブラウザで使用するため) -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
        // Reactコンポーネントの定義
        function App() {
            // ReactのuseStateフックを使って状態（メッセージ）を管理
            const [message, setMessage] = React.useState('こんにちは、React!');

            // メッセージを更新する関数
            function updateMessage() {
                setMessage('Reactで更新されました!');
            }

            // JSXを使ってUIを記述
            return (
                <div>
                    <p>{message}</p>
                    <button onClick={updateMessage}>メッセージを更新</button>
                </div>
            );
        }

        // ReactDOMを使ってコンポーネントをページにレンダリング
        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>
  • HTML: Reactアプリケーションのためのdiv要素があり、id属性は”root”です。Reactはこの要素内にコンテンツをレンダリングします。
  • ReactとReactDOM: ReactライブラリとReactDOMライブラリをCDNから読み込んでいます。これにより、Reactの機能を使用できるようになります。
  • Babel: JSXをブラウザで直接使用するためにBabelを利用しています。BabelはブラウザでJSXコードを通常のJavaScriptコードに変換します。
  • JavaScript (Reactコード): AppというReactコンポーネントを定義し、その内部でuseStateフックを使用してメッセージの状態を管理しています。ボタンがクリックされるとupdateMessage関数が呼ばれ、メッセージが更新されます。
  • ReactDOM.render: この関数呼び出しによって、Appコンポーネントが<div id="root"></div>内にレンダリングされます。

まとめ

Reactは、大規模かつ動的なウェブアプリケーションの開発に適した強力なツールです。その宣言的な性質とコンポーネントベースの設計により、開発プロセスを簡素化し、コードの再利用を促進します。また、仮想DOMによる効率的なDOM更新は、パフォーマンスを大幅に向上させます。jQueryが提供する即時的で簡単なDOM操作とは異なり、Reactはアプリケーションのスケーラビリティと保守性を重視した設計になっています。

Vue.jsとReactは現代のフロントエンド開発において重要なフレームワークであり、採用している会社も多いです。また現在ではTypeScriptにて書かれることが多いです。

個人で開発する際は、是非これらのフレームワークを取り込んで開発をしてみてください！

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

タグ:

コメント

コメントを残す

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