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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. 変数とは

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

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

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

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

alert("こんにちは！");

let str = "こんにちは！";
alert(str);

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

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

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

▲目次へ戻る

2. 変数の名前

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

▲目次へ戻る

3. 変数の宣言と代入

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

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

let str;

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

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

str = "こんにちは！";

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

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

let str = "こんにちは！";

▲目次へ戻る

4. 変数の使い方

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

let str1 = "田中";
let str2 = "こんにちは！";

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

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

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

let str1 = "田中";
let str2 = "こんにちは！";

str2 = "さようなら！";

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

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

▲目次へ戻る

5. 定数

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

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

文字列定数	“こんにちは！”など、引用符（ダブルコーテーション、又はシングルコーテーション）で囲まれたリテラル（定数値） どんな文字でも使用できる
ブール値	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">
    const str='田中さん "こんにちは"!';

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

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

▲目次へ戻る