いつも使うテキストや数値、計算式、よく指定する要素などを変数に入れて使い回すと、パフォーマンスにも優れ、メンテナンス性も良くなります。
ここではjQueryにおける変数の基本的な説明や、さまざまな使い方をご説明します。
変数の基本
宣言と代入
変数の使い方を簡単にいうと、入れ物を作り名前を付けて、その入れ物に値を入れます。
変数という入れ物を作ることを宣言といいます。
変数に値を入れることを代入といいます。
また、このように宣言と同時に値を代入することを初期化といいます。
使い方
まずは変数を宣言し、値を代入してみましょう。
変数の宣言にはvarを使います。
jQuery
|
1 2 3 4 5 |
// 値を変数に代入 var test = 'てすと'; // 変数をコンソールで表示 console.log(test); |
結果（コンソール）
以下のようにコンソールログに代入された値が表示されます。
てすと
構文
変数は以下のように使います。
var 変数名 = 値
varで変数を宣言し、=（イコール）の右辺には代入したい値を入力します。
未宣言のグローバル変数
例えば
x = 42のように、単に変数に値を代入することもできます。ただ、未宣言のグローバル変数は、よく予期しない動作を引き起こします。ですから、未宣言のグローバル変数を使用することはやめた方がいいでしょう。
上記のとおり、変数はvarで宣言して使用するのがよいでしょう。
jQueryオブジェクトには$マークを付ける
以下のようなjQueryオブジェクトを変数に代入する際は、分かりやすくするために変数名に$マークを付けるのが一般的です。
$name = $('#name');変数名に$マークが付いてたら、jQueryのセレクタの部分が代入されているんだなと分かるため、メソッドを繋いだりと適した処理をスムーズに行うことができます。
変数の型を調べる
変数に代入された値の型を調べるにはjQuery.type()を使います。
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var text = '文字列'; var age = 68; var fruits = ['apple', 'orange', 'grape']; var adult = true; var greeting = function() { console.log('hello'); } // 変数の型をコンソールに表示 console.log($.type(text)); console.log($.type(age)); console.log($.type(fruits)); console.log($.type(greeting)); console.log($.type(adult)); |
結果（コンソール）
以下のようにコンソールログに変数の型が表示されます。
string
number
array
function
boolean
ちなみに上記型は以下のようになります。
- string => 文字列
- number => 整数
- array => 配列
- function => 関数
- boolean => 真偽値
$.type()ですぐに型が調べられるので便利ですね。
いろいろな使い方
変数の値を上書き
すでに値が代入された変数に別の値を代入すると、上書きされます。
jQuery
|
1 2 3 4 5 6 7 8 |
// 値を変数に代入 var test = 'てすと'; // 別の値を代入 test = 'TEST'; // 変数をコンソールで表示 console.log(test); |
結果（コンソール）
以下のようにコンソールログに代入された値が表示されます。
TEST
すでに宣言された変数に別の値を代入する際はvarは必要ありません。
複数の変数を代入
一度に複数の変数を宣言することもできます。
変数を,（カンマ）区切りで繋げば複数の変数を一括で宣言できます。
jQuery
|
1 2 3 4 5 6 7 8 9 |
// 値を変数に代入 var fruit01 = 'apple', fruit02 = 'orange', fruit03 = 'grape'; // 変数をコンソールで表示 console.log(fruit01); console.log(fruit02); console.log(fruit03); |
結果（コンソール）
以下のようにコンソールログに代入された値が表示されます。
apple
orange
grape
配列を代入
変数には配列も代入できます。
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
// 配列を変数に代入 var cities = ['新潟', '長岡', '上越']; // 配列の中身を一つずつ処理 $.each(cities, function(index, val) { // 変数をコンソールで表示 console.log(val); }); |
結果（コンソール）
以下のように配列に代入された値が表示されます。
新潟
長岡
上越
$.each()の使い方は以下記事にてご紹介しています。
セレクタに変数を使う
jQueryの$(この部分)に変数を使うこともできます。
以下のサンプルではHTMLのテキストを書き換えます。
HTML
|
1 |
<p id="test_id">ただのテキスト</p> |
jQuery
|
1 2 3 4 5 |
// 書き換えたいHTMLのIDを変数に代入 var id = 'test_id'; // 変数をセレクタに設定し、HTMLのテキストを書き換える var $elm = $('#' + id).text('テストテキスト'); |
結果（HTML）
以下のようにHTMLのテキストが書き換わります。
テストテキスト
text()の使い方は以下記事にてご紹介しています。
文字列の一部に変数を使う
文字列の途中に変数の値を混ぜることもできます。
以下サンプルでは2パターンの方法を説明します。
jQuery
|
1 2 3 4 5 6 |
// 名前を変数に代入 var name = '田中'; // 文字列の中で変数を使う console.log('1.こんにちは！' + name + 'さん'); console.log(`2.こんばんは。${name}さん`); |
結果（コンソール）
以下のようにコンソールログには、名前が含まれたテキストが表示されます。
1.こんにちは！田中さん
2.こんばんは。田中さん
1.はよく使われる構文です。
文字列は''（シングルもしくはダブルクォート）で区切り、+（プラス）で変数と繋げます。
‘文字列’ + 変数 + ‘文字列’
2.はテンプレートリテラルを使った方法で、IEなどの古いブラウザでなければ対応しています。
文字列と変数をクォートで区切る必要もないため便利ですが、引用符は''（シングルもしくはダブルクォート）ではなく｀｀（バッククォート）となりますので注意してください。
｀文字列 ${ 変数 }｀
