【JS・jQuery】jQueryで重要なthis・スコープについてまとめました。

jQueryを学び始めたけど、『this』の使い方が分からない。

では『this』の使い方と、大切なスコープという概念も合わせて

説明していきますね。

Twitterでは毎日の学習過程を記録・発信しているのでよかったらチェックしてみてください！

また、僕が初案件を獲得するまでの過程をまとめたのでこちらもよかったらどうぞ

https://tatsuuublog.com/hatsuanken/

本題ですが、今回は自分自身がjQueryの勉強を始めて理解に時間がかかった『this』について

わかりやすくまとめてみました。

僕と同じ様に理解に苦しんでいる人に向けて分かりやすく説明していきます

また、jQueryを使う上で大事なスコープという概念についても説明していきます。

流れとしては

『this』の定義・使い方、使うタイミング・使うメリットという流れで説明していきます。

それでは、いきましょう。

そもそも『this』とは？

JavaScriptには『オブジェクト』、『変数』、『配列』この3つのデータを格納できる

入れ物があります。（今回はこの3つの説明は省きます）

それに対して『this』は特別な入れ物です。

どうゆう風に特別かというと、thisは指定してデータを格納する事はできず、

『任意のデータを自動的に取得して格納』する事ができる特別な入れ物です

言葉では分かり辛いので例を見て理解しましょう

thisの使用例

ある程度の定義はわかったと思うので、実際に例を見ていきましょう

<body>
  <div class="page_main">
    <div id="content">
      <div class="text">thisの使い方</div>
   </div>
  </div>
</body>

HTMLとCSSに簡単なコードを書いてデモページを作りました

マウスがホバーしたら色が変わって、離したら戻るという記述を例に『this』の使い方を見ていきます

$(function(){
  $('#content').on('mouseover',function(){
    $('#content').css('color','blue');
  });
  $('#content').on('mouseout',function(){
    $('#content').css('color','black');
  });
});

jQueryでこのように書くと以下の動きになります。

これをthisを使って書き換えると以下の様になります。

$(function(){
  $('#content').on('mouseover',function(){
    $(this).css('color','blue');
  });
  $('#content').on('mouseout',function(){
    $(this).css('color','black');
  });
});

このように書くと、#contentをホバーした時に『this』に#contentが格納された状態になります。

記述量を減らす事ができるので便利ですね

しかし、これだけだと『this』を使うメリットがあまり伝わらないので、解説していきます。

thisを使うメリット・タイミング

次にthisを使うメリットを紹介していきます

それを理解できれば使うタイミングもわかるはずです。

では例を見ていきましょう。

<body>
  <header>
    <div class="header_text">header LOGO</div>
  </header>

  <div class="page_main">
    <div id="content">
      <div class="text">thisの使い方</div>
   </div>
  </div>
</body>

もう1つホバーアクションを付けたい要素を作りました

『this』を使わずに書くと、こうなります

$(function(){
  $('header, #content').on('mouseover',function(){
    $('header, #content').css('color','blue');
  });
  $('header, #content').on('mouseout',function(){
    $('header, #content').css('color','black');
  });
});

一見間違っていないようですが、見てみると

このようにどちらかにホバーした時に、両方動作してしまいます。

ホバーした方だけにしたい場合に『this』を使います

$(function(){
  $('header, #content').on('mouseover',function(){
    $(this).css('color','blue');
  });
  $('header, #content').on('mouseout',function(){
    $(this).css('color','black');
  });
});

これで見てみましょう

この様にできました。

これは、ホバーした要素が『this』に格納されて動作しています。

先ほど説明した様に、『任意のデータを自動的に取得して格納』する事で可能にしています。

ほかにも『this』を使う事でメリットはいくつかあります

・処理速度が向上する

・内部でのコードを使い回ししやすい

『this』をどんどん使っていきましょう！

jQueryを使ってハンバーガーメニューを実装する方法も紹介しているので

興味がある方はよかったらどうぞ〜

スコープについて

最後にスコープについて説明していきます。

スコープは簡単にいうと、変数や関数を利用できる範囲のことです

言ってしまえばこれだけですが、例を見て説明していきます。

var global = 'aaa';　　　全ての関数の外で定義したので、全ての関数で使用できる

function a(){
  var local_a = 'local_aaa';　　　
  global; 　　使用できる
  local_a;　　この関数内で定義したので使用できる
  local_b;　　この記述箇所よりも後に入れ子内で定義されたので使用できない

  function b(){
    var local_b = 'local_bbb';　
    global; 　　使用できる
    local_a;　　定義した関数内にいるので使用できる
    local_b;　　使用できる。
  }
}

スコープは大切な概念なので、覚えておきましょう。

簡単なので一回見ておけば平気ですね！

まとめ

最後まで見ていただきありがとうございます。

今回は【JS・jQuery】を使用する上で重要な『this』と『スコープ』についてまとめました

これからも学んだ事を更新していくので、一緒に勉強がんばりましょう！

Twitterでは毎日の学習過程を記録・発信しているのでよかったらフォローすると喜びます

たつき（@tatsuuu_227）