JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

jQueryのaddClass()メソッドとは？使い方をサンプルコード付きで徹底解説

jQueryのaddClass()メソッドは、開発者がHTML要素をより柔軟に操作するための手段を提供します。メソッド名が示すとおり、選択した要素にクラス属性を追加できる機能です。なぜこの機能が必要なのでしょうか？

例として、タイトル・段落・クリックすると何らかの動作をするボタンといった既存の要素を持つWebページを思い浮かべてください。このページには、各要素のクラス名をもとにスタイルを適用するスタイルシートも用意されています。ボタンをクリックすると、既存コンテンツのスタイル（見た目）を切り替えられるわけです。

addClass()メソッドを使えば、ボタンがクリックされたタイミングで既存コンテンツへ新しいスタイル属性を挿入できます。わずか1行のコードで既存コンテンツのスタイルを変更できるため、開発者は「スタイルベース」の発想で要素を操作できるようになります。

それでは、この例をさらに掘り下げながら、実際のコーディング方法を見ていきましょう。

jQuery addClass()の仕組み

今回の例では、ボタンがクリックされたときにオブジェクトのクラス属性を変更します。サンプルコードに入る前に、まずaddClass()の基本的な動作を確認しておきましょう。次のようなHTMLがあるとします。

<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: blue;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>

<head>内では<style>タグを使って、<p>タグの基本的なスタイルを定義しています。jQuery APIへのリンクも読み込んでいますね。<body>には「Hello」「and」「Goodbye」という3つの単語が、それぞれ別の<p>タグで囲まれて配置されています。addClass()の動作を理解するために、<style>の中身に注目してみましょう。

<style>内には2つのクラスが定義されています。1つは「selected」で、文字色を青にするcolor属性を持ちます。もう1つは「highlight」で、背景色を黄色にするbackground属性を持ちます。しかし現時点では、これらのスタイルはどれも画面に反映されていません。

jQueryのaddClass()メソッドとは？使い方をサンプルコード付きで徹底解説

スタイルが反映されない理由は、<p>タグにクラスが関連付けられていないからです。HTMLを直接編集して<p>に手作業でクラスを書き込む代わりに、addClass()を使えば、任意の（またはすべての）<p>要素に対して、任意の（またはすべての）クラス属性を簡単に挿入できます。

<script>
$(document).ready(() => {
  $('p').addClass('selected')
})
</script>

ここでは、すべての<p>要素を選択し、「selected」というクラス属性を追加しています。これにより、すべての<p>要素が青色で表示されるはずです。

jQueryのaddClass()メソッドとは？使い方をサンプルコード付きで徹底解説

期待どおりの結果になりました！さらに、jQueryのaddClass()メソッドは、複数のクラス属性を1つの引数として受け取ることも可能です。例えば次のように書けます。

<script>
$(document).ready(() => {
  $('p').addClass('selected highlight')
})
</script>

2つのクラス名をスペースで区切り、1組の括弧で囲んで指定している点に注目してください。これにより、<p>要素は青色の文字に加えて、黄色の背景も持つようになります。

jQueryのaddClass()メソッドとは？使い方をサンプルコード付きで徹底解説

addClass()で要素にクラス属性を追加する基本がわかったところで、ボタンがある元の例に戻りましょう。

jQuery addClass()の実践的な使い方

最初の例にボタンを追加したコードがこちらです。

<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .selected {
    color: blue;
  }
  .highlight {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>
<strong>jQuery addClass Example</strong>
</p>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<button>
Click to add class
</button>

上記のコードではボタンが表示されますが、クリックしてもまだ何も起こりません。前の例ではすべての<p>タグを一度に変更しましたが、今度は「ボタンがクリックされたときに、特定の1つの要素だけを変更する」処理を実装してみましょう。これには、jQueryのclick()メソッドを組み合わせます。

click()メソッドをおさらいしておくと、イベントリスナーを登録したいオブジェクトセレクターに対して呼び出し、引数としてコールバック関数を渡します。コールバック関数とは、「後で実行するために引数として渡される関数」のことです。この例では、ボタンがクリックされた時点でコールバック関数が実行されます。

それでは、実際の動作を確認してみましょう！

<script>
$('button').click(() => {
 $('p').last().addClass('selected')
})
</script>

コールバック関数内では、<p>要素を選択したうえでlast()を呼び出し、最後の<p>要素を特定しています。その要素に対して「selected」クラス属性を追加していますね。つまり、「Goodbye」という単語を含む最後の<p>要素が、ボタンをクリックすると青色に変わると期待できます。

実際にボタンをクリックして確かめてみましょう。

jQueryのaddClass()メソッドとは？使い方をサンプルコード付きで徹底解説

まさに予想どおりの結果です！ここまでで、ページ読み込み時にすべての<p>要素へスタイル付きクラスを一括適用するというaddClass()の基本的な使い方と、click()など他のjQueryメソッドと組み合わせて、ボタンがクリックされたときに特定の1つの<p>要素だけクラス属性を変更する応用的な使い方の両方を確認できました。

まとめ

今回は、jQueryのaddClass()メソッドとは何か、そしてその仕組みについて学びました。addClass()は非常に柔軟性が高く、複数のクラス属性を一度に変更できることも理解しました。本記事の例はあくまで基本的な活用シーンの紹介ですが、ぜひご自身でもさまざまなパターンを試しながら、Webアプリケーション開発においてaddClass()が役立つ場面を探ってみてください。

  1. JavaScriptのプロトタイプにメソッドを追加する方法

    JavaScriptのプロトタイプにメソッドを追加する方法JavaScriptでは、コンストラクタ関数のprototypeプロパティにメソッドを追加することで、そのコンストラクタから生成されたすべてのインスタンスが同じメソッドを共有できるようになります。各インスタンスに個別にメソッドを定義する必要がなくなるため、メモリの使用量を抑えられ、コードの保守性も向上します。以下は、JavaScriptのプロトタイプにメソッドを追加するコード例です。コード例<!DOCTYPE html> <html lang="ja"> <head> <me

  2. JavaScriptでプロトタイプを使ってメソッドを共有する方法

    JavaScriptにおけるメソッドの共有JavaScriptでは、メソッドをオブジェクト（コンストラクタ関数）のprototypeプロパティに定義することで、複数のインスタンス間でそのメソッドを共有できます。通常、コンストラクタ内でthis.displayInfo = function(){...}のようにメソッドを定義すると、生成されるインスタンスごとに関数のコピーが作成され、メモリを無駄に消費します。一方、prototypeに定義すれば、関数は一度だけ生成され、すべてのインスタンスから参照・呼び出しできるようになります。これはメモリ効率の面でも大きなメリットがあります。以下は、JavaS