C
JavaScript 一覧
前へ4 / 21次へ
JavaScript/基礎/Lesson 04

データ型 — *7つの基本型*

45分·theory
このチャプター
3/5

データ型 — *7つの基本型*

🎯 このレッスンを読み終えたら

このレッスンを読み終えると、以下の3つを自信を持って扱えるようになります。

  • ▸✅ 7つのプリミティブ型 (string·number·bigint·boolean·null·undefined·symbol)
  • ▸✅ 参照型と == vs === の違い
  • ▸✅ Number の IEEE 754 の落とし穴 (0.1 + 0.2 ≠ 0.3)

学習目標をチェックリストとして手元に置き、すべて答えられるようになったらレッスンを閉じてください。

JS のデータ型

核心を一言で

JavaScript のデータ型は プリミティブ型 7種 と オブジェクト型 1種 に分かれます。動的型付けなので 変数宣言時に型指定は不要 — 値から自動的に決まります。

プリミティブ型 7種

javascript
// 1. number — 整数・小数の区別なし
const age = 28;
const pi = 3.14;
const inf = Infinity;
const nan = NaN;        // Not a Number

// 2. bigint — 非常に大きな整数 (number の限界を超える場合)
const huge = 9007199254740993n;    // 末尾に n

// 3. string — 3種類の引用符すべて使用可
const s1 = "hello";
const s2 = 'world';
const s3 = `こんにちは、${s1}!`;          // テンプレートリテラル (変数の埋め込み)

// 4. boolean
const isActive = true;

// 5. undefined — 宣言のみ (値なし)
let x;
console.log(x);          // undefined

// 6. null — 意図的な空値
const empty = null;

// 7. symbol — 一意の識別子 (ほぼ使わない)
const id = Symbol('id');

オブジェクト型 — それ以外すべて

javascript
const obj  = { name: "ホン" };
const arr  = [1, 2, 3];
const fn   = () => "hi";
const date = new Date();
const regex = /\d+/;

配列・関数・日付・正規表現はいずれも 内部的にはオブジェクト。だから メソッド呼び出し が可能です (arr.map()、s.toUpperCase() など)。

undefined vs null

よく混同される2つ:

  • ▸undefined — 自動的に 付与される (宣言のみした場合、関数の引数がない場合)
  • ▸null — 開発者が意図的に 付与する (値がないことを明示するため)
javascript
let x;              // undefined
const y = null;     // null

console.log(x == null);   // true (どちらも「空」を意味する)
console.log(x === null);  // false (厳密比較では異なる)

型の確認

javascript
const fn = () => {};

console.log(typeof 42);          // 'number'
console.log(typeof 'hi');        // 'string'
console.log(typeof true);        // 'boolean'
console.log(typeof undefined);   // 'undefined'
console.log(typeof null);        // 'object'   ← ⚠️ 昔のバグ、修正不可
console.log(typeof {});          // 'object'
console.log(typeof []);          // 'object'   ← 配列もオブジェクト
console.log(typeof fn);          // 'function'

// 🔍 配列かどうか確認 — typeof では区別不可 → 専用メソッドを使用
console.log(Array.isArray([]));       // true
console.log(Array.isArray({}));       // false
console.log(Array.isArray('hi'));     // false

typeof null === 'object' は JS の有名なバグ。後方互換性のため修正できません。null チェックは別途行う 必要があります。

型変換 — 暗黙的 vs 明示的

javascript
// ⚠️ 暗黙的な型変換 (危険) — JS が勝手に型を変える
console.log("5" + 1);     // "51"   ← + は文字列連結を優先 → 1 が "1" に変わる
console.log("5" - 1);     //   4    ← - は数値のみ → "5" が 5 に変わる
console.log("abc" - 1);   //  NaN   ← "abc" は数値に変換できない → NaN

// ✅ 明示的な型変換 (安全) — 開発者が意図して変換する
console.log(Number("5"));      // 5      ← 文字列 → 数値
console.log(String(5));        // "5"    ← 数値 → 文字列
console.log(Boolean(0));       // false  ← 0 は falsy
console.log(Boolean(""));      // false  ← 空文字列も falsy
console.log(Boolean(null));    // false  ← null も falsy
console.log(Boolean("hi"));    // true   ← 空でない文字列は truthy

暗黙的な型変換は 予期しない 結果を生み出します。常に 明示的な 変換を推奨します。

まとめ

  • ▸プリミティブ型 7種 (number·bigint·string·boolean·undefined·null·symbol)
  • ▸オブジェクト型 1種 (配列・関数・日付などすべてを含む)
  • ▸typeof null === 'object' はバグ (覚えておくこと)
  • ▸型変換は 暗黙的 NG、明示的 OK

⚡ 実際に試してみよう — typeof · Array.isArray

7種類の型をそれぞれ typeof で確認し、null と配列の有名な落とし穴も確かめてください。
✏️ JS 코드
📟 コンソール出力
▶ 実行ボタンを押してください
⚠️ ブラウザのサンドボックスで実行 — console.log()のみ対応、alert/fetchは不可

🤖 AI にこう依頼してみましょう

このレッスンの概念を知ることで、AI に 具体的に 指示を出せるようになります。漠然とした「直して」ではなく、語彙を持ったリクエスト — それがトークン節約の出発点です。

  • ▸「この変数に適切な TypeScript 型アノテーションを付けて」
  • ▸「この === と == の混用を === に統一して、意図を明確にして」
  • ▸「このコードの JSON.parse の結果に unknown 型 + 型ガードを追加して」

なぜこれがトークンを減らすのか

概念を知らないと、AI の回答を受け取っても 「それって何ですか？」 とまた聞き直す必要があります。その「聞き直し」がトークンを消費します。概念を一度身につければ、会話が一度で完結します。

先に読むとよい概念: 変数 (var, let, const)
次のおすすめ: 制御フロー — if · for · while · switch
前へ一覧次へ
データ型 - JavaScript