JavaScript

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

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

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

まずは基本的な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>

実際に動かしてみよう:デモページ

理論だけでなく、実際に動かしてみることが理解を深める近道です。以下のリンクからデモページを試してみてください。実際にコードがどのように機能するかを確認できます。

JavaScriptのthisをパラメータとして関数に渡しクリックしたボタンの兄弟要素のテキストをalertメッセージで表示するデモページ

まとめ:thisの威力を実感

この例を通じて、JavaScriptのthisがいかに強力であるかがお分かりいただけたかと思います。コードを簡潔に保ちながら、動的な機能を実装する際にthisは欠かせないツールです。ぜひあなたのプロジェクトでも、これらのテクニックを活用してみてください。

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。