2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【Javascript基礎】Javascriptにおけるデータ型

Last updated at Posted at 2022-10-03

◆データ型とは

データの種類のこと。

プログラミング言語には、データの型を強く意識するものと、逆にほとんど意識しないものがある。

JavaやC#のような言語は前者に属し、
数値を格納するために用意された変数に文字列を格納する事は許されない。
例) Java

int num = 100;

num = "100"; // 構文エラーなのでNG

これらの言語は、変数とデータ型は常にワンセットになる。

Javascriptは後者に属し、データ型についてかなり寛容である。
変数側が代入される値に応じて形や大きさを変えてくれるため、開発者がデータ型を意識することはあまり多くない。

let num = 100;

num = "100"; // OK

◆Javascriptの主なデータ型

分類 データ型
基本(プリミティブ)型 数値型(number)
基本(プリミティブ)型 文字列型(string)
基本(プリミティブ)型 真偽値型(boolean)
基本(プリミティブ)型 シンボル型(Symbol)
基本(プリミティブ)型 特殊型(null / undefined)
オブジェクト型 配列(array)
オブジェクト型 オブジェクト(object)
オブジェクト型 関数(function)

Javascriptのデータ型は、基本型と参照型の2つに分類できる。

両者の違いは、

  • 基本型 → 変数に値そのものが直接格納される。

  • オブジェクト型 → 参照値(値を実際に格納しているメモリ上のアドレス)を格納する。
    (参照値を代入することから、オブジェクト型は参照型とも呼ばれる。)
    にある。

◆リテラル

リテラルとは、データ型に格納できる値そのもの、また、値の表現方法 のことを指す。

・ 数値リテラル(number)

リテラル 概要
10進数 0 ~ 9 10, 100, 26
2進数 0b + 0 ~ 1 0b01, 0b101
8進数 0o + 0 ~ 7 0o600, 0o644, 0o777
16進数 0x + 0~9 A~F 0xCC55CC, 0xFFffFF
浮動小数点 小数点がつく 1.5, 3.14

さまざまな表現方法があるが、どれを使っても本質的にこれらの違いは見かけ上に過ぎない。

・ 文字列リテラル(string)

シングルクォーテーション(')か、ダブルクォーテーション(")で囲う必要がある。

// ダブルクォーテーション
let str = "Javascript";

// シングルクォーテーション
let str = 'Javascript';

どちらを利用しても基本的には問題はないが、
文字列の中にシングルクォーテーション or ダブルクォーテーションが含まれている場合は、それぞれ文字列に含まれない方のクォートで囲う必要がある。

// ×
let str = 'He's Smiths';

// ○
let str = "He's Smiths";

・ エスケープシーケンス

文字列リテラルでは、特別な意味を持つ文字(キーボードから直接に表現できない文字など)を、「\ + 文字」 という形式で表現することができる。
このような文字を エスケープシーケンス という。

文字 概要
\b バックスペース
\f 改ページ
\n 改行
\r 復帰
\t タブ文字
\ \ バックスラッシュ
\ ' シングルクォーテーション
\ " ダブルクォーテーション

エスケープシーケンスを用いることで、シングルクォーテーションで囲った文字列を、シングルクォーテーションで囲うことも可能になる。

let str = 'He\'s Smith'; // OK

このように記述することで、Javascriptは「'」を文字列の終了ではなく、ただの「'」として認識する。
このように、ある文脈の中で意味を持つ文字を、あるルールに基づいて無効化することを、エスケープ処理 という。

・ テンプレート文字列

テンプレート文字列を利用することで、以下の表現が可能になる。

・文字列に変数を埋め込む

・複数行にまたがる(=改行文字を含んだ)文字列

テンプレート文字列は、バッククォーテーション(`)で文字列を括る。

let name = "smith";

console.log(
    `Hello, Mr.${name}.
    Nice weather today.
    `);

/**
 * 出力結果
 * Hello. Mr.smith.
 * Nice weather today.
 */

${~}で変数を埋め込むことが可能。

「'」 や 「"」ではエスケープシーケンスでしか表現できなかったものが、テンプレート文字列ではそのまま表現する事が可能。(今回の例であれば改行)

がテンプレート文字列の特徴。

・ 配列リテラル

配列とは、データの集合のこと。
配列は1つの変数に対し、複数の値を格納できるのが特徴。

1つ1つの格納された値のことを要素とよぶ。

let nums = [123, 456, 789];

let strs = ["javascript", "java", "C#"];

配列は上記のように、
カンマ区切りの値を[](ブラケット)で括った形式で表現する。

配列には インデックス番号 と呼ばれる番号が割り振られ、この番号を利用して配列内の値にアクセスする。

※配列にアクセスするためのものを キー(key) とよぶ。

与えられる順番は、先頭から0, 1, 2 ...という形で割り振られる。
アクセスするときは、配列名[インデックス番号] でアクセスする。

let nums = [123, 456, 789];

console.log(nums[0]);  // 123

・ オブジェクトリテラル

オブジェクトとは、
名前をキーとしてアクセスする配列である。
ハッシュ連想配列と呼ばれることもある。

また、配列では格納したデータを「要素」と呼ぶのに対し、
オブジェクトでは 「プロパティ」 と呼ぶ。

オブジェクトリテラルの記法とアクセスする方法は、通常の配列とは異なる。

// 記法 { キー名: 値(プロパティ) }
let obj = { x: 1, y: 2, z: 3 };

// アクセス方法
console.log(obj.x); // 1

// アクセス方法②
console.log(obj['x']); // 1

オブジェクトリテラルでは、{}で括る点に注意。

アクセス方法は2つ。

① オブジェクト名.プロパティ名; (ドット演算子)

② オブジェクト['プロパティ名']; (ブラケット構文))

基本的にはドット演算子を用いてアクセスする事が多いが、以下の2つの場面ではブラケット構文でのアクセスが適している。

① ブラケット構文では、「'プロパティ名'」のところに変数を入れる事ができる。

→ アクセスするプロパティを動的に変更したい場合におすすめ。

② ブラケット構文では、「'プロパティ名'」の箇所は文字列として判定される。
→ ドット演算子の場合、プロパティ名は識別子として認識されるので、「123」のような命名規則に反するキーは使えない。

・ 未定義(undefined)

undefinedは、ある変数の値がそもそも定義されていない事を表す値。
以下のようなケースで返される。

・ ある変数に対し、宣言はされているものの値を与えられていない。
・ 未定義のプロパティを参照した。
・ 関数で値が返されない。

let x;
console.log(x);

let obj = {x: 1};
console.log(obj.y);

・ ヌル(null)

nullは、該当する値がないことを意味する値である。
undefinedと区別が付きづらいが、

undefined → 定義されていない ・ 参照されることを想定していない

null → 空である

という状態を表す。

参考文献

2
0
7

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?