【基本のき】JavaScriptのデータ型とは

SHARE

はじめ
はじめ

データ型って何？

かみさま
かみさま

値に割り振られているデータの種類だよ。

はじめ
はじめ

どういうこと?

かみさま
かみさま

例えば「1」は数値というデータ型に分けられるんだ。

他にも種類があるからデータ型とは何なのか見ていこう！

JavaScriptのデータ型とは

データ型とはデータの種類のことをさし、JavaScriptに出てくる値には、何かしらのデータ型が割り振られています。

JavaScriptではあまりデータ型を意識せずともプログラムを書けます。

ただ厳密な演算や比較をした時、データ型の違いで意図した結果にならない場合があるので、知っておくことは重要です。

データの種類

JavaScriptの主なデータ型
  • 文字列（string）
  • 数値（number）
  • 真偽（boolean）
  • 特殊（undefined/null）
  • オブジェクト（object）
  • 配列（array）

かみさま
かみさま

これ以外にもシンボル型や関数があるけど、今回は上記のデータ型を説明するよ。

説明するにあたって、値のデータ型を確認することができる、typeof演算子というものを使い見ていきます。

文字列（string）

文字列は、「‘ ‘（シングルクォート）」または「” “（ダブルクォート）」の同じ記号で囲んだ内容になります。

書き方が異なるだけで、どちらで書いても違いはなく、前後の対応関係が取れているかぎり問題はありません。

文字列の書き方

シングルクォートで囲った場合

JavaScript 
'こんにちは、今日は天気が良いですね';

ダブルクォートで囲った場合

JavaScript 
"こんにちは、今日は天気が良いですね";

文字列にどちらかのクォートがある場合

JavaScript 
'I'm sorry';	// NG
"I'm sorry";	// OK

文字列に含まれないクォートで囲います。

かみさま
かみさま

上記の例では「I’m」でシングルクォートが使われているから、全体をダブルクォートで囲っているよ。

文字列の特徴

JavaScript 
const string = 'Hello World';

console.log(string);  // Hello World
console.log(typeof(string));  // string

「Hello World」はシングルクォートで囲っているので、文字列を表すstringを返します。

数値（number）

数値は文字列のようにクォートで囲むことはなく、そのままの状態で書くことができます。

クォートで囲ってしまうと文字列と判定されてしまうので注意してください。

数値の書き方

JavaScript 
const integer = 1;
const string = '1';
 
console.log(integer); // 1
console.log(typeof(integer)); // number
 
console.log(string);  // 1
console.log(typeof(string));  // string

変数のintegerはそのまま数値を書いているので、数値を表すnumberを返します。

変数のstringは1をクォートで囲っているので、出力内容が同じでも文字列を表すstringを返します。

数値の特徴

整数・小数

JavaScript 
const integer = 1;
const negativeInteger = -1;
const float = 1.2;
const negativeFloat = -1.2;
 
// 整数（正）
console.log(integer); // 1
console.log(typeof(integer)); // number
 
// 整数（負）
console.log(negativeInteger); // -1
console.log(typeof(negativeInteger)); // number
 
// 小数（正）
console.log(float); // 1.2
console.log(typeof(float)); // number
 
// 小数（負）
console.log(negativeFloat); // -1.2
console.log(typeof(negativeFloat)); // number

数値は正負関係なく整数、小数ともにnumberを返します。

四則計算

JavaScript 
const sum = 4 + 8;
const difference = 7 - 5;
const multiplication = 3 * 3;
const division = 6 / 2;
 
// 加法（+）
console.log(sum); // 12
console.log(typeof(sum)); // number
 
// 減法（-）
console.log(difference);  // 2
console.log(typeof(difference));  // number
 
// 乗法（*）
console.log(multiplication);  // 9
console.log(typeof(multiplication));  // number
 
// 除法（/）
console.log(division);  // 3
console.log(typeof(division));  // number

変数で四則計算をしてもnumberを返します。

変数を使って計算

JavaScript 
const width = 10;
const height = 20;
const area = width * height;
 
console.log(area) // 200
console.log(typeof(area)) // number

変数を使って計算してもnumberを返します。

特殊な数値

JavaScript 
const nan = 1 / '五';
const infinity = 1 / 0;
 
// 非数
console.log(nan); // NaN
console.log(typeof(nan)); // number
 
// 無限大
console.log(infinity);  // Infinity
console.log(typeof(infinity));  // number

それぞれnumberを返しますが、数値型ではないデータ型を使っての計算や、0で割ったり、大きすぎる数値の計算をすると、値がNaNまたはInfinityになります。

真偽（boolean）

True（真）またはFalse（偽）のどちらかの値を持ち、オンとオフなどの切り替えで変化する現在の状態を表します。

真偽の書き方

JavaScript 
const isShow = true;
const isClick = false;
 
console.log(isShow);  // true
console.log(typeof(isShow));  // boolean
 
console.log(isClick); // false
console.log(typeof(isClick)); // boolean

それぞれTrueかFalseを変数に入れているので、真偽を表すbooleanを返します。

真偽型の特徴

JavaScript 
const comparison = 10>7;
const name = 'yamada';
 
console.log(comparison);  // false
console.log(typeof(comparison));  // boolean
 
console.log(name === 'sato'); // true
console.log(typeof(name === 'sato')); // boolean

比較して値が等しいかどうか、または計算式の計算で真か偽を確かめられます。

特殊（undefined/null）

undefined

変数の値が定義されていないことを表す値です。

JavaScript 
let nothing;

console.log(nothing); // undefinded
console.log(typeof(nothing)); // undefinded

nothingの変数に何も代入されてないのでundefindedを返します。

null

意図的に何も入っていない状態を表す値です。

JavaScript 
const nothing = null;
 
console.log(nothing); // null
console.log(typeof(nothing)); // object
console.log(typeof(nothing) === 'object');  // true

nullはtypeof演算子で確認するとnullを返すと思いきや、objectを返すので注意してください。

かみさま
かみさま

nullは「値が空っぽ」でundefinedは「値が定義されていない」ということだよ。

MEMO

nullがobjectを返すのはJavaScriptの仕様バグです。すでに多くの既存コードがこれに依存しているので、未だに直せない状態だそうです。

オブジェクト（object）

キー名と値がペアになった集合体です。

オブジェクトの書き方

「{ }（波カッコ）」を使ってオブジェクトを作成し、「:（コロン）」でキー名と値を入れて、「,（カンマ）」で区切ります。

JavaScript 
{ キー名: 値, キー名: 値, ...}

出力する時はドット演算子かブラケット構文を使います。

JavaScript 
オブジェクト名.プロパティ // ドット演算子
オブジェクト名['プロパティ名']  // ブラケット構文
JavaScript 
const chara = {
  name: 'suzuki',
  age: 25,
  bloodType: 'B'
}
 
console.log(chara.name);  // suzuki
console.log(chara['age']);  // 25

オブジェクトの特徴

JavaScript 
const chara = {
  name: 'suzuki',
  age: 25,
  bloodType: 'B'
}
 
console.log(typeof(chara));  // object

オブジェクトはobjectを返します。

配列（array）

1つの変数に対して仕切りが付けられ、複数の値を格納することができるオブジェクトの1つになります。

配列の書き方

「[ ]（角カッコ）」を使って配列を作成し、「,（カンマ）」区切りで値を入れていきます。

JavaScript 
[値, 値, 値, ...]
[codebox]

出力する時は配列のインデックス番号を指定して書きます。インデックス番号は0から始まります。

[codebox=”JavaScript”] 
配列名[インデックス番号]
[codebox] [codebox title="JavaScript"] 
const fruits = ['apple', 'banana', 'orange'];

console.log(fruits[1]); // banana

配列の特徴

JavaScript 
const fruits = ['apple', 'banana', 'orange'];

console.log(typeof(fruits)); // object

配列はオブジェクトの一つなので、objectを返します。

まとめ

最後にポイントをまとめておさらいしましょう！

JavaScriptのデータ型にとは
  • JavaScriptのデータ型とはデータの種類をいう。
  • type演算子でデータ型を確認できる。
  • nullのデータ型はobjectになる。
  • arrayのデータ型はobjectになる。

コメントを残す

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

前の記事

【基本のき】JavaScriptの変数とは

次の記事

【Premiere Pro】YouTube向けに動画の書き出す…