【jQuery入門】thisの使い方まとめ

こんにちは！フリーランスの桃太郎です。

他のプログラマーが書いたjQueryやJavaScriptのプログラムの中に”this”というキーワードを見かけ、何だこれは？と悩む初学者の方は多いかと思います。

そこでこの記事では

という基礎的な内容から、

など応用的な内容についても解説していきます。jQueryのthisについて正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します！

そもそもthisとは

thisは日本語訳では”これ”、つまり何かを指し示す際に使われますが、プログラムにおいても様々なものを指し示す変数として使うことができます。

具体的には、例えば繰り返し処理の中で現在処理されている対象を示す為に利用したり、画面のチェクボックスににてユーザが選択した情報を取得する為にthisを使うこともできます。文章だけでは分かりづらいかと思いますので、実際のサンプルコードなどと併せて次章以降にて解説していきます。

thisの基本的な使い方

まずは以下のサンプルコードを確認してください。

[HTML]

<h2>
居住地域
</h2>
<ol></ol>

[jQuery]

array = ["関東", "関西", "それ以外のエリア"];
$.each(array, function() {
  $('ol').append("<li>" + this + "</li>");
});

実行結果
[HTML]

<h2>
居住地域
</h2>
<ol>
  <li>関東</li>
  <li>関西</li>
  <li>それ以外のエリア</li>
</ol>

jQueryのコードではeachメソッドを使い繰り返し処理を行なっており、その繰り返される要素がarray(配列）で定義されている中身の一つ一つです。

そして、繰り返し処理の中で使われているthisには現在処理されている要素が繰り返しの都度入れ替わり入っています。上記のように繰り返し処理の中で使用されるケースの他に、クリックされた要素を取得する場合などのケースでも使用されます。

次章ではそのケースについてみていくことにしましょう。

thisにてidやclassを取得する方法

まずは具体的な例として、ユーザが選択した年代によって、オススメの健康診断の項目が表示される画面を作るとします。まずはサンプルコードを確認しましょう。

[HTML]

<p class="radio-area">
    <input type="radio" name="age" id="twenty">20代
    <input type="radio" name="age" id="thirty">30代
    <input type="radio" name="age" id="forty">40代
</p>

<p class="simple" style="display: none">簡易検診</p>
<p class="dockhalf" style="display: none">人間ドック日帰り</p>
<p class="dockfull" style="display: none">人間ドック泊まり</p>

[jQuery]

//ラジオボタンをクリックすると処理が行われる
$('input').click(function() {
  // ラジオボタンのID値を取得
  var val = $(this).attr('id');
  // ID値に応じて、表示する内容と非表示にする内容を設定する。
  if(val == "twenty"){
    $('p.simple').show(); //show() 表示
    $('p.dockhalf').hide(); //hide() 非表示
    $('p.dockfull').hide(); 
  }else if(val == "thirty"){
    $('p.simple').hide();
    $('p.dockhalf').show(); 
    $('p.dockfull').hide(); 
  }else if(val == "forty"){
    $('p.simple').hide();
    $('p.dockhalf').hide(); 
    $('p.dockfull').show();  
  }
});

実行結果[20代が選択された場合]

<p class="radio-area">
    <input type="radio" name="age" id="twenty" checked="checked">20代
    <input type="radio" name="age" id="thirty">30代
    <input type="radio" name="age" id="forty">40代
</p>

<p class="simple">簡易検診</p>
<p class="dockhalf" style="display: none">人間ドック日帰り</p>
<p class="dockfull" style="display: none">人間ドック泊まり</p>

複数あるラジオボタンの選択肢にはそれぞれid値(twenty,thirtyなど)が設定されています。そのラジオボタンをユーザが選択した際に、選択された要素のidを var val = $(this).attr(‘id’); にて取得しています。

このようにthisをjQueryオブジェクト$(this)として扱い、attrメソッドの引数にidを指定することでthisのid値を取得することが可能です。

また、もし以下のようにHTMLのinputタグにてclass属性が設定されている場合はattrメソッドの引数に’class’を指定することでclassの値も同様に取得することができますので覚えておいてください。

//HTML
<p class="radio-area">
    <input type="radio" name="age" class="twenty">20代
    <input type="radio" name="age" class="thirty">30代
    <input type="radio" name="age" class="forty">40代
</p>

//jQuery
var val = $(this).attr('class');

thisの親要素/子要素を取得する方法

親要素、子要素とは何か？例えば、以下のHTMLをみてください。

<div>
    <p>20代</p>
    <p>30代</p>
    <p>40代</p>
</div>

上記のHTMLにて<div>は<p>要素の親要素、<p>は<div>要素の子要素になります。これはあるタグで囲まれた中に別のタグが含まれていた場合、その含まれている側は子要素、囲んでいる要素を親要素と定義しています。

では、thisと併せて親要素、子要素の取得する方法とは何かをみていくことにしましょう。

親要素の取得方法

こちらもまずは具体的なサンプルコードを確認してみましょう。

[HTML]

<p class="radio-area">
    <input type="radio" name="age" class="twenty">20代
    <input type="radio" name="age" class="thirty">30代
    <input type="radio" name="age" class="forty">40代
</p>

[jQuery]

//ラジオボタンをクリックすると処理が行われる
$('input').click(function() {
  //クリックした<input>の親要素<p>を罫線で囲う
  $(this).parent().css('border', '1px solid blue');
});

実行結果[ラジオボタンを選択すると全体が青色の罫線で囲まれる]

<input>タグ内の要素をクリックすると親要素である<p>タグに対して青色の罫線が作られる処理です。親要素である<p>タグを取得するために、$(this)の後にparent()メソッドを呼び出しています。

こうすることで、$(this)に格納されている<input>タグ要素の親にあたる<p>タグの要素が取得できます。

子要素の取得方法

次に反対に子要素を取得する方法を確認しましょう。以下のサンプルでは、商品情報をクリックすると価格の箇所が青字に変わる処理を行なっています。

[HTML]

<p>男性用バック：<span>15,000円</span></p>
<p>女性用シューズ：<span>13,000円</span></p>

[jQuery]

$('p').click(function() {
  //クリックした<p>の子要素だけ文字色を赤字にする
  $(this).children().css('color', 'blue');
});

実行結果[テキストをクリックすると価格の箇所が青字になる]

上記サンプルにて、<p>タグが取得できている$(this)にて子要素にあたる<span>を取得するためにchildrenメソッドを呼び出しています。このようにして<span>タグに対してcssメソッドを適用することができます。

まとめ

本記事ではjQueryのthisの使い方についてご紹介しました。thisは繰り返し処理やイベントが発生した要素を取得するために活用できる変数でした。

そして、idやclass属性の値をattrメソッドを使うことで取得できることも学びましたね。thisは使いこなすことができれば、プログラミングをする上でとても有益な手法です。もし今後、thisに関して迷うことがあれば、ぜひこの記事を思い出して下さいね。