jQuery変数の有効範囲：スコープ！

今回は、jQueryで使用する変数の有効範囲（スコープ）について、実際にサンプルコードを用いて、詳しく記載していこうと思います。

jQueryで使用する変数、実はVBAやその他のプログラミングなどでも同じように、変数を使用することが多々ございます。そこで、変数の有効範囲であるスコープについて、これも他のプログラミングでも同じような考え方になるので、しっかりと理解しておくことをオススメします。

という事で、それでは今回はッ、

・スコープに合わせて変数を使う！
・ローカル変数とグローバル変数

上記について記載していこうと思います…。

スコープに合わせて変数を使う！

以前にも変数について記載いたしましたが、なぜ変数のコードを冒頭で宣言するのか？これには変数の有効範囲が大きく関係しています。実は変数には、その変数を利用できる有効範囲があります。この有効範囲をスコープといいます。

それではサンプルを記載してみますので、変数のスコープを確認してみます。

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#point”).hover(function(){
var hello = “Hello Worid!”;
var Study = “Study jQuery!”;
$(this).text(hello);
},
function(){
$(this).text(Study);
});
});
</script>
</head>
<body>
・・省略・・
<h2 id=”point”>変数のスコープとは？</h2>
・・省略・・
</body>
</html>

上記のサンプルコードでは、h2の見出しにマウスをのせたときに、helloとStudyという変数を宣言して、文字列を代入しています。そしてtext()メソッドで、h2見出しの中をhelloの値「Hello Worid!」に変更しています。

マウスを外してみると、見出しのテキストは変数Studyの値「Study jQuery!」に変わる？

変数のスコープとは？

マウスを外してみると、見出しのテキストは変数Studyの値「Study jQuery!」が表示されるかというと、変数の有効範囲外のため、表示は変わりません！

上記サンプルは実際にマウスを外してもテキストが変更されません。この記述方法では、varを使って変数Studyを定義しましたが、変数の有効範囲が関係していて、有効範囲外になることから、マウスを外してもテキストが変更されなくなっています。

ローカル変数とグローバル変数

以前、変数はvarを使って宣言すると記載しました。しかしこれには続きがあり、varで宣言した変数の事を、ローカル変数といいます。逆にvarを付けなくても変数を作ることができ、そうして作られた変数をグローバル変数といいます。

そしてこのローカル変数と、グローバル変数は、その有効範囲（スコープ）が異なります。まずはローカル変数のスコープを記載してみます。

サンプルscript<script>
$(function(){
$(“#point”).hover(function(){
var hello = “Hello Worid!”;
var Study = “Study jQuery!”;
$(this).text(hello);
},
function(){
$(this).text(Study);
});
});
</script>

ローカル変数とは、その名のとおり、局所的な変数です。ローカル変数の有効範囲は、その変数が宣言された関数内（functionの中）だけになります（上記コードの黄色い部分）。
そういう訳で、黄色の下の部分のfunctionでいくらStudyを利用しようと思っても、スコープの外なので利用できないという訳になります。

次にグローバル変数のサンプルを記載してみます。

サンプルscript2<script>
$(function(){
$(“#point”).hover(function(){
hello = “Hello Worid!”;————–varナシ
Study = “Study jQuery!”;————–varナシ
$(this).text(hello);
},
function(){
$(this).text(Study);
});
$(“#subpoint”).hover(function(){————別の関数
$(this).text(hello);
});
});
</script>
</head>
<body>
・・省略・・
<h2 id=”point”>変数のスコープとは？</h2>
<h3 id=”subpoint”>ローカル関数とグローバル変数</h3>
・・省略・・
</body>

グローバル変数の宣言は、varを付けないという事ですから、helloとStudy変数はグローバル変数として定義されたことになります。グローバル変数の有効範囲は、プログラム全体に及びます。結果として、他の関数内で呼び出されても利用することができるようになります。

サンプルscript2では、マウスが外れたときに実行される関数内でも、Study変数が利用できます。また、まったく別の関数も記述されていますが、そちらでも変数helloが利用できることを下記にて確認できることと思います。

変数のスコープとは？

ローカル関数とグローバル変数

それではローカル変数は使わないで、グローバル変数を利用したほうが便利だと思うかもしれません。しかし、グローバル変数の有効範囲はプログラム全体です。仮にほかのプログラム内で、意図せず同じ変数名を利用していた場合、そちらの値も変わってしまいます。ですから関数内だけで利用する変数は、ローカル変数を利用することをオススメします。

それではローカル変数のみで、どうやって初めのサンプルHTMLを改善すればイイかを記載してみます。答えは簡単！！変数を宣言する場所を、できるだけ関数全体の上の方に記述するだけです。

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
var hello = “Hello Worid!”;
var Study = “Study jQuery!”;
$(“#point”).hover(function(){
$(this).text(hello);
},
function(){
$(this).text(Study);
});
});
</script>
</head>
<body>
・・省略・・
<h2 id=”point”>変数のスコープとは？</h2>
・・省略・・
</body>
</html>

上記のように上層の関数内でローカル変数として宣言すればOKです。緑色の部分が変数のスコープです。

また、イベントが発生した後でなければ、変数の値を代入出来ない場合も、プログラミングしていくと沢山出てくることと思います。そのような場合でも、冒頭で空の変数を作成しておいて、値の代入は後からする！というのも良く利用されるテクニックになります。

サンプルscript3<script>
$(function(){
var pointX;——空の変数でスコープの確保
var pointY;——空の変数でスコープの確保
$(“#test”).mouseenter(function(e){
pointX = e.pageX;—–イベント発生後値を代入
pointY = e.pageY;—–イベント発生後値を代入
$(this).text(“X軸は” + pointX +”です。Y軸は” + pointY + “です。”);
});
});
</script>

each()メソッドの中のローカル関数

以前記載いたしましたコンタクトフォームのサンプルでは、それぞれのテキストの属性値を下記のようにlabelTextという変数に代入していました。

サンプルeach()$(“.textbox”).each(function(){
var labelText = $(this).val();
・・省略・・
});

each()メソッドは、セレクタで指定した要素に対して「それぞれ」処理をしてくれます。変数名は常に同じlabelTextなのに、どうして変数の値が上書きされず、それぞれの値を維持で来るのでしょうか？ここにはローカル変数のスコープが関係しています。

サンプル1回目$(“.textbox”).each(function(){
var labelText = “お名前”;
});

サンプル2回目$(“.textbox”).each(function(){
var labelText = “メールアドレス”;
});

このように、1回目、2回目でそれぞれ別のfunction(){・・・}を処理します。そしてローカル変数のスコープは、関数内（function内）です。という訳で、同じ変数名の場合でもeach()メソッド内ではそれぞれをまったく別の変数として扱っています。
それでeach()ないで宣言したローカル変数が上書きされない事となります。

という事で、今回はjQuery変数の有効範囲：スコープ！につきまして、サンプルコードを交え記載してみました。

変数を使用する際の有効範囲であるスコープ！この考え方は非常に重要で、jQuery以外の他のプログラミングでも変数を使用する際は、同じような考え方のもと宣言されることが多々ございます。プログラミングとひとことで言いましても、色々な言語が存在しますが、jQueryを一度覚えてから他のプログラミング言語を学習すると、共通要素が多いため、初めてのプログラミング言語の学習よりも、2倍くらいの速度でプログラミング言語を取得できると、個人的には思っています。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。