jQuery入門 2020 #02:DOM操作とメソッドチェーンで jQueryの便利さを実感しよう

jQueryが、素のJavaScript(Vanilla JS)よりも優れているのが、Traversing(とラバージング)とメソッドチェーンです。それぞれ紹介しましょう。

Traversing(トラバージング)

Traversingとは「横切る」とか「横断する」といった意味のある英単語ですが、jQueryはある要素を指定した後で、自由にその前後を行き来してセレクターを帰ることができます。

例えば、次のプログラムを見ていきましょう。

<div id="message">HTMLで書いてます</div>
<div class="box">boxクラスです</div>

<script src="jquery.min.js"></script>
<script>
  $('div').css('background-color', '#fcc');
</script>

これにより、HTML内の<div>要素が、ピンク色に変わります。

cssメソッドは、次のような書式で利用できます。

要素.css(プロパティ名, 値);

filterメソッドで対象を絞る

ここで、jQueryには「filter」というメソッドで対象を絞ることができます。次のように変更しましょう。

$('div').filter('.box').css('background-color', '#fcc');

こうすると、<div>の中でも、クラス属性が「box」のものだけに絞ることができます。

addで付け足す

逆に、要素を後から足すこともできます。次のようにしてみましょう。

$('.box').add('#message').css('background-color', '#fcc');

最初はboxクラスの要素しか対象ではなかったのが、後から「add」で付け足すことで、2つの要素を対象としました。

nextで次の要素を指定する

次のようにしていきましょう。

$('#message').next().css('background-color', '#fcc');

これにより、IDがmessageの要素の「次」の要素が対象になります。

この他にもさまざまなメソッドがあり、要素間を移動したり、広げたり縮めたリが可能です。

メソッドチェーンとの組み合わせて便利に活用

Traversingの機能は、これだけで使うなら単にセレクターを工夫すればよいだけなので、あまり利用する価値がありません。しかし、もう1つjQueryの機能である「メソッドチェーン」と組み合わせると、非常に便利に活用できます。

例えば、次の記述を見ていきましょう。

$('div').filter('.box').css('background-color', '#fcc');

この時filterも、cssもいずれも「メソッド」です。つまり、メソッドが繋がっています。jQueryではこのように、ある要素に対してメソッドを次々に繋げることができます。例えば、次のように記述してみましょう。

$('div').filter('.box').html('★').css('background-color', '#fcc');

htmlは内容を変化させるメソッドであるため、ここではboxクラスの要素内のHTMLが書き換わり、その後メソッドチェーンで背景色がピンクに変わります。

このように、複数の内容を一気に行うことができるのです。

ここで、Traversingを組み合わせるとさらに便利になります。次のようにしてみましょう。

$('div').css('margin-top', '20px')
    .filter('.box').html('★').css('background-color', '#fcc');

この場合、最初にdiv要素全体の上の余白を変更しています。その後、filterメソッドを使って要素を絞って、boxクラスの要素のみHTMLやCSSを変化させています。

このように、あるまとまりの処理を、要素を行き来しながら一気に済ませてしまえるのがjQueryの便利な機能です。メソッドチェーンを使いこなすようになると、非常にスムーズにプログラムを作成することができます。

なお、メソッドチェーンを使う時には、対象が変わるところなどで改行を適宜入れてあげるとプログラムが見やすくなるので、このあたりも気をつけていくと良いでしょう。