こんにちは、ライターのマサトです！
今回は、jQueryから指定したクラスがHTML要素に存在するかどうかをチェックできる「hasClass()」について学習しましょう。
この記事では、
・「hasClass()」とは？
・「hasClass()」の使い方
という基本的な内容から、
・「hasClass()」の戻り値
・複数クラスの扱い方
などの応用的な使い方に関しても解説していきます。
この記事で、「hasClass()」をしっかり学習して自分のスキルアップを目指しましょう！
「hasClass()」とは？
それでは、まず最初に「hasClass()」について基本的な知識から身に付けていきましょう！
「hasClass()」は、任意のクラス名を指定することで対象のHTML要素にそのクラスがあるかを確認できます。
例えば、次のようなリスト要素があるとします。
<ul>
<li class="red">リスト１</li>
<li class="blue">リスト２</li>
<li class="green">リスト３</li>
</ul>
この場合、「li要素」には異なる3種類のクラスが付与されていますよね。
このように同じ要素に複数のクラスが付与されている場合に、特定のクラスが存在しているかを確認するケースは少なくありません。
このような時に「hasClass()」を使うと簡単に検出することが可能です。
「hasClass()」の使い方
この章では、hasClass()の基本的な使い方について学んでいきましょう！
一般的な構文や実際の使い方について見ていきます。
基本的な構文と書き方について
まずは、基本的な構文について学習しましょう！
考え方としては、対象となる要素にhasClass()を実行する流れになります。
次の例を見てください。
対象要素.hasClass( クラス名 );
このように対象となるHTML要素にhasClass()を繋げて実行します。
引数には、検出したいクラス名を文字列で指定すればOKです！
また、戻り値を取得したり複数クラスを指定することも可能ですが、これについては後述します。
指定したクラスの存在有無を調べる方法
次に、実際のプログラムを見ていきましょう！
次のようなHTMLがあるとします。
<p class="sample">サンプルテキスト</p>
これは単純なp要素にクラス名が付与されているHTMLになります。
そこで、この要素に対して「sample」というクラスが付与されているかを確かめてみましょう！
次のサンプル例を見てください！
$('p').hasClass('sample');
この例では、p要素に対してhasClass()を実行しているのが分かりますね。
引数に「sample」という文字列を指定することで、p要素に同じ名称のクラスが付与されいているかをチェックできるわけです。
「hasClass()」の戻り値
この章では、hasClass()が返す「戻り値」について見ていきましょう！
戻り値を取得する方法やそれを利用した条件分岐の手法について学びます。
hasClass()の戻り値を取得する方法
まずは、hasClass()を使った戻り値の取得方法について見ていきましょう！
hasClass()は特定のクラスを検出する際に「true / false」を返す特性を持っています。
指定のクラスを検出した場合は「true」を返し、検出できなかった場合は「false」を返します。
例えば、先ほどのHTMLを思い出してください。
<p class="sample">サンプルテキスト</p>
このp要素にはクラス名「sample」が付与されていますよね。
そこで、次のように記述してみましょう！
var p = $('p').hasClass('sample');
console.log( p );
実行結果
true
この例では、hasClass()を変数「p」に代入しているのが分かりますね。
このように記述することで、hasClass()の戻り値を取得して変数「p」に格納することができるのです。
実行結果を見ると「true」が出力されているのが分かりますね！
IF文を使った条件分岐について
戻り値を活用すれば条件分岐も簡単に実現できるので紹介しておきます！
hasClass()の戻り値は「true / false」のどちらかになるので、これをそのままIF文の条件式として利用するわけです。
先ほどの例を使うと、次のような記述が可能です！
var p = $('p').hasClass('sample');
if( p ) {
console.log('検出されました！');
} else {
console.log('検出できませんでした！');
}
実行結果
検出されました！
まず最初に、p要素のクラス名が「sample」かどうかをチェックしています。
そして、戻り値を変数「p」に格納してそのままIF文の条件式に指定していますね？
実行結果を見ると分かりますが、戻り値は「true」なので「真」の処理が実行されているわけです。
複数クラスの扱い方
この章では、複数クラスを検出する場合について見ていきましょう！
具体的には、hasClass()の引数にセットする文字列について学んでいきます。
引数に複数のクラスを指定した場合
特定のクラスを検出する際に、複数のクラスを探したいケースがあります。
hasClass()を利用すると、特定の条件下において複数クラスを検出することが可能です。
例えば、次のようなHTMLがあるとします。
<ul>
<li class="red">リスト１</li>
<li class="blue">リスト２</li>
<li class="red green">リスト３</li>
</ul>
リスト要素にはそれぞれ異なるクラスが付与されています。
この時に、「red green」という２つのクラスが付与された要素があるかどうかをチェックしてみましょう！
次のサンプル例を見てください！
var li = $('li').hasClass('red green');
console.log(li);
実行結果
true
hasClass()の引数部分に注目してください！
クラス名をスペースを空けて複数記述しているのが分かりますね。
このように、複数のクラスを引数に設定することが可能で、実行結果も「true」になっているのが分かります。
しかし、最初に「特定の条件下」で…と書いたのには理由があります！
それは、引数の文字列が完全に一致しないと検出されないという点です。
つまり、「red green」なら検出するものの「green red」だと検出されないというわけです。
この点には十分に注意しながら利用するようにしましょう！
まとめ
今回は、HTML要素に特定のクラスが存在するかをチェックできる「hasClass()」について学習しました！
最後に、もう一度ポイントをおさらいしておきましょう！
・引数に指定したクラス名を文字列で指定することで検出することが可能
・戻り値の「true / false」を活用することで複雑な分岐処理が可能
・複数のクラスも検出できるが完全一致しないと検出されない
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
