Ne:Code道場～JavaScript 変数のデータ型の巻～

はじめに

この記事ではJavaScriptの変数のデータ型(ここでは特にプリミティブ型のうちの一部、数値、文字列、undefined、null)について、概要について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、変数のデータ型について理解を深めてゆきましょう。

変数の箱の違いは何に由来するニャ？

例えば、変数xには1が代入され、変数yには2が代入されているとしたら、この2つ変数は、中身は違いますが、別の点では同じカテゴリーに属しているといえます。 そのカテゴリーというのが、「型」です。 変数は代入された値によって、型が決まります。 xとyは共に数値型になります。

数値型の仲間同士でどんなことができるニャ？

数値型の仲間同士だと、「算術演算子」で計算することができます。 算術演算子には、算数などを学んだ時にお馴染みの、「+」「-」から、すこし表記は違いますが、「/（÷）」と「*（×）」があります。

let chip = 100;
　
// 勝ってチップが2倍になったニャ
// 更にボーナスで20チップもついてきたニャ
chip = (chip * 2) + 20;
　
// ペナルティでチップが10減ったニャ
chip = chip - 10;
　
// 2人でチップを分けた場合の一人分のを表示するニャ
console.log(chip / 2);

また、それ以外でも、「%」という、余りを求めるようの算術演算子があります。余りを求める%は「○○の倍数」を求める時に用いると便利です。 数値がとある数の倍数かどうかは、余りが「ゼロ」になるかどうかで判断できますよね。

// 9は3で割り切れるから、0って表示されるニャ
console.log(9 % 3);

先程の例で、剰余で直接、「9 % 3」と書きましたね。 型は変数に備わっているものというより、変数に代入されている値に備わっているものと言えます。算術演算子で変数を用いて計算する際には、変数の箱の中身を取り出して、取り出した値から計算が実施されているのです。

chip = (chip * 2) + 20;
// chipの箱の中身「100」がとりだされたニャ
chip = (100 * 2) + 20;
// 数学と同じルールでカッコの中の計算が優先されたニャ
chip = 200 + 20;
// おお！いつも見慣れた変数に値を代入する式になったニャ
chip = 220;

型は他にどんなのがあるニャ？

例えば、文字列型。ダブルコーテーションかシングルコーテーションで囲った文字を代入すると、文字列型になります。 なので、数字であってもこれらで囲った値は、数字とはみなされず、文字として扱われます。 ダブルコーテーションとシングルコーテーション、どちらを用いても良いですが、特に理由がない限りは統一しておくと良いですね。

// これは数値型になるニャ
let number = 1;
　
// これも数値型ニャ
let minusNumber = -1;
　
// これは中身は数字だけど、ダブルコーテーションで囲っているから文字列型ニャ
let stringNumber = “1”;
　
// これも文字列型ニャ
let string = “文字列型ニャ”;

算術演算子は算術だから、文字列型には関係ないニャ？

先程登場した算術演算子のうち、「+」は文字列型のものにも用いられます。この場合は「結合演算子」と呼ばれ、文字列を繋げる役割を果たします。 同じ記号に複数の役割がついていると、慣れないうちは混乱するかもですが、シンプルにデータ型によって動きが変わってくるという点を抑えておきましょう。

let name = “猫弟子”;
let hobby = “昼寝”;
console.log(“私の名前は、” + name + “ニャ！”); // 私の名前は猫弟子ニャ！
console.log(“私の趣味は、” + hobby  + “ニャ！”); // 私の趣味は昼寝ニャ！

文字列と数値で「+」を使うとどうなるニャ？

数値同士の場合は、足し算。文字列同士の場合は文字を結合。そして文字列と数値の場合は、文字列結合と同じ動きになります。

let name = “猫弟子”;
let sleepTime = 20;
console.log(“私の名前は、” + name + “ニャ！昨日は” + sleepTime + “時間寝たニャ”); // 私の名前は猫弟子ニャ！昨日は20時間寝たニャ！

文字（“ニャ！昨日は”）と数値（sleepTime）が「+」で繋がれると、数値は文字に変わり結合されてゆきます。 なので、数値の加算という意味の「+」と、文字列結合という意味での「+」と同時に用いる場合、処理の優先順位を正しくJavaScriptに伝えてあげる必要があります。

// 鮪が2つニャ
let tuna = 2;
　
// 鮭が3つニャ
let salmon = 3;
　
console.log(“今日のディナーの魚は合計” + tuna + salmon + “匹ニャ！”); // 今日のディナーの魚は合計23匹ニャ！
// ？？？本当は5匹のはずなのに、23匹になってるニャ！！

加算ではなく、文字として結合してゆく「+」になっているため、「2」と「3」がそのまま横に並べられた結果が出力されていますね。 なので、これは、下記のように変えてあげれば、数値同士の加算がまず実行され、その後文字列結合が行われるので、期待する動きになります。

// これなら、tunaとsalmonは数値同士なので、「+」で加算されるニャ！
console.log(“今日のディナーの魚は合計” + (tuna + salmon) + “匹ニャ！”);
// カッコ内の計算が優先され、その計算結果の値にドロンと変わったニャ！
console.log(“今日のディナーの魚は合計” + 5 + “匹ニャ！”);

型が違うと他にどんなところが変わってくるニャ？

型が違うと、その変数名の後に「.（ドット）」をした後利用できる便利機能が変わってきます。便利機能については、別に取り上げますが、下記に簡単な例を書きます。

// 文字の変数を宣言しているニャ
// stringは、文字を表す言葉でよく登場するニャ
let string = “abcd”;
　
// stringという文字列型の変数には、文字列型の便利機能、lengthをドットで繋げて利用できるニャ
// length→長さ→文字の長さを取得可能ニャ
let stringLength = string.length;
　
// 数値で「4」と表示されるニャ
console.log(stringLength);

この「length」という便利機能は、変数のデータ型が文字列型だからこそ利用できます。もしも数値型の変数、上記の例では、stringLenghtは数値型の変数になっていますが、その変数に「.length」と書いても、取得できるのは「undefined」、つまり、「lengthという便利機能、数値型には存在しないよ」とJavaScriptから教えられるのです。

値をもしも代入しない変数なら何型になるニャ？

変数は代入された値によって、型が決まりますが、では何も値を代入していない変数はどうなるのでしょう。

// 宣言しただけで、まだ値を代入していないニャ
let test;
　
console.log(test); // 「undefined」って表示されたニャ！

上記の通り、その変数の中身は、「undefined」になっています。 先程、数値型に存在しない「length」を用いようとした際にも同じ様に、「undefined」と表示されていましたね。「「length」なんて、数値型の便利機能としてないよ」、という意味合いでのundefinedでした。 今回は、変数は作ったけど、「その変数はまだ何型にもなっていないよ」という意味合いでのundefinedです。 変数を作ったけれど、まだ何型にもなっていないというのは、あくまで途中経過の状態にあります。その箱をどの様に用いるのかイメージできているのならば、宣言時に「初期値」を設定し、undefined状態で宣言しなくて済むよう、なるべく意識して初期値を代入してゆくと良いと思います。

// 数値の場合は、0を初期値として入れておくと良いニャ。0だから邪魔にならない数字だニャ
let number = 0;
　
// 文字の場合は、空文字（ダブルコーテーション、シングルコーテーション、どちらか2つ）を初期値として入れておくと良いニャ。空の文字だから邪魔にならないニャ
let string = “”;

敢えて空っぽであることを伝える、nullはどういう時に使うニャ？

初期値はなるべく代入するようにしていても、目ぼしい初期値がない場合も状況によってはありえます。その時に、初期値として「カラッポ」であることを代入することが可能です。 その際に用いるのが「null」です。

// nullはそのままnullって書けるニャ
let something = null;
　
console.log(something); // nullって表示されたニャ

undefinedは、型が未設定の中途半端な状態ですが、この場合のnullは明示的に空である変数を宣言することができます。なので、目ぼしい初期値が無かった場合は、nullを代入しカラッポであることをアピールしてゆきましょう。

終わりに

変数のデータ型について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたものがこちらです。

1. 変数の箱は代入された値で型が決まるニャ
   1. どんな値を入れれば、どういうデータ型になるのか、まずは数値と文字列についてしっかり抑えるニャ
2. 型が違うと色々変わってくるニャ
   1. 例えば同じ「+」演算子でも、型が違うと動きが変わってくるニャ
   2. その変数がどういうデータ型なのか意識することは重要ニャ
3. 変数宣言する際の初期値は大事ニャ
   1. 型ごとに初期値になる値を入れておくか、明示的に空である変数を作れるnullを活用するニャ

変数のデータ型を知ることで、変数をさらに使いこなしてゆくことができます。今後折にふれて取り上げてゆきますが、そのデータ型だからこそ利用できるJavaScriptの便利機能を活用してゆくことで、プログラミングがさらに楽しくなってくると思います。データ型への理解をしっかり身につけつつ、今後の学習に繋げてゆきましょう。