jQuery初心者のための書き方講座その4【変数の代入と表示】

.NET開発者のためのブログメディア

jQueryにおいても、ほかのプログラム言語同様に変数を扱うことが多々あります。取得した情報の処理や演算結果をページ内に反映するなど、より複雑な処理を行う上で変数の存在は欠かせません。

PG: jQueryでも変数を使っていろいろ処理したいのですが、扱い方はどうすれば良いですか？

PL: 変数が扱えるようになると、やれることが増えるので使いこなしたいところですね！さっそく見ていきましょう。

変数とは

変数は様々な情報を入れるための箱のような存在で、ページ内にある情報を一時的に保持したり、指定した処理を加えて変更したりするために利用します。例えば、Aという箱の中に情報Bを入れたとして、ほかの情報Cとの差を比較することが可能です。

また、よく使う設定値をコード上にそのまま入力していた場合、修正する際に手間がかかりますが、変数を用いていればその設定値を変えるだけで済みます。

変数の宣言

変数の宣言は「変数の種類＋変数名」で行います。jQueryにおいてはこの宣言子としてconst、let、varの3種類が用意されています。

constは定数を扱う場合に利用し、変数名の後に続いて初期値を設定します。これで指定した変数の中身を書き換えられることなくコード上で利用できます。

letとvarはほぼ同じで、宣言子の後に変数名を指定しますが、初期値を必ずしも指定する必要はありません。またコード上で利用するにあたり、変数の中身を変更することができます。varには同じ変数名を指定するとエラーとして検出できない不具合があり、これを回避するためにletの利用が推奨されています。

変数の代入と表示

変数への代入例を解説します。まず、操作対象となる変数を宣言し、操作したい変数の設定値を入れてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>sample html</title>
</head>
<body>
<ul id="first">
  <div id="second">これはテスト用のページです。</div>
  <div id=".third">このidはピリオドを含んでいます。</div>
</ul>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  // 変数宣言
  let input_text;
  // 「id="second"」のテキストを取得
  input_text = $('#second');
  // 取得したテキストの内容を追記
  input_text.append('テストテスト');
});
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>sample html</title>

</head>

<body>

<div id="second">これはテスト用のページです。</div>

<div id=".third">このidはピリオドを含んでいます。</div>

</ul>

$(function() {

// 変数宣言

let input_text;

// 「id="second"」のテキストを取得

input_text = $('#second');

// 取得したテキストの内容を追記

input_text.append('テストテスト');

});

</script>

</body>

</html>

実行結果
変数の代入実行結果

変数の命名規則

変数の名前を付けるにあたって利用できる文字が決まっています。利用できる文字は、半角英数字と_（アンダースコア）、$（ダラー）です。
変数の初めの1文字は数字以外の文字から始まるものとし、プログラム上で利用される識別子や予約語と被らないものである必要があります。
また、変数の名前は、変数の動作に準じたものにすることが推奨されています。