JavaScriptのデータ型をちゃんと理解する：プリミティブ型とオブジェクト型、typeof、オブジェクトの扱い方まで

8 min 157 views
JS-DATAtypes

JavaScriptでは、値には「型（タイプ）」があります。
たとえば 10 は数として扱いたいし、"hello" は文字として扱いたい。

これらは同じ「値」だけど、性質が違いますよね。

この「性質の違い」を区別するためのラベルが“データ型”です。

まず大きく分けると、JavaScriptの値は次の2グループに分かれます。

  • プリミティブ型（基本の値）
  • オブジェクト型（複雑な値・入れ物）

この2つを押さえることは、JavaScriptの土台そのものになります。

ここを押さえておくと、後で出てくる関数・配列・APIレスポンスなども腑に落ちやすくなります。

1. プリミティブ型って何？

プリミティブ型とは、「それ以上分解できないシンプルな値」のことです。
“そのものズバリの値”と言ってもいいです。

JavaScriptには、プリミティブ型が7種類あります。

  1. boolean（ブーリアン / 真偽値）
    2択で表せる値。true（正しい）か false（正しくない）か。
  2. number（ナンバー / 数値）
    整数も小数もどっちも number 型です。
    例: 10, 3.14, -5
  3. bigint（ビッグイント / とても大きい整数）
    number では扱いきれない超巨大な整数を正確に扱いたいときに使います。
    12345678901234567890n のように、末尾に n をつけます。
    （桁数がえげつない金額やID扱うときに登場します）
  4. string（ストリング / 文字列）
    文字や文章を表す型です。
    "こんにちは" や 'OK' のように "..." や '...' で囲んで書きます。
    （テンプレートリテラル `...` も最終的には文字列です）
  5. undefined（アンディファインド）
    「まだ値が入っていない」という状態を表す特別な値。
    変数は宣言したけど、値を代入していないときによく出てきます。
  6. null（ヌル）
    「意図的に空っぽ」という意味の値。
    “ここには今データがありません” と明示したいときに使います。
    似ているようで、undefinedとはニュアンスが違います。
  7. symbol（シンボル）
    「他とかぶらない一意な識別子」を作るための型です。
    ライブラリや内部的な処理でよく使われます。
    Symbol("説明用ラベル") のように作ります。

この7つが、JavaScriptの「最小単位の値」です。

型の名前どんな意味？書き方の例・イメージ
booleantrue / false の2択で状態を表す型（オン/オフ、はい/いいえなど）true, false
number数値を表す型（整数も小数もまとめてこの型になる）42 / 3.14 / -5
bigintとても大きい整数を正確に扱うための型12345678901234567890n みたいに、数字の末尾に n をつける
string文字や文章などのテキストを表す型“こんにちは”, ‘JavaScript’, テンプレート文字列
undefined「まだ値が代入されていない」という状態を表す特別な値let x; の直後の x は undefined
null「ここは空ってことにしておきます」と明示的に空を示すための値const result = null;
symbol他と絶対にかぶらない一意な識別子を作るための型const key = Symbol(“session-id”);

undefined は「まだ入ってない」、null は「わざと空」と覚えると混乱しにくいです。

typeof null は “object” って出ますが、これはJavaScriptの歴史的なクセなので気にしすぎなくてOKです。

2. オブジェクト型って何？

プリミティブ型が「単体の値」だとしたら、オブジェクトは「値をまとめて持てる入れもの」です。

  • 人の情報（名前 / 年齢 / 住所）
  • 設定情報（モード / 色 / フラグ）
  • APIのレスポンスデータ

みたいに、いくつもの項目をひとまとめにして扱いたいときは、オブジェクト型を使います。

オブジェクトは「参照型」とも呼ばれます。

これは、中身そのものではなく「どの場所にあるか」という参照（リンク）を変数に入れて扱うイメージだからです。

JavaScriptでは、配列・日付・文字列操作用のラッパー・DOMなど、いろいろなものがオブジェクトとして扱われます。

代表例：

  • Object
  • String（文字列オブジェクトとして使う場合）
  • Date
  • Array
  • RegExp
    などなど。

このあたりは「ビルトインオブジェクト（あらかじめ組み込み済みのオブジェクト）」と呼ばれます。

3. JavaScriptは「動的型付け」ってよく聞くけど、それって何？

JavaScriptは「動的型付け言語（dynamic typing）」といわれます。
これは、変数を宣言するときに「この変数は数値型です！」みたいな型情報をあらかじめ書かなくていい、ということです。

たとえばこう書けます：

let value = 10;        // いまは数値
value = "10円です";    // 文字列も代入できる

他の言語（たとえばCやJavaなどの一部）は、変数に入れる型を最初に宣言しないといけない場合もあります。そういったものは「静的型付け言語（static typing）」と呼ばれます。

JavaScriptはそうじゃない。

変数に何を入れるかによって、そのときどきで型が決まるイメージです。
それはラクな一方で、思わぬ型の混在からバグが起きることもあるので、あとで学ぶ型チェックがとても大事になります。

4. 値の型を調べたいときは？ → typeof

「この変数、今なに型になってるの？」と確認したいときに使えるのが typeof 演算子です。

// いろんな型の値を用意
const isLoggedIn = false;                 // 真偽値（boolean）
const count     = 42;                     // 数値（number）
const piValue   = 3.14159;                // 数値（小数もnumber扱い）
const hugeId    = 12345678901234567n;     // BigInt（末尾に n ）
const titleJa   = "フロントエンド入門";  // 文字列（ダブルクォーテーション）
const titleEn   = 'Hello JavaScript';     // 文字列（シングルクォーテーション）
const tokenKey  = Symbol("session-key");  // シンボル
let notAssigned;                          // まだ代入してない → undefined
const goneValue = null;                   // 「空ですよ」と明示した値

// それぞれの型を確認
console.log(typeof isLoggedIn); // "boolean"
console.log(typeof count);      // "number"
console.log(typeof piValue);    // "number"
console.log(typeof hugeId);     // "bigint"
console.log(typeof titleJa);    // "string"
console.log(typeof titleEn);    // "string"
console.log(typeof tokenKey);   // "symbol"
console.log(typeof notAssigned);// "undefined"
console.log(typeof goneValue);  // "object" ← ここはJavaScriptの歴史的な仕様上こうなる

いくつかポイントを補足します。

  • typeof null が "object" になるのは、JavaScriptの昔からの仕様がそのまま残っているためです。初心者が一番「は？」ってなるところなので、変じゃないです。みんなそこで一度止まります。安心してください。
  • 宣言だけして値を入れていない変数（let notAssigned; のようなもの）は undefined になります。

　小ワザ：console.log()

console.log() は、ブラウザのデベロッパーツール（開発者ツール）の「Console」タブにメッセージを表示するための関数です。
エラー調査や動作確認のときにめちゃくちゃ使います。

　小ワザ：コメント // ...

ソースコードの中に // ここから行末までコメント扱い というメモを残せます。
ブラウザはコメント部分を実行しません。

メモ書き・説明・TODOを書くときに使いましょう。

5. オブジェクトってどうやって作るの？

オブジェクトは {}（中かっこ）で作ります。
この {} の中に「プロパティ（情報の項目）」をセットしていきます。

プロパティは キー名: 値 のペアで書きます。複数あるときはカンマ区切り。

const account = {
  id: 101,
  nickname: "rin",
  prefecture: "東京都〇〇区",
  age: 29
};

これがオブジェクトリテラルと呼ばれる書き方です。
この account という変数には「オブジェクトそのもの」ではなく「そのオブジェクトへの参照」が入ります（＝参照型、と呼ばれるゆえん）。

イメージとしては「account という変数は、データの置き場所を指しているポインタ」みたいな感覚でとらえてください。

6. オブジェクトの中身（プロパティ）を読むには？

オブジェクトの中の値には、主に2つの書き方でアクセスできます。

　① ドット記法（.を使う）

console.log(account.nickname);   // "rin"

　② ブラケット記法（[]を使う）

console.log(account["prefecture"]); // "東京都〇〇区"

どっちも同じように値を取り出せますが、違いがあります。

  • ドット記法は account.user-name のような「ハイフンを含むプロパティ名」などは使えません。変数名のルールに似ています。
  • ブラケット記法は "キー名" を文字列として扱えるので、account["user-name"] のようなケースも対応できます。

チームで書くときは、どっちかに統一しておくと読みやすいです。

混在すると「なんでここだけ[]？」と初学者が引っかかりがちなので、スタイルを揃えるのがおすすめです。

7. よく使うビルトインオブジェクト（標準で用意されてる便利なやつ）

JavaScriptにはあらかじめ用意されている「便利なオブジェクト」があります。

これをビルトインオブジェクトと呼びます。

日常的にめちゃくちゃ使うトップ3を紹介します。

　(1) Object

  • すべてのオブジェクトのベース的な存在です。
  • {} のオブジェクトリテラルも、内部的には Object をもとに作られています。
  • プロパティの追加・削除・参照など、オブジェクト操作の土台になります。

例：

const emptyBox = {}; // 何も入っていないオブジェクト
const profile = {
  userId: 777,
  displayName: "AKIRA",
  active: true
};

// 後からプロパティを増やすこともできる
profile.email = "akira@example.com";

console.log(profile.displayName); // "AKIRA"
console.log(profile.email);       // "akira@example.com"

　(2) String

  • 文字列を扱うための機能がたくさん入ったオブジェクトです。
  • 普段は "テキスト" のようにリテラルで十分ですが、内部的には String オブジェクトにあるメソッド（.toUpperCase() など）が使えるようになっています。
const title = "JavaScript Basics";
console.log(title.toUpperCase()); // "JAVASCRIPT BASICS"

※ new String("...") で明示的に String オブジェクトを作ることもできますが、実務ではほとんどやりません。基本は "文字列" でOKです。

文字列の書き方いろいろ

const songA = "I'm fine";          // ダブルクォーテーション
const songB = 'She said "Hi"';     // シングルクォーテーション
const songC = `複数行の
テキストを
そのまま書けるよ`;                // バッククォート（テンプレートリテラル）

バッククォート `...` で囲んだ文字列はテンプレートリテラルと呼ばれます。
テンプレートリテラルのすごいところは、変数を埋め込めるところ。

const uid = 10;
const nick = "NANA";

console.log(`ID:${uid}, USER:${nick}`);
// → "ID:10, USER:NANA"

これのおかげで、"ID:" + uid + ", USER:" + nick みたいな文字列連結をいちいち書かなくてよくなり、ミスも減ります。

　(3) Date

  • 日付や時刻を扱うための組み込みオブジェクトです。
  • 「今日の日付は？」「現在時刻は？」を取得したり、年月日を取り出したりできます。
const now = new Date();

console.log(
  `今日は ${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日 です。`
);

※ getMonth() は0始まり（1月が0、2月が1…）なので、表示するときは + 1 するのが定番テクです。ここでみんな一回混乱するので、混乱してもOKです、あなただけじゃない安心して。

8. ここまでのまとめ

最後に、大事なところだけギュッと振り返ります。

  • データ型は「この値はどんな性質を持ってるか」を表すラベル。
  • JavaScriptの値は大きく「プリミティブ型」と「オブジェクト型」に分かれる。
    • プリミティブ型は7種類（boolean, number, bigint, string, undefined, null, symbol）。
    • オブジェクト型は「複数の情報をまとめる入れもの」。配列や日付などもここに入る。
  • JavaScriptは動的型付けなので、変数を宣言するときに型を書かなくてもいい。そのぶん、型の混ざりには気をつける必要がある。
  • typeof 演算子で、いまその変数がどんな型になっているかを確認できる。
    • ただし typeof null が "object" なのは仕様上の有名なクセ。
  • オブジェクトは {} で作る。{ キー: 値, ... } の形。
    • user.name（ドット記法）や user["name"]（ブラケット記法）で中身にアクセスできる。
  • よく使うビルトインオブジェクトとして、Object / String / Date は必修レベル。
  • 文字列はバッククォート `...`（テンプレートリテラル）を使うと、複数行OK＋変数埋め込みOKでかなり便利。

「型を意識してコードを書く」って、最初はちょっと抽象的なんですが、実はこれが後のバグを減らす第一歩なんです。
あなたが今この段階で型とオブジェクトの感覚をつかもうとしているのは、正しい進み方なので安心してください。この土台があると次の「配列」「条件分岐」「APIレスポンスの扱い」にスムーズに入っていけます。

関連

JavaScriptのデバッグ入門

関連

DOM操作入門：JavaScriptでWebページの中身を書き換える基本

関連

【保存版】JavaScriptのアロー関数とは？初心者にもわかる違いと使い分けガイド

関連

まだ間に合う？国のカネでスキルが買える年齢ラインの話

関連

JavaScriptの非同期処理入門：同期と非同期、Promise、async/await、Fetchまでまとめて理解する

<PREV
JavaScriptの非同期処理入門：同期と非同期、Promise、async/await、Fetchまでまとめて理解する
NEXT>
JavaScriptのデバッグ入門
関連記事