Help us understand the problem. What is going on with this article?

【JavaScript基礎】データ型とは(プリミティブ型とオブジェクト型)

JavaScriptのデータ型とは

JavaScriptで扱うデータには、データ型というものがあります。データ型とはデータの種類です。
データ型は、大きく分けて2種類存在します。プリミティブ型オブジェクト型です。

データ型の概念は非常に重要なので、必ず理解しましょう。

プリミティブ型とは

プリミティブ型とは、プロパティとメソッドを持たないデータです。プロパティとメソッドについては、後々、オブジェクト型の項目で解説します。
プロパティとメソッドという用語を使わないで言い換えると、値を変更することができない不変(イミュータブル)なデータといえます。もっと簡単にいうと、値そのものを持つデータですね。

プリミティブ型のデータは、下記の6つに分類されます。

  • Boolean型(真偽値)
  • String型(文字列)
  • Number型(数値)
  • Undefined型(undefined)
  • Null型(null)
  • Symbol型(シンボル)

typeof演算子を用いて具体例を交えながら、一つずつ見ていきます。
※今回はJavaScript基礎の記事なので、説明が難しくなるSymbol型は割愛します。

Boolean型(真偽値)

Boolean型は、trueとfalseの2つ真偽値になります。trueが真、falseが偽ですね。

Boolean型
console.log(1 === 1); // true
console.log(typeof(1 === 1)); // boolean

String型(文字列)

String型は文字列、つまり文字データになります。

String型
const name = '伊藤';
console.log(typeof name); // string

Number型(数値)

Number型は、数値データになります。
数値データ以外にも、Number型であるデータが2つ存在します。NaNとInfinityですね。NaNは非数を、Infinityは無限大を表しますが、ほとんど使用しないので頭の片隅に入れておきましょう。

Number型
console.log(typeof 1); // number

Undefined型(undefined)

undefinedとは、未定義という意味です。つまり、Undefined型は、値が未定義であることを示します。

Undefined型
const name;
console.log(typeof name); // undefined

こちらの例では、変数nameを宣言しただけで、値は定義されていません。そのため、変数nameのデータ型はUndefined型ということになります。

Null型(null)

Null型は、nullというデータが代入されている状態を示します。
nullは、値は定義されているが、値がないという意味です。undefinedと混同しないように注意しましょう。

Null型
const name = null;
console.log(typeof name); // object

Null型の型は、nullではなくobjectと表示されます。こちらはECMAScriptの仕様バグです。

オブジェクト型とは

プリミティブ型以外のデータはすべてオブジェクト型に属します。オブジェクト型とは、プロパティやメソッドを持つデータです。オブジェクト型を理解するためには、オブジェクトやプロパティ、メソッドについての理解が必須になるので、早速解説していきます。

オブジェクトとは

オブジェクトとは、データと機能をまとめたものです。オブジェクト型のデータは、次のような形式をとります。

{}

{}はオブジェクトですが、空のオブジェクトです。データと機能が何も入っていない状態と考えてもらうとわかりやすいかと思います。
次に、データと機能の入ったオブジェクトを見てみましょう。

オブジェクトとは
const ito = {
  name: "伊藤",
  age: 24,
  goShopping: function() {}
};

{}を変数itoに代入し、{}の中に3つの項目を用意しました。この3つの項目は、2つに分類することができます。それが、データと機能です。
name: "伊藤"age: 24は、データに相当します。また、goshopping: function() {}は、機能に相当するかと思います。つまり、変数itoは、2つのデータと1つの機能を持っているということになります。

続いて、プロパティとメソッドの解説に移ります。

プロパティとは

プロパティとは、オブジェクト内のデータに相当します。先程の例で詳しく見てみましょう。

プロパティとは
const ito = {
  name: "伊藤",
  age: 24,
};

先程も解説した通り、変数itoは2つのデータを持っています。このデータのことを、プロパティといいます。プロパティは次のような形式をとります。

プロパティ名: 値(プリミティブ型のデータ)

また、次のような形式でプロパティを参照することができます。

オブジェクト名.プロパティ名 // 例 ito.name

参照を用いて、プロパティを後から追加・変更することもできます。

プロパティの追加・変更
const ito = {
  name: "伊藤",
  age: 24,
};

ito.age = 25;
ito.hobby = "ファッション";

変数itoのプロパティageを25に変更し、プロパティhobbyを新しく追加しました。

以上が、プロパティの解説になります。続いてメソッドの解説に移りましょう。

メソッドとは

メソッドとは、オブジェクト内の機能に相当します。こちらも先程の例で解説します。

メソッドとは
const ito = {
  goShopping: function() {}
};

先程も解説した通り、変数itoは、goShoppingという機能を持っています。この機能のことをメソッドといいます。メソッドは、次のような形式をとります。

メソッド名: 関数

メソッドは、値に関数が入ります。また、メソッドもプロパティと同様に、参照や追加、変更ができます。

メソッドの追加・変更
const ito = {
  goShopping: function() {}
};

ito.goShopping = function() {};
ito.work = function() {}

まとめ

  • JavaScriptには、プリミティブ型とオブジェクト型という2種類のデータ型が存在する。
  • プリミティブ型のデータとは、プロパティとメソッドを持たないデータであり、6つに分類することができる。
  • オブジェクト型のデータとは、プロパティとメソッドを持つデータである。
  • オブジェクトは、プロパティとメソッドを持つことができる。
  • プロパティとは、オブジェクト内のデータに相当する。
  • メソッドとは、オブジェクト内の機能に相当する。

Twitterアカウント

Twitterも更新していますので、よかったらフォローお願いします!
Twitterアカウントはこちら

flat-ito
Web制作会社FLAT所属。マークアップエンジニア。HTML/CSS/JavaScriptに関する知識を共有しています。
https://twitter.com/flat_ito
wd-flat
フロントエンドの価値を高めるコーディング専門プロダクション
http://wd-flat.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away