基礎から学ぶJavaScript 90日コース | JavaScriptを動かして慣れる － Day 3：データ型

Day 3：データ型（前半）

Day 3前半では、JavaScriptの「データ型」をじっくり整理していきます。 Day 2までで「変数」に値を入れて扱う感覚はつかめてきましたが、その「値」がどんな種類なのかを理解しておくことは、バグを防ぐうえでもセキュリティの観点でもとても重要です。 ここでは、文字列・数値・真偽値・null・undefined・typeof を、初心者向けにかみ砕いて説明し、最後に「さまざまなデータの型を調べる」実践まで進めます。

データ型とは何か

「値の種類」を表すラベル

データ型とは、その値がどんな種類のものかを表すラベルだと考えると分かりやすいです。

• 「文字として扱うもの」なのか
• 「数として計算するもの」なのか
• 「はい／いいえ」のような真偽なのか
• 「まだ値がない」という状態なのか

JavaScriptでは、値の種類によってできること・注意すべきことが変わります。 例えば、文字列同士は「結合」できますが、数値同士は「足し算・引き算」ができます。 この違いを意識せずにコードを書くと、意図しない挙動やバグにつながりやすくなります。

文字列（string）

文字や文章を表すデータ型

文字列は、文字や文章を表すデータ型です。 JavaScriptでは、文字列を '...'（シングルクォート）か "..."（ダブルクォート）で囲んで表現します。

例：文字列の基本

// 名前を表す文字列
const name = 'Taro';

// メッセージを表す文字列
const message = "Hello JavaScript";

// コンソールに表示してみます
console.log(name);    // Taro
console.log(message); // Hello JavaScript

// 名前を表す文字列
const name = 'Taro';

// メッセージを表す文字列
const message = "Hello JavaScript";

// コンソールに表示してみます
console.log(name);    // Taro
console.log(message); // Hello JavaScript

文字列のポイント

• 数字に見えるものでも、'20' のようにクォートで囲めば「文字列」です。
• 文字列同士は + で結合できます。

const firstName = 'Taro';
const lastName = 'Yamada';

const fullName = lastName + ' ' + firstName; // 文字列の結合
console.log(fullName); // Yamada Taro

const firstName = 'Taro';
const lastName = 'Yamada';

const fullName = lastName + ' ' + firstName; // 文字列の結合
console.log(fullName); // Yamada Taro

数値（number）

計算に使う「数」のデータ型

数値は、計算に使うための数を表すデータ型です。 JavaScriptでは、整数も小数も同じ number 型として扱われます。

例：数値の基本

// 年齢を表す数値
const age = 20;

// 価格を表す数値
const price = 1980;

// コンソールに表示してみます
console.log(age);   // 20
console.log(price); // 1980

// 年齢を表す数値
const age = 20;

// 価格を表す数値
const price = 1980;

// コンソールに表示してみます
console.log(age);   // 20
console.log(price); // 1980

数値の計算

const a = 10;
const b = 3;

console.log(a + b); // 足し算 → 13
console.log(a - b); // 引き算 → 7
console.log(a * b); // 掛け算 → 30
console.log(a / b); // 割り算 → 3.333333...

const a = 10;
const b = 3;

console.log(a + b); // 足し算 → 13
console.log(a - b); // 引き算 → 7
console.log(a * b); // 掛け算 → 30
console.log(a / b); // 割り算 → 3.333333...

文字列との違いに注意

const num = 10;     // 数値
const str = '10';   // 文字列

console.log(num + num); // 20（数値同士の足し算）
console.log(str + str); // '1010'（文字列同士の結合）

const num = 10;     // 数値
const str = '10';   // 文字列

console.log(num + num); // 20（数値同士の足し算）
console.log(str + str); // '1010'（文字列同士の結合）

同じ「10」でも、数値と文字列では挙動が変わることが分かります。

真偽値（boolean）

「はい／いいえ」「真／偽」を表すデータ型

真偽値は、「真（true）」か「偽（false）」の2つだけを取るデータ型です。 条件分岐（if文など）で非常によく使われます。

例：真偽値の基本

const isAdult = true;   // 大人かどうか
const hasLicense = false; // 免許を持っているかどうか

console.log(isAdult);    // true
console.log(hasLicense); // false

const isAdult = true;   // 大人かどうか
const hasLicense = false; // 免許を持っているかどうか

console.log(isAdult);    // true
console.log(hasLicense); // false

比較の結果としての真偽値

const age = 20;

console.log(age >= 18); // true（18以上なので真）
console.log(age < 18);  // false（18未満ではないので偽）

const age = 20;

console.log(age >= 18); // true（18以上なので真）
console.log(age < 18);  // false（18未満ではないので偽）

ここでは、age >= 18 や age < 18 の結果が true または false になります。

null

「意図的に何もない」という状態

null は、「意図的に何もない」という状態を表す値です。 「まだ値を決めていない」「ここには何も入っていないことを明示したい」ときに使います。

例：null の基本

// ユーザーのニックネーム（まだ設定されていない状態）
let nickname = null;

console.log(nickname); // null

// ユーザーのニックネーム（まだ設定されていない状態）
let nickname = null;

console.log(nickname); // null

ここでは、「ニックネームという変数はあるが、まだ中身はない」ということを表現しています。

undefined

「まだ値が代入されていない」という状態

undefined は、「まだ値が代入されていない」という状態を表す値です。 JavaScriptが自動的に付けることもあります。

例：undefined の基本

// 変数を宣言しただけで、まだ値を代入していません
let value;

console.log(value); // undefined

// 変数を宣言しただけで、まだ値を代入していません
let value;

console.log(value); // undefined

存在しないプロパティを参照した場合

const user = {
  name: 'Taro'
};

// user.age は定義されていないので undefined になります
console.log(user.age); // undefined

const user = {
  name: 'Taro'
};

// user.age は定義されていないので undefined になります
console.log(user.age); // undefined

null と undefined はどちらも「何もない」ように見えますが、

• null：意図的に「何もない」と設定した状態
• undefined：まだ値が設定されていない、または存在しない状態

という違いがあります。

typeof でデータ型を調べる

値の「種類」を確認するための演算子

typeof は、値のデータ型を文字列として返す演算子です。 「この変数には何が入っているのか？」を確認したいときに使います。

例：typeof の基本

console.log(typeof 'Hello');   // 'string'
console.log(typeof 123);       // 'number'
console.log(typeof true);      // 'boolean'
console.log(typeof null);      // 'object'（少しややこしい挙動）
console.log(typeof undefined); // 'undefined'

console.log(typeof 'Hello');   // 'string'
console.log(typeof 123);       // 'number'
console.log(typeof true);      // 'boolean'
console.log(typeof null);      // 'object'（少しややこしい挙動）
console.log(typeof undefined); // 'undefined'

typeof null が 'object' になるのは、JavaScriptの歴史的な仕様によるものです。 初心者のうちは、「null は特別な値で、typeof では 'object' と返ってくる」と覚えておくとよいです。

実践：さまざまなデータの型を調べる

ここからは、Day 1・Day 2で作ったような index.html を使って、実際に「さまざまなデータの型を調べる」コードを書いていきます。

index.html（Day 3前半・型チェック）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 3 前半：データ型の確認</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    h1 {
      color: #007acc;
      margin-bottom: 10px;
    }

    p {
      margin-bottom: 6px;
    }

    .note {
      color: #555;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <h1>Day 3：データ型（前半）</h1>

  <p>コンソールを開いて、さまざまな値の型を確認してみてください。</p>
  <p class="note">ブラウザの開発者ツールから「Console」タブを表示します。</p>

  <script>
    // 文字列の例
    const text = 'Hello JavaScript';
    console.log('text の値：', text);
    console.log('text の型：', typeof text); // 'string'

    // 数値の例
    const count = 10;
    const price = 1980;
    console.log('count の値：', count);
    console.log('count の型：', typeof count); // 'number
    console.log('price の値：', price);
    console.log('price の型：', typeof price); // 'number'

    // 真偽値の例
    const isAdult = true;
    const hasLicense = false;
    console.log('isAdult の値：', isAdult);
    console.log('isAdult の型：', typeof isAdult); // 'boolean'
    console.log('hasLicense の値：', hasLicense);
    console.log('hasLicense の型：', typeof hasLicense); // 'boolean'

    // null の例
    const nickname = null;
    console.log('nickname の値：', nickname);
    console.log('nickname の型：', typeof nickname); // 'object'（特別な挙動）

    // undefined の例
    let value;
    console.log('value の値：', value);
    console.log('value の型：', typeof value); // 'undefined'

    // 文字列と数値の違いを確認する例
    const num = 10;      // 数値
    const str = '10';    // 文字列

    console.log('num の値：', num);
    console.log('num の型：', typeof num); // 'number'
    console.log('str の値：', str);
    console.log('str の型：', typeof str); // 'string'

    // 足し算の結果の違いを確認します
    console.log('num + num の結果：', num + num); // 20（数値の足し算）
    console.log('str + str の結果：', str + str); // '1010'（文字列の結合）

    console.log('Day 3 前半の型チェックが完了しました');
  </script>
</body>
</html>

この実践で意識してほしいこと

• コンソールに表示される「値」と「型」をセットで見ること
• 同じ「10」でも、数値と文字列で型が違うこと
• null と undefined の違いを、値と型の両方から確認すること
• typeof が「今この値は何者なのか？」を教えてくれる道具であること

Day 3前半のまとめ

Day 3前半では、次のようなポイントを押さえました。

• データ型は「値の種類」を表すラベルであり、挙動や扱い方に直結すること
• 文字列（string）は '...' や "..." で囲まれたテキストであること
• 数値（number）は計算に使うための値であり、整数も小数も同じ型であること
• 真偽値（boolean）は true と false の2種類だけを持つこと
• null は「意図的に何もない」状態、undefined は「まだ値が代入されていない」状態であること
• typeof を使うことで、値の型をコンソールで確認できること
• 実践として、さまざまな値の型を typeof で調べるコードを書いたこと

ここまで理解できていると、「変数に入っている値がどんな種類なのか」を意識しながらコードを書くことができるようになります。

Day 3：データ型（後半）

Day 3後半では、前半で学んだ「文字列・数値・真偽値・null・undefined・typeof」を、もう一歩踏み込んで使いこなしていきます。 単に「型の名前を知っている」状態から、「型を意識してコードを書ける」状態に近づくことが目標です。 特に、typeof を使った型チェックや、null／undefined の扱い方は、バグやセキュリティ上の問題を防ぐうえでも重要なポイントになります。

データ型を「動きの中」で意識する

型を意識すると、コードの意図がはっきりする

前半では、さまざまな値の型を typeof で調べる練習をしました。 後半では、「この値は文字列であるべきか？数値であるべきか？」という視点を持ちながら、簡単なロジックを組み立てていきます。

例えば、次のような場面を考えてみます。

• ユーザーの年齢を入力してもらい、「大人かどうか」を判定する
• 商品の価格が数値かどうかを確認してから計算する
• プロフィールのニックネームが設定されているかどうかをチェックする

こうした場面では、「型を間違えている」と、意図しない挙動やエラーにつながります。 そのため、型を意識してコードを書くことがとても大切です。

文字列・数値・真偽値を条件分岐と組み合わせてみる

型によって「できること」が変わる

まずは、文字列・数値・真偽値を、簡単な条件分岐と組み合わせて使ってみます。

例：年齢から「大人かどうか」を判定する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 3 後半：年齢の判定</title>
</head>
<body>
  <h1>年齢から「大人かどうか」を判定する</h1>
  <p>コンソールを開いて結果を確認してください。</p>

  <script>
    // 年齢を表す数値（number）です
    const age = 20;

    // 「大人かどうか」を表す真偽値（boolean）です
    const isAdult = age >= 18;

    console.log('年齢：', age);
    console.log('isAdult の値：', isAdult);        // true または false
    console.log('isAdult の型：', typeof isAdult); // 'boolean'

    // 真偽値を条件分岐に使います
    if (isAdult) {
      console.log('この人は大人です');
    } else {
      console.log('この人は未成年です');
    }
  </script>
</body>
</html>

ここでは、

• age は数値（number）
• isAdult は真偽値（boolean）

という役割分担になっています。 「数値から真偽値を導き出し、その真偽値を条件分岐に使う」という流れは、実務でも非常によく使われます。

null と undefined を「状態」として扱う

「まだない」「意図的に空」を区別する

null と undefined は、どちらも「何もない」ように見えますが、意味合いが少し違います。

• null：意図的に「何もない」と設定した状態
• undefined：まだ値が設定されていない、または存在しない状態

この違いを意識してコードを書くと、「値がないこと」をより正確に表現できます。

例：ニックネームの有無をチェックする

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 3 後半：null と undefined</title>
</head>
<body>
  <h1>null と undefined の違いを確認する</h1>
  <p>コンソールを開いてログを確認してください。</p>

  <script>
    // ユーザー情報の例です
    const user = {
      name: 'Taro',
      nickname: null // ニックネームは「まだ設定されていない」という意図で null にしています
    };

    console.log('user.name の値：', user.name);
    console.log('user.name の型：', typeof user.name); // 'string'

    console.log('user.nickname の値：', user.nickname);
    console.log('user.nickname の型：', typeof user.nickname); // 'object'（特別な挙動）

    // 存在しないプロパティを参照すると undefined になります
    console.log('user.age の値：', user.age);        // undefined
    console.log('user.age の型：', typeof user.age); // 'undefined'

    // ニックネームが設定されているかどうかをチェックします
    if (user.nickname === null) {
      console.log('ニックネームはまだ設定されていません（null）');
    }

    // age が undefined かどうかをチェックします
    if (user.age === undefined) {
      console.log('年齢情報は存在しません（undefined）');
    }
  </script>
</body>
</html>

重要ポイントの深掘り

• nickname は「意図的に空」であるため null にしています。
• age は「そもそも定義されていない」ため undefined になります。
• === を使って、null と undefined を厳密に判定しています。

このように、「意図的に空」と「存在しない」を区別することで、状態管理がより正確になります。

typeof を使った「型チェック」のパターン

安全に処理するための前提条件として使う

typeof は、「この値は何者なのか？」を調べるための道具です。 特に、外部から渡される値やユーザー入力を扱うときには、型をチェックしてから処理することが重要です。

例：価格が数値かどうかを確認してから計算する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 3 後半：typeof で型チェック</title>
</head>
<body>
  <h1>typeof で型を確認してから計算する</h1>
  <p>コンソールを開いて結果を確認してください。</p>

  <script>
    // 価格の例です（ここでは数値と文字列の両方を試します）
    const price1 = 1980;    // 数値（number）
    const price2 = '1980';  // 文字列（string）

    // 割引額
    const discount = 300;

    // price1 の型を確認してから計算します
    console.log('price1 の値：', price1);
    console.log('price1 の型：', typeof price1);

    if (typeof price1 === 'number') {
      const discountedPrice1 = price1 - discount;
      console.log('price1 の割引後の価格：', discountedPrice1);
    } else {
      console.log('price1 は数値ではないため、計算できません');
    }

    // price2 の型を確認してから計算します
    console.log('price2 の値：', price2);
    console.log('price2 の型：', typeof price2);

    if (typeof price2 === 'number') {
      const discountedPrice2 = price2 - discount;
      console.log('price2 の割引後の価格：', discountedPrice2);
    } else {
      console.log('price2 は数値ではありません（string）');
      console.log('必要であれば、数値に変換してから計算する必要があります');
    }
  </script>
</body>
</html>

重要ポイントの深掘り

• typeof price1 === 'number' のように、型をチェックしてから計算しています。
• price2 は文字列なので、そのまま計算すると意図しない挙動やエラーにつながる可能性があります。
• 型チェックは、「安全に処理するための前提条件」として非常に重要です。

実践：さまざまなデータの型を調べて、コメント付きで整理する

最後に、Day 3前半の「型チェック」を、後半の視点を加えて少し発展させたコードをまとめて書いてみます。 ここでは、各値に対して「値」「型」「簡単な説明」をコンソールに出力し、コメントで整理していきます。

index.html（Day 3後半・総まとめ）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 3 後半：データ型の総まとめ</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    h1 {
      color: #007acc;
      margin-bottom: 10px;
    }

    p {
      margin-bottom: 6px;
    }

    .note {
      color: #555;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <h1>Day 3：データ型（後半）</h1>

  <p>コンソールを開いて、各値の「型」と「意味」を確認してみてください。</p>
  <p class="note">ブラウザの開発者ツールから「Console」タブを表示します。</p>

  <script>
    console.log('--- 文字列（string）の例 ---');
    const text = 'Hello JavaScript'; // 文字列（テキスト）です
    console.log('text の値：', text);
    console.log('text の型：', typeof text); // 'string'
    console.log('説明：文字や文章を表すデータ型です');

    console.log('--- 数値（number）の例 ---');
    const age = 20;      // 年齢を表す数値です
    const price = 1980;  // 価格を表す数値です
    console.log('age の値：', age);
    console.log('age の型：', typeof age); // 'number'
    console.log('price の値：', price);
    console.log('price の型：', typeof price); // 'number'
    console.log('説明：計算に使うための数を表すデータ型です');

    console.log('--- 真偽値（boolean）の例 ---');
    const isAdult = age >= 18; // 条件式の結果としての真偽値です
    const hasLicense = false;  // 免許を持っているかどうかを表す真偽値です
    console.log('isAdult の値：', isAdult);
    console.log('isAdult の型：', typeof isAdult); // 'boolean'
    console.log('hasLicense の値：', hasLicense);
    console.log('hasLicense の型：', typeof hasLicense); // 'boolean'
    console.log('説明：「はい／いいえ」「真／偽」を表すデータ型です');

    console.log('--- null の例 ---');
    const nickname = null; // 「意図的に何もない」状態を表します
    console.log('nickname の値：', nickname);
    console.log('nickname の型：', typeof nickname); // 'object'（特別な挙動）
    console.log('説明：意図的に「値がない」と設定した状態を表します');

    console.log('--- undefined の例 ---');
    let value; // まだ値を代入していない変数です
    console.log('value の値：', value);
    console.log('value の型：', typeof value); // 'undefined'
    console.log('説明：まだ値が設定されていない、または存在しない状態を表します');

    console.log('--- 文字列と数値の違いの例 ---');
    const num = 10;    // 数値（number）
    const str = '10';  // 文字列（string）
    console.log('num の値：', num);
    console.log('num の型：', typeof num); // 'number'
    console.log('str の値：', str);
    console.log('str の型：', typeof str); // 'string'
    console.log('num + num の結果：', num + num); // 20（数値の足し算）
    console.log('str + str の結果：', str + str); // '1010'（文字列の結合）
    console.log('説明：同じ「10」でも、型によって挙動が変わります');

    console.log('--- 型チェックの例（typeof） ---');
    function checkType(valueToCheck) {
      // 渡された値の型を調べて、説明付きで表示します
      console.log('値：', valueToCheck, '／ 型：', typeof valueToCheck);
    }

    checkType('Hello');   // string
    checkType(123);       // number
    checkType(true);      // boolean
    checkType(null);      // object
    checkType(undefined); // undefined

    console.log('説明：typeof は「この値は何者なのか？」を教えてくれる道具です');

    console.log('Day 3 後半のデータ型チェックが完了しました');
  </script>
</body>
</html>

Day 3後半のまとめ

Day 3後半では、前半で学んだデータ型を、より実践的な形で深掘りしました。

• 文字列・数値・真偽値を、条件分岐や判定ロジックと組み合わせて使ったこと
• null と undefined を、「意図的に空」と「存在しない」という状態として区別したこと
• typeof を使って、値の型をチェックしてから安全に処理するパターンを確認したこと
• さまざまな値の「型」と「意味」を、コメント付きで整理したコードを書いたこと

ここまで理解できていると、「変数に入っている値がどんな種類なのか」を意識しながら、より安全で意図の明確なコードを書けるようになっていきます。

Day 3：データ型とミニ課題のゴール

Day 3では、JavaScriptの「データ型」をしっかり理解し、その理解を使ってユーザー情報の型チェックプログラムを作るところまで進めます。 文字列・数値・真偽値・null・undefined・typeof を、単なる用語としてではなく「実際に使える道具」として捉え直し、最後にミニ課題として「ユーザー情報の型が正しいかをチェックするコード」を書いていきます。

データ型の基本をもう一度整理する

文字列（string）

文字列は、文字や文章を表すデータ型です。 JavaScriptでは、'...' や "..." で囲んで表現します。

// ユーザー名を表す文字列
const userName = 'Taro';

// メールアドレスを表す文字列
const email = 'taro@example.com';

console.log(userName); // Taro
console.log(email);    // taro@example.com

// ユーザー名を表す文字列
const userName = 'Taro';

// メールアドレスを表す文字列
const email = 'taro@example.com';

console.log(userName); // Taro
console.log(email);    // taro@example.com

• ユーザー名、メールアドレス、住所などは基本的に文字列として扱います。
• 数字に見えるものでも、'20' のようにクォートで囲めば文字列です。

数値（number）

数値は、計算に使うための数を表すデータ型です。 年齢、価格、ポイント数などに使われます。

// 年齢を表す数値
const age = 20;

// 所持ポイントを表す数値
const points = 150;

console.log(age);    // 20
console.log(points); // 150

// 年齢を表す数値
const age = 20;

// 所持ポイントを表す数値
const points = 150;

console.log(age);    // 20
console.log(points); // 150

• 整数も小数も、JavaScriptでは同じ number 型です。
• 計算に使う値は、文字列ではなく数値にしておくことが重要です。

真偽値（boolean）

真偽値は、「真（true）」か「偽（false）」の2つだけを取るデータ型です。 ログイン状態やフラグ（ON/OFF）などに使われます。

// ログインしているかどうか
const isLoggedIn = true;

// メール認証が完了しているかどうか
const isEmailVerified = false;

console.log(isLoggedIn);      // true
console.log(isEmailVerified); // false

// ログインしているかどうか
const isLoggedIn = true;

// メール認証が完了しているかどうか
const isEmailVerified = false;

console.log(isLoggedIn);      // true
console.log(isEmailVerified); // false

• 条件分岐（if）と組み合わせて使うことが多いです。

null

null は、「意図的に何もない」という状態を表す値です。

// ユーザーのニックネーム（まだ設定されていない状態）
let nickname = null;

console.log(nickname); // null

// ユーザーのニックネーム（まだ設定されていない状態）
let nickname = null;

console.log(nickname); // null

• 「この項目はあるけれど、今は空です」ということを明示したいときに使います。

undefined

undefined は、「まだ値が代入されていない」または「存在しない」状態を表す値です。

// 変数を宣言しただけで、まだ値を代入していません
let phoneNumber;

console.log(phoneNumber); // undefined

// 変数を宣言しただけで、まだ値を代入していません
let phoneNumber;

console.log(phoneNumber); // undefined

• 存在しないプロパティを参照したときも undefined になります。

typeof

typeof は、値のデータ型を文字列として返す演算子です。

console.log(typeof 'Hello');   // 'string'
console.log(typeof 123);       // 'number'
console.log(typeof true);      // 'boolean'
console.log(typeof null);      // 'object'（特別な挙動）
console.log(typeof undefined); // 'undefined'

console.log(typeof 'Hello');   // 'string'
console.log(typeof 123);       // 'number'
console.log(typeof true);      // 'boolean'
console.log(typeof null);      // 'object'（特別な挙動）
console.log(typeof undefined); // 'undefined'

• 「この値は何者なのか？」を確認したいときに使います。
• 型チェックは、バグやセキュリティ上の問題を防ぐうえで非常に重要です。

ミニ課題：ユーザー情報の型チェックプログラム

ここからがDay 3のミニ課題です。 「ユーザー情報の型が正しいかどうかをチェックするプログラム」を作っていきます。

目標イメージ

次のようなユーザー情報を想定します。

• 名前：文字列（string）
• 年齢：数値（number）
• メール認証済みかどうか：真偽値（boolean）
• ニックネーム：null（まだ設定されていない）
• 電話番号：undefined（そもそも登録されていない）

この情報に対して、「型が期待通りかどうか」をコンソールに表示するプログラムを書きます。

Step 1：ユーザー情報のテンプレートを作る

まずは、ユーザー情報をオブジェクトとして定義します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 3：ユーザー情報の型チェック</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    h1 {
      color: #007acc;
      margin-bottom: 10px;
    }

    p {
      margin-bottom: 6px;
    }

    .note {
      color: #555;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <h1>Day 3：ユーザー情報の型チェックプログラム</h1>

  <p>コンソールを開いて、ユーザー情報の型チェック結果を確認してください。</p>
  <p class="note">ブラウザの開発者ツールから「Console」タブを表示します。</p>

  <script>
    // ユーザー情報のオブジェクトを定義します
    // ここでは、型チェックの練習のために、いくつかのプロパティを用意します
    const user = {
      name: 'Taro',          // 名前：文字列（string）
      age: 20,               // 年齢：数値（number）
      isEmailVerified: true, // メール認証済みかどうか：真偽値（boolean）
      nickname: null         // ニックネーム：まだ設定されていないので null
      // phoneNumber はあえて定義しません（undefined になります）
    };

    console.log('--- ユーザー情報 ---');
    console.log(user);
  </script>
</body>
</html>

ここまでで、「ユーザー情報」という土台ができました。

Step 2：期待する型を言葉で整理する

次に、「このプロパティはどんな型であるべきか」を整理します。

• name：文字列（string）
• age：数値（number）
• isEmailVerified：真偽値（boolean）
• nickname：null（意図的に空）
• phoneNumber：undefined（そもそも存在しない）

この「期待する型」と「実際の型」を比較するのが、型チェックプログラムの役割です。

Step 3：typeof を使って型チェック関数を書く

型チェックを行う関数を作り、各プロパティの型を確認していきます。

<script>
  // ユーザー情報のオブジェクト（前のコードと同じ）
  const user = {
    name: 'Taro',
    age: 20,
    isEmailVerified: true,
    nickname: null
    // phoneNumber は定義しません
  };

  console.log('--- ユーザー情報 ---');
  console.log(user);

  // 型チェック用の関数を定義します
  function checkUserTypes(userObject) {
    console.log('--- ユーザー情報の型チェックを開始します ---');

    // 1. 名前（name）の型チェック
    console.log('name の値：', userObject.name);
    console.log('name の型：', typeof userObject.name); // 'string' であることが期待されます
    if (typeof userObject.name === 'string') {
      console.log('OK：name は文字列（string）です');
    } else {
      console.log('NG：name は文字列ではありません');
    }

    // 2. 年齢（age）の型チェック
    console.log('age の値：', userObject.age);
    console.log('age の型：', typeof userObject.age); // 'number' であることが期待されます
    if (typeof userObject.age === 'number') {
      console.log('OK：age は数値（number）です');
    } else {
      console.log('NG：age は数値ではありません');
    }

    // 3. メール認証済みかどうか（isEmailVerified）の型チェック
    console.log('isEmailVerified の値：', userObject.isEmailVerified);
    console.log('isEmailVerified の型：', typeof userObject.isEmailVerified); // 'boolean' であることが期待されます
    if (typeof userObject.isEmailVerified === 'boolean') {
      console.log('OK：isEmailVerified は真偽値（boolean）です');
    } else {
      console.log('NG：isEmailVerified は真偽値ではありません');
    }

    // 4. ニックネーム（nickname）の型チェック
    console.log('nickname の値：', userObject.nickname);
    console.log('nickname の型：', typeof userObject.nickname); // 'object'（null の特別な挙動）
    if (userObject.nickname === null) {
      console.log('OK：nickname は null（意図的に空）です');
    } else {
      console.log('NG：nickname は null ではありません');
    }

    // 5. 電話番号（phoneNumber）の型チェック
    console.log('phoneNumber の値：', userObject.phoneNumber);
    console.log('phoneNumber の型：', typeof userObject.phoneNumber); // 'undefined' が期待されます
    if (typeof userObject.phoneNumber === 'undefined') {
      console.log('OK：phoneNumber は undefined（未定義）です');
    } else {
      console.log('NG：phoneNumber は undefined ではありません');
    }

    console.log('--- ユーザー情報の型チェックが完了しました ---');
  }

  // 関数を呼び出して、型チェックを実行します
  checkUserTypes(user);
</script>

重要ポイントの深掘り

• typeof userObject.name === 'string' のように、期待する型と比較しています。
• nickname は typeof では 'object' になりますが、null かどうかを === null で判定しています。
• phoneNumber は定義していないため、userObject.phoneNumber は undefined になります。

Step 4：型チェック結果を「メッセージ」として読む

このミニ課題のゴールは、「コンソールに出ているメッセージを読めるようになること」です。

• OK：... のメッセージ → 型が期待通りである
• NG：... のメッセージ → 型が期待と違う可能性がある

型が違うと、後の処理（計算や条件分岐）が意図しない挙動をすることがあります。 そのため、「型が正しいかどうかを確認する」という習慣は、バグ防止・セキュリティ向上の両面で非常に重要です。

応用アイデア：わざと型を間違えてみる

学習としては、あえて型を間違えてみるのも良い練習になります。

const user = {
  name: 123,              // 本来は文字列だが、わざと数値にしてみる
  age: '20',              // 本来は数値だが、わざと文字列にしてみる
  isEmailVerified: 'yes', // 本来は boolean だが、わざと文字列にしてみる
  nickname: null
};

const user = {
  name: 123,              // 本来は文字列だが、わざと数値にしてみる
  age: '20',              // 本来は数値だが、わざと文字列にしてみる
  isEmailVerified: 'yes', // 本来は boolean だが、わざと文字列にしてみる
  nickname: null
};

この状態で型チェック関数を実行すると、NG のメッセージが増えます。 「どこが間違っているか」「なぜその型が期待されているか」を考えることで、型の理解がより深まります。

Day 3ミニ課題のまとめ

Day 3のミニ課題「ユーザー情報の型チェックプログラム」では、次のことを体験しました。

• ユーザー情報をオブジェクトとして定義し、各プロパティに意味のある型を割り当てたこと
• 文字列・数値・真偽値・null・undefined を、実際のデータとして扱ったこと
• typeof や === null を使って、「型が期待通りかどうか」をチェックする関数を書いたこと
• コンソールのメッセージを読みながら、「型の違いがコードの挙動に影響する」ことを実感したこと

ここまでできていると、「値の型を意識しながらコードを書く」という習慣の第一歩が踏み出せています。 この感覚は、今後の条件分岐・演算・入力チェック・セキュリティ対策など、あらゆる場面で役に立っていきます。