こんにちは、ライターのマサトです！
今回は、jQueryから対象要素のclass属性を追加することができる「addClass()」について学習をしていきましょう！
この記事では、
・「addClass()」とは？
・「addClass()」の使い方
という基本的な内容から、
・「addClass()」の活用
・アニメーションの作り方
・addClass()の類似メソッド
などの応用的な使い方に関しても解説していきます。
この記事で、「addClass()」メソッドをしっかり学習して自分のスキルアップを目指しましょう！
「addClass()」とは？
それでは、まず最初に「addClass()」について基本的な知識から学習を進めていきましょう！
「addClass()」は、任意の要素にclass属性を追加することができるメソッドになります。
例えば、以下のようなHTML要素があるとします。
<h1 class="title">サンプルタイトル</h1> <p>テキスト</p>
この場合、h1要素にはclass属性が付与されていますがp要素には付与されていません。
このような時に、jQuery側から任意のタイミングでclass属性を追加できるのがaddClass()の特徴です。
本記事では、addClass()の基本から応用技まで体系的に学べるように構成しているので参考にしてみてください。
「addClass()」の使い方
この章では、addClass()の基本的な使い方を見ていきましょう！
主に、class属性の追加方法と複数classの追加について学んでいきます。
基本的な構文と書き方について
まずは、「addClass()」の構文について見ていきましょう！
「addClass()」は、クラスを付与したい要素を対象にして実行するのが基本となります。
対象要素.addClass( クラス名・function )
このように対象要素に続けてaddClass()を実行し、引数へ付与したいクラス名を記述すればOKです。
また、引数には関数(function)を付与することも可能で、複雑な条件や処理を同時に行えるので便利です。（詳細は後述します）
注意点として、引数に記述するのはクラス名のみで「.（ドット）」は不要なので忘れないようにしましょう。
対象要素にclassを追加する方法
それでは、実際にaddClass()を使ってクラスを付与する方法を見ていきましょう！
例えば、次のようなHTMLがあるとします。
<h1>タイトル</h1> <p>テキスト</p>
この例では、h1要素とp要素が配置されておりclass属性は付与されていません。
そこで、文字色を赤色に変更する「changeColor」というclass名を作成します。
.changeColor {
color: red;
}
このclass属性を「addClass()」を使って追加してみましょう！
$('h1, p').addClass('changeColor');
この例では、「$(‘h1, p’)」のようにセレクタ指定することでh1とp要素の両方を指定しています。
そして、「addClass(’changeCcolor’)」と記述することでclass属性を追加することができます。
実行すると、それぞれのテキスト文字が赤色に変化するのが分かります。
「addClass()」の活用
ここからは、addClass()をさらに活用できる使い方について見ていきましょう！
主に、複数のクラスを追加する方法、引数に関数を設定する方法、クラスが重複した場合の挙動について学んでいきます。
複数のclassを要素に追加する方法
今度は、複数のclass属性を追加する方法について見ていきましょう！
方法は簡単で、実はaddClass()の引数には複数のclassを設定することが可能なのです。
【 addClass( class名 class名 class名・・・ ) 】のように、半角スペースを空けることで続けて指定可能です。
例えば、3つのclass名を追加するには次のように記述します。
$('h1,p').addClass('mycolor mysize myfont');
この例ではh1とp要素に対して、指定した3つのclass属性がそれぞれ追加されます。
class属性ごとにaddClass()メソッドを複数記述しなくても良いので忘れないようにしておきましょう！
callback関数の使い方
「addClass()」メソッドは引数に「関数」を指定することも可能なのでご紹介しておきます！
関数を利用することで、条件分岐などを活用した複雑な処理を行ったうえでclass属性を追加できるようになります。
例えば、次のようなHTMLを見てください。
<p class="addBlue">おはよう</p> <p class="addGreen">こんにちは</p> <p>こんばんは</p>
この例では、3つのp要素が配置されており1つだけclass属性が付与されていませんよね？
そこで、class属性が付与されていない要素にだけ任意のclass属性を追加する処理を作成してみましょう！
まずはaddClass()の引数に関数を設定するとどうなるかを見ていきます。
$('p').addClass(function( index, myclass ) {
console.log( index, myclass );
})
実行結果
0 addBlue 1 addGreen 2
addClass()に関数を設定すると、2つの引数（index, myclass）を受け取ることができます。
そして、実行結果に注目してください！
「index」は対象となるHTML要素のインデックス番号で、「myclass」はその要素が最初から持っているclass属性名になります。
3つ目のp要素はそもそもclass属性が付与されていないので、「空文字」となり実行結果に表示されていないわけです。
そこで、この特性を応用すればclass属性を持っていないHTML要素だけに任意のclassを追加することが可能です。
次のサンプル例を見てください！
$('p').addClass(function( index, myclass ) {
if( !myclass ) {
return 'addRed';
}
})
この例では、IF文の条件式を「if( !myclass ) { }」とすることで「空文字」の場合だけtrueの処理を行うという意味になります。
つまり、対象のHTML要素がclass属性を持っていない場合は「addRed」というclassを追加することになるわけです。
同じclassが2回重複した場合の挙動について
addClass()を使ってクラスを付与する際に、まったく同じクラス名を指定した場合の挙動について見ていきましょう！
例えば、次のようなコード例を見てください！
$('h1').addClass('sample sample');
この例では、「sample」というクラス名を2つ設定していますね。
この状態で実行してみると、h1要素は以下のようになります。
<h1 class="sample">サンプルテキスト</h1>
2つの「sample」というクラス名を設定したにも関わらず、1つしか付与されていませんよね？
実は、addClass()は同じクラス名が設定された場合は、自動的に1つのクラス名に修正してくれる機能があるのです。
そこで、比較するためにまったく同じサンプルをattr()を使って設定してみましょう！
$('h1').attr('class', 'hoge hoge');
実行後のHTML
<h1 class="hoge hoge">サンプルテキスト</h1>
注目すべきは実行後のHTMLです！
attr()で設定した通りに、まったく同じクラス名が2つ付与されていますよね？
同じクラス名なので本来は1つだけあれば良いにも関わらず、不要な記述がされているわけです。
このようなaddClass()の特徴は知らないと損をするので、ぜひ覚えておくようにしましょう！
アニメーションの作り方
この章では、addClass()メソッドを利用したアニメーション手法について見ていきましょう！
一般的によく使われる「フェードイン」、CSSの「transition」の応用技について学んでいきます。
フェードインを要素に追加する方法
まずは、「フェードイン」のアニメーションについて見ていきましょう！
「フェードイン」は、少しずつ対象要素が表示されていくアニメーション効果になります。
これを実現する簡単な方法としては、jQueryの標準で用意されている「fadeIn()」を組み合わせることです。
例えば、次のようなHTMLとCSSがあるとします。
HTML
<p>こんにちは</p>
CSS
.addBlue {
background-color: blue;
}
単純なp要素と背景色を青色にするclassを用意しました。
そこで、addClass()を使ってp要素の背景色を青色に変更し、フェードインで表示させてみましょう！
次のサンプル例を見てください！
$('p').hide().addClass('addBlue').fadeIn( 1000 )
「fadeIn()」メソッドは非表示の要素に対してのみ動作するので、最初に「hide()」で対象要素を非表示にします。
そのあとに続けてaddClass()でclass属性を追加してから「fadeIn()」を実行すればOKです。
これにより、対象のp要素は青色の背景色で少しずつ表示されるアニメーションになります。
CSSの「transition」でアニメーションを作る方法
今度は、もう少しだけ複雑なアニメーションに挑戦してみましょう！
今回使うのはCSSの「transition」プロパティで、これを利用すると簡単にアニメーション制御を行えます。
まずは次のHTMLとCSSを用意しましょう！
HTML
<p>こんにちは</p> <button>ボタン</button>
CSS
p {
width: 100px;
transition: all 2s ease-out 0s;
}
.addRotate {
transform: rotate( 360deg );
}
この例では、p要素とボタン要素が配置されており、p要素側にCSSの「transition」が設定されているのが分かります。
この「transition」が設定されているHTML要素は、あとからさまざまなアニメーションを追加することが可能です。
今回は、transformプロパティを使って「rotate( 360deg )」と指定することで対象要素を360度回転させることができます。
次のサンプル例を見てください！
$('button').click( function() {
$('p').addClass( 'addRotate' );
})
この例では、ボタン要素をクリックした時の関数処理を記述しており、その中身にaddClass()を実行しているのが分かります。
これにより、ボタンをクリックした瞬間に対象のp要素が360度回転するアニメーションになるわけです。
「animate()」によるaddClass()の組み合わせ方
jQueryを使って簡単にアニメーションを作る方法として、「animate()」メソッドがあります。
「animate()」は引数に関数を設定できるのですが、この中でaddClass()を使ってみましょう。
すると、アニメーションが完了した瞬間にaddClass()を実行できるようになります。
次のサンプル例を見てください！
$('h1').animate({"marginLeft":"100px"},2000,"swing", function() {
$(this).addClass('blue');
})
この例では、animate()を使ってh1要素を右方向へ２秒間移動するアニメーションを実現しています。
また関数内でaddClass()を使って「blue」というクラス名をh1要素に付与しようとしています。
つまり、h1要素の移動アニメーションが終了するとh1要素にclass属性が付与されるというわけです。
ちなみに、animate()を使ったアニメーション作成の基本から応用技を次の記事でまとめているので参考にしてみてください！
addClass()の関連メソッド
この章では、addClass()メソッドと同様によく使われる関連メソッドをご紹介します！
主に、「removeClass()」「toggleClass()」について学んでいきます。
「removeClass()」で追加したclassを削除する方法
まずは、「removeClass()」メソッドについて見ていきましょう！
「removeClass()」は、対象となるHTML要素が持っているclass属性を削除することができるメソッドになります。
例えば、次のようなリスト要素があるとします。
<ul>
<li class="list">テスト１</li>
<li class="sample">テスト１</li>
<li class="list">テスト１</li>
</ul>
それぞれの「li要素」にはclass属性が付与されています。
これらのclass属性をすべて削除するには、次のように記述します。
$('li').removeClass();
対象となる「il要素」に対して、「removeClass()」メソッドを実行するだけでclass属性を削除することが可能です。
さらに、引数へ任意のclass属性名を指定することで、削除対象を限定することもできます。
$('li').removeClass('sample');
この例では、引数に「sample」と設定しているので、対象要素のclass属性名が「sample」の場合のみ削除されます。
addClass()のように複数のclass属性名を設定することも可能で、関数を引数に指定することもできます。
「toggleClass()」で要素を追加・削除する方法
今度は、「toggleClass()」メソッドについて見ていきましょう！
addClass()は基本的にclass属性の追加だけでしたが、toggleClass()は追加と削除の両方を実行することができます。
toggleClass()は、対象となる要素に指定したclass属性があれば「削除」、無ければ「追加」するという機能を持っています。
次のHTMLとCSSを見てください！
HTML
<p>こんにちは</p> <button>切り替え</button>
CSS
.addColor {
color: red;
}
この例では、p要素とボタン要素が配置されており、文字色を赤色にするclassが用意されているのが分かります。
そこで、ボタンをクリックする度に文字色が赤色になったり元の色に変わるようにしてみましょう！
次のサンプル例を見てください！
$('button').click(function() {
$('p').toggleClass( 'addColor' );
})
この例では、ボタンのクリックイベント処理の中にtoggleClass()メソッドを実行しているのが分かります。
toggleClass()の引数に先ほどのclass属性を設定することで、任意のclassを追加したり削除したりを繰り返すことが可能です。
これにより、ボタンをクリックする度に文字の色が変わるようになるわけです！
まとめ
今回は、jQueryから対象のHTML要素にclass属性を追加できる「addClass()」メソッドについて学習しました！
最後に、もう一度ポイントをおさらいしておきましょう！
・addClass()は対象要素にclass属性を追加（複数も可）することができる
・「fadeIn()」やCSSの「transition」プロパティを組み合わせるとアニメーションできる
・関連メソッドとして「removeClass()」「toggleClass()」がよく使われる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
