こんにちは！フリーランスの桃太郎です。
プログラミングを学ぶ際に最初によく出てくる内容の一つが今回解説する”変数”かと思います。
様々なプログラミング言語で目にする変数は、当然jQueryにおいても大変重要な内容です。
そこで、この記事では
・変数とは？
・変数の宣言、代入、表示方法
という基礎的な内容から、
・変数のスコープ（有効範囲）について
など応用的な内容まで解説していきます。
jQueryの変数ついて正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します！
変数の基本
変数とは
まずはそもそも変数とはどの様なものでしょうか？
例えばあるショッピングサイトのプログラムの中で、消費税を含めた商品の金額を様々な箇所で計算する処理があるとします。
消費税というのは時代によってその数字が変化します。
もし、その消費税が変わるたびに、プログラムの様々な箇所に書いてある数値を置き換えなければいけないとなると大変な手間がかかります。
その様なとき、消費税の数値が入った入れ物を用意します。
そして、プログラムの他の箇所ではその入れ物を使います。
そうすることで消費税が変わるたびに変更しなければならない箇所は１箇所で済むというメリットが得られます。
この入れ物にあたるものが変数です。
次章から具体的なサンプルコードなどを見ながら、変数を学んでいきましょう。
変数の宣言/代入する方法
変数をプログラムの中で使うにはまず、プログラムに「今から変数を使います！」と宣言する必要があります。
変数の宣言そして、代入方法は以下の通りです。
// 数値や文字列などを入れるための変数を宣言、代入 var tax = 8; // jQueryオブジェクトを入れるための変数を宣言、代入 // $は必須では無いが、通常の変数宣言と区別するため、この様に用いることが多い var $h1 = $(h1);
jQueryでもJavaScriptの変数の宣言と同様に、文字列や数値（例では0.08)などを入れる変数はvarをつけることで宣言することができます。
そして、jQueryオブジェクト（例ではh1タグの要素)を代入する変数を宣言する場合もvarを使うことには変わりありませんが、変数名は慣習的に$(ドルマーク）を付けます。
この$を付ける理由の一つとしては、プログラムを他の開発者が見たときに、この変数にはjQueryオブジェクトが入っているということが直感的に理解できるメリットがあるためです。
変数の宣言の仕方は他にもいくつかあります。
var tax; //taxという変数を宣言し、値は代入しない。 var price,tax //priceとtaxという変数を同時に宣言 var category1,category2 = "non-brand"; //2つの変数をまとめて宣言し、non-brandという値を両方に代入
これらの変数の宣言方法についても併せて覚えておいてください。
変数の中身を表示する方法
では、次にこの変数を実際に使用したり、その中身を表示する方法をみていくことにしましょう。
まずはサンプルをご覧ください。
[HTML]
<p>男性用バック 1300円</p> <p>女性用バック 1500円</p>
[jQuery]
var tax = 8;
var $taxDisplay = $('p');
$taxDisplay.append('(消費税<span>' + tax + '</span>%込)');
実行結果
[HTML]
<p>男性用バック 1300円<span>(消費税8%込)</span></p> 女性用バック 1500円<span>(消費税8%込)</span></p>
上記のサンプル内で消費税の税率8%をtaxという変数に代入し、その変数を3行目で使用しています。
また、pタグの要素をjQueryオブジェクトとして$taxDisplayという名前の変数に代入しています。
３行目にてその変数にてappendメソッド（引数の要素を追加する機能をもつ）を呼び出し、処理を行なっています。
そうすることで実行結果では、taxが8という数字として表示されていることが確認できるかと思います。
今回のプログラムでは変数は限られた箇所でしか使っていませんが、これが大規模なプログラムになると様々な箇所で消費税の数値が必要になる可能性もあります。
その様なときに、taxという変数を宣言し、他の箇所はその変数を用いて処理を書いておきます。
そうすることで、消費税が変わった時も、変数を宣言した箇所だけ数値を変えるだけで変更手続きが完了します。
これが変数を用いる最大のメリットです。
変数の命名の仕方
では次に、その変数の命名の仕方について見ていくことにしましょう。
変数の名前は、その変数名を見ただけで、中身に何が入っているか想像がつく名前が望ましいです。
例えば、年齢を代入する予定の変数にnameという名前の変数を割り当てるのは、余計な混乱を招くだけです。（もちろん、ageなどの変数名が望ましいです。）
そして、jQueryはJavaScriptのライブラリ（便利な機能がまとまったプログラム群）であるので、JavaScriptの「変数には予約語を使用することができない」というルールが同じく適用されます。
予約語とはJavaScriptの言語において特別な意味で使用することがあらかじめ決まっている語句のことです。
例えば、先ほど変数の宣言に用いたvarも予約語です。
これらを変数名に使うと、コンピュータが変数名なのか、変数の宣言の為の語句なのかが判断がつきません。
その為、その様な予約語は変数名に使用することができないのです。
予約語の一例は以下の通りです。
for / var / if / else / this / while / true / false など
変数のスコープ（有効範囲）について
それでは、最後に少し応用的な内容として、変数のスコープについて学習しましょう。
変数のスコープとは、その変数が参照できる範囲のことです。
先ほどまで変数を宣言する際に、varをつけるというお話をしました。
しかし実はvarをつけなくても変数を宣言することが可能なのです。
そして、varをつけないで宣言された変数はグローバル変数といい、そのプログラム全体で有効な変数となります。
逆にこれまで解説してきましたvarをつける変数はローカル変数といい、限られた範囲でその変数を使うことができるものとなります。
この辺りの詳しい解説は以下のJavaScriptの記事が参考になりますのでぜひ確認して見てください。
初学者のうちは、変数を宣言する際は基本ローカル変数を使用する方がプログラムの思わぬバグを生み出すことが少なくなるのでオススメです。
まとめ
本記事ではjQueryの変数についてご紹介しました。
jQueryの変数を宣言する方法はvarを用いて、文字列や数値ならその後に変数名、jQueryオブジェクトなら$マークをつけた変数名を宣言し、値を代入するのでした。
また、変数名には予約語が使えないので注意する必要がありました。
もし今後、変数に関して迷うことがあれば、ぜひこの記事を思い出して下さいね。
