JavaScript【 変数 】 ~ データの入れ物

colmun_main6366

JavaScriptでも、他のプログラミング言語と同様に変数を使います。
変数は、名前付きの入れ物のようなイメージで、その中に数値や文字列などの値を入れて使用します。
今回は、JavaScriptの変数について紹介したいと思います。

目次

 1.変数とは
 2.変数の名前
 3.変数の宣言と代入
 4.変数の使い方
 5.定数

1.変数とは

変数は、データを入れる入れ物で、その中に数値や文字列などのデータを入れて使用します。

変数は、ユーザーが自由に定義して使用します。

そして、変数には、数値や文字列、ブール型データ(true と false)など、様々なデータを代入することができます。

次の2つのサンプルは、どちらも「こんにちは!」というポップアップメッセージ表示するためのソースコードです。

alert("こんにちは!");
var str = "こんにちは!";
alert(str);

上のサンプルは、alert() メソッドの引数に「こんにちは!」というリテラル(定数値)が入っているので、 メッセージボックスには「こんにちは!」がそのまま表示されます。

下のサンプルは、変数strを宣言して、その値に「こんにちは!」というリテラルを代入して、変数strを表示させています。
その結果、メッセージボックスには、「str」という変数の名前ではなく、「こんにちは!」という変数strの中身が表示されるという仕組みです。

変数は、データを入れるための入れ物なので、変数の名前そのものが表に出ることはありません。

▲目次へ戻る

2.変数の名前

プログラムを実行する際に、変数名そのものは特に重要ではありませんが、変数に名前を付ける際には、次のようなルールがあります。


●変数名は、半角の英数字及びアンダーバー( _ )を使用して任意に命名する
●変数名は、先頭文字を数字にすることができない
●変数名に、予約語(for、function、if、new、return 他)は使えない
●変数名に、定義済みの変数と同じ名前は使えない

▲目次へ戻る

3.変数の宣言と代入

変数は、使用する前に宣言をます。
varの後ろに半角スペースを挟んで変数の名前を書きます。

変数の宣言は、var を冠して次のように記述します。

var str;

変数は、データを入れる入れ物で、宣言はこの入れ物を用意するイメージです。

変数を宣言したら、変数にデータを入れて使用します。

str = "こんにちは!";

変数を宣言することによって用意された str という名前の入れ物に、「こんにちは!」という文字列のデータを入れています。
数学ではイコール(=)は等しいという意味ですが、プログラム言語では「右辺のデータを、左辺に入れる」という意味になります。
イコール(=)を使って変数にデータを入れることを、代入といいます。

変数の宣言とデータの代入とを、次のように同時に行うこともできます。

var str = "こんにちは!";

▲目次へ戻る

4.変数の使い方

変数を使用する際には、例えば次のような書き方をします。

var str1 = "田中";
var str2 = "こんにちは!";

alert(str1 + "さん、" + str2);

変数は、引用符(ダブルコーテーション、又はシングルコーテーション)なしで記述します。
そして、プラス(+)を使っ文字列を連結します。
上記のソースコードを実行すると、「田中さん、こんにちは!」というポップアップメッセージが表示されます。

変数は、中身のデータを変更して使用することを前提にしています。
同じ変数に、別のデータを代入すると、新しく代入されたデータがその変数のデータとして上書きされます。

var str1 = "田中";
var str2 = "こんにちは!";

str2 = "さようなら!";

alert(str1 + "さん、" + str2);

変数str2は、「こんにちは!」というデータから、「さようなら!」というデータに上書きされます。
ですので、上記のソースコードを実行すると、「田中さん、さようなら!」というポップアップメッセージが表示されます。

▲目次へ戻る

5.定数

変数に対して、定数というものもあります。
データの入れ物である変数に対して、定数はデータそのもののイメージです。

定数には次の3種類あります。

文字列定数 “こんにちは!”など、引用符(ダブルコーテーション、又はシングルコーテーション)で囲まれたリテラル(定数値)
どんな文字でも使用できる
ブール値 true と false
引用符(ダブルコーテーション、又はシングルコーテーション)は不要
例:bool = false;
数値 数値も引用符(ダブルコーテーション、又はシングルコーテーション)は不要
例:num = 100;
(仮にこれを引用符で囲むと、数値ではなく文字列として扱われる)

JavaScriptでは、ダブルコーテーション(” “)とシングルコーテーション(’ ‘)に機能上の違いはありません。
文字列定数を記述する場合は、どちらでも使用できます。

str = "こんにちは!";
str = 'こんにちは!';

但し、引用符の中で更に引用符が必要になる場合は注意が必要です。

<input type="button" onClick="alert('こんにちは!')">

ここでは onClick 属性の値をダブルコーテーション(” “)で囲んでいますが、 その中の alert() メソッドの引数が文字列定数を必要とするため、それをシングルコーテーション(’ ‘)で囲んでいます。

仮に
「<input type=”button” onClick=”alert(“こんにちは!”)”>」
のように記述してしまうと、ブラウザが「onClick=”alert(“」で終了しているものと解釈し、エラーとなってしまいます。

これを回避するために、ダブルコーテーション(” “)の中では引用符をシングルコーテーション(’ ‘)に、 逆にシングルコーテーション(’ ‘)の中では引用符をダブルコーテーション(” “)にして区別する必要があります。

また、
「<input type=”button” onClick=”alert(‘田中さん “こんにちは”!’)”>」
のような記述もできません。
ブラウザに「onClick=”alert(‘田中さん “」で終了しているものとみなされてしまいます。

この問題を解決するためには、引用符を伴う文字列定数を変数の中に入れておく方法があります。

<script type="text/javascript">
<!--
    var str='田中さん "こんにちは"!';

    function showMsg() {
        alert(str);
    }
//-->
</script>

<form>
    <input type="button" value="click" onClick="showMsg()">
</form>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です