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

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

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptの変数のデータ型の学習ポイントについて紹介します。

目次
  1. はじめに
  2. 変数の箱の違いは何に由来するニャ?
  3. 数値型の仲間同士でどんなことができるニャ?
  4. 型は他にどんなのがあるニャ?
  5. 算術演算子は算術だから、文字列型には関係ないニャ?
  6. 文字列と数値で「+」を使うとどうなるニャ?
  7. 型が違うと他にどんなところが変わってくるニャ?
  8. 値をもしも代入しない変数なら何型になるニャ?
  9. 敢えて空っぽであることを伝える、nullはどういう時に使うニャ?
  10. 終わりに

[18-05-20 15:50:33:433 JST]

はじめに

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

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

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

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

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

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;

image

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

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

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

image

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

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

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

image

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

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

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 + “匹ニャ!”);

image

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

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

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

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

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

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

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

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

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

image

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

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

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

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

終わりに

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

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

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

小泉七菜
ライター
小泉七菜

関連記事