Javascriptの変数とデータ型

変数の宣言と代入

プログラミング言語には、文字列や数値などのデータに名前を付けることで、繰り返し利用できるようにする 変数 という機能があります。

Javascriptでは、変数を次のように使います。

var text = 'Javascriptを勉強中です。';

この１行は

• text という変数を 宣言 して、使えるようにせよ。
• text に「Javascriptを勉強中です。」という文字列データを 代入 せよ。

という２つの命令を同時に行なっています。 これをもし２つの命令文に分けるとすれば

var text; // 宣言
text = 'Javascriptを勉強中です。'; // 代入

このように書けます。一度宣言した変数は、var キーワードなしで使えるようになります。
なお、 = という記号はプログラミングでは「代入演算子」といって、右辺の値を左辺の変数に代入するのに使います。算数のように左辺と右辺が等しい「イコール」という意味ではありませんので注意して下さい。イコールと同じ意味を表すのは、比較演算子 == を使います。演算子については次の章で詳しく学びます。

また変数には好きな名前をつけることができます。ただし、次のルールがあります。

• 半角英数字と $ と _ が使える
• 数字から始まる名前はつけられない
• 予約後は使えない

// OK
var $title;
var _title;
var TITLE;
var title_1;
var タイトル;

// NG
var 1_title;
var for;
var if;
var var;

日本語も使えますが、全角文字列はプログラミングでは扱いにくく混乱の元となるため、お薦めしません。

予約後とはJavascriptの構文として意味をもつキーワードのことです。

break, case, catch, continue,
debugger, default, delete, do,
else, finally, for, function,
if, in, instanceof, new, return,
switch, this, throw, try, typeof,
var, void, while, with, let, const

var はもう古い？

ところで、変数の宣言にはこれまで var をというキーワードを用いてきました。実はプログラムの規模が大きくなってくると、var は意図しない動作を作りやすいという問題があります。最近のバージョンのJavascript（ES6以降）では、この問題を解決する let や const というキーワードが登場しました。

ただ、本コースは体験入門でありプログラムもほんの小さな規模なため、var を使うことによる問題は特に起こりません。引き続き var を使用していきますが、一般的にはやがて var は使われなくなっていくでしょう。

今後本格的にJavascriptを学んでいくことになったら、 let や const についてもしっかりと習得するようにして下さい。

変数は中身の値を変えられる

変数とは文字通り中身の値を「変える」ことができます。
main.jsに次のように書いて、プログラムを実行してみましょう。

var text = 'Javascriptを勉強中です。';
console.log(text);
text = 'Javascriptの勉強を中断します。';
console.log(text);

２行目も４行目も、同じ text 変数をコンソールに出力したにも関わらず、次のように異なる結果となりました。

Javascriptを勉強中です。
Javascriptの勉強を中断します。

３行目で text 変数の値が書き換えられてことがわかると思います。このことを 再代入 といいます。

データ型

プログラムが扱うデータには「型」というものが存在します。人間の見た目には、データは「出力された結果」くらいしかわかりません。しかしコンピュータは必ずデータの型を分類しながら、その受け渡しや出力をしたり、あるいは保存をするなどの処理をしています。

たとえば 3 や 5 というデータがあるとします。コンピュータはこれを「数値」なのか「文字」なのかを明確に区別して扱います。

var number = 3;
var text = '5';
console.log(number + number);
console.log(text + text);

'' や "" で囲った中身は文字列として扱われるのでしたよね。したがって上記コードではnumber変数の値は「数値の3」が入っており、text変数の値は「文字列の5」が入っています。

3 行目では数値であるnumber同士の足し算、4 行目では文字列であるtext同士の足し算を行なって、それぞれ結果を出力しています。

↓実行結果

6
55

数値の 3 + 3 が 6 であるのはわかります。 文字列同士の足し算である '5' + '5' が 55 になるのが面白いですね。実はJavascriptでは、文字列同士を + でつなぐと文字を連結することが出来るのです。

var lang = 'Javascript';
var action = 'を勉強中です。';
console.log(lang + action);

↓ 実行結果

Javascriptを勉強中です。

つまり

var text = '5';
console.log(text + text);

は文字列 5 と文字列 5 がくっついたものである「55」という文字列が出力されたのでした。

それでは次の例はどうでしょう。

var number = 3;
var text = '5';
console.log(number + text);

↓ 実行結果

35

数値と文字列の足し算はできません。この出力結果が 35 となったことからも分かる通り、Javascriptはこのコードを「文字列同士の連結」として扱っています。

これはJavascriptの「暗黙的な型変換」という機能が働いてしまったためです。

このようにデータの型が異なる者同士を扱う場合には注意が必要です。プログラムが勝手に型変換を行なってしまい、本来期待している結果にならなければ、それはバグの元となりかねません。

型を適切に扱うことがプログラミングではとても重要になります。

型変換を明示的に行う

先ほどのコードでもし、純粋に 3 + 5 の数値計算をさせたいにも関わらず、一方の型が文字列の数字として変数に保持されてしまっている場合、どのような解決方法があるでしょうか。

var number = 3;
var text = '5';
console.log(number + parseInt(text));

3行目の parseInt(text) に注目して下さい。

parseInt()というのはJavascriptが持っている機能（組み込み関数）のひとつで、 () の中にあるデータを強制的に整数に変換してくれます。

文字列の「'5'」は、parseInt()を使うと数値の「5」に変換可能なので、これでようやく数値同士の足し算が出来るようになりました。

↓実行結果

8

さまざまデータの型

さて、ここまでは「文字列」と「数値」という２つのデータ型しか扱ってきませんでしたが、Javascriptには他にもさまざまな型があります。

このようないろんな型があり、プログラムはデータの値だけでなく型まで明確に区別している、ということがわかってもらえたでしょうか。

まとめ

この章の学習はここまでです。Javascriptのデータ型についてもっと正確に説明するとしたら、オブジェクト型とプリミティブ型、リテラルなどについても言及する必要があります。しかし本コースは体験入門なのであまり深追いはしません。興味のある方はぜひご自身でも検索したり書籍を読んで、いろいろと学んでみて下さい。