JavaScriptでthisを理解する：関数へのパラメータ渡しと実用的な使い方ガイド｜DAD UNION

JavaScript開発者なら誰しもが一度は悩まされるthisキーワード。今日は、thisをより深く理解し、実際のコーディングに活かすための一例をご紹介します。具体的には、クリックしたボタンの兄弟要素のテキストをalertメッセージで表示するシンプルながらも実践的な使用法を見ていきましょう。

Contents

スタイル設定:見た目も大切に
HTML構造:thisを使う準備
JavaScript:thisを活用する
実際に動かしてみよう:デモページ
まとめ:thisの威力を実感

スタイル設定:見た目も大切に

まずは基本的なCSSで、ボタンエリア（.clkarea）の見た目を整えます。この部分はご自身のサイトデザインに合わせて調整してください。

<style>
body {
  margin: 0;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 2em;
  padding: 30px 0;
}
.clkarea{
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  border: solid 1px #000;
  color: #ffffff;
  width: 300px;
  height: 60px;
  border-radius: 15px;
  margin: 0 auto 60px auto;
  text-align: center;
  background-color: #000000;
  line-height: 60px;
}
</style>

HTML構造:thisを使う準備

次に、HTMLを用意します。ここでは、クリック対象となるボタンエリア（class=”clkarea”）と、その兄弟要素（class=”nextarea”）を設定します。この構造が、JavaScriptでthisを用いる際の基盤となります。

<h1>JavaScriptのthisをパラメータとして関数に渡し、<br>クリックしたボタンの兄弟要素のテキストをalertメッセージで表示</h1>

<div class="clkarea">
  ココをクリック
</div>

<div class="nextarea">
  上記ボタンをクリックするとこのエリアのテキストをalertメッセージで表示します。
</div>

JavaScript:thisを活用する

ここが肝心です。jQueryを使用して、クリックイベントを捕捉し、thisを活用します。thisを使うことで、クリックされた要素に関連する動作を簡単に制御できます。

jquery-2.1.4.min.jsファイルを読み込みます。ボタンエリア（.clkarea）をクリックするとclikget()関数にthis（クリックボタンエリア情報）をパラメータとして渡します。clikget()関数内ではパラメータとして渡されたthis（evet）を利用し「クリックエリアのテキストをconsole.logで出力」と「クリックしたボタンの兄弟要素のテキストをalertメッセージで表示」してます。

<script src="jquery-2.1.4.min.js"></script>
<script>
$('.clkarea').click(function() {
    clikget(this);
});

function clikget(event) {
//  console.log(event);
  console.log(event.textContent); //クリックエリアのテキストをconsole.logで出力
  alert($("."+event.className).next().text());  //クリックしたボタンの兄弟要素のテキストをalertメッセージで表示
}
</script>