Day3 前半のゴール
Day3 のテーマは「データ型」です。
Day2 で「変数」という“箱”を学びましたが、
今日は「その箱の中に入る中身の種類」を理解していきます。
ここを押さえておくと、
「この値はどう扱えばいいのか」「どんなミスをしやすいか」が一気に見えやすくなります。
Day3 前半では、特に次の3つを目標にします。
Day3 前半で目指すこと
データ型という考え方をイメージで理解する
string / number / boolean の3つをしっかり区別できるようになる
null / undefined の「よくわからない2人」を怖がらずにイメージできるようにする
データ型とは何か
「箱の中身の種類」のこと
Day2 で、変数は「値を入れておく箱」と説明しました。
データ型とは、その箱の中に入っている「中身の種類」のことです。
たとえば、次の3つの変数を見てください。
const name = "Taro";
const age = 20;
const isStudent = true;
name には「文字列」、age には「数値」、isStudent には「true / false の値」が入っています。
これらがそれぞれ
- string（文字列）
- number（数値）
- boolean（真偽値）
というデータ型です。
なぜデータ型を意識する必要があるのか
コンピュータは、人間のように「なんとなく」で理解してくれません。
「これは文字として扱うのか」「数として計算するのか」「はい/いいえなのか」
を、きっちり区別して処理します。
たとえば、
console.log(10 + 20); // 30
console.log("10" + "20"); // "1020"
見た目は似ていますが、
前者は number として計算、後者は string として「くっつける」処理になります。
string（文字列）
文字列は「” ” で囲まれたテキスト」
string（ストリング）は「文字列」のことです。
人の名前、メッセージ、住所、メールアドレスなど、
「文字として扱いたいもの」はすべて string になります。
const name = "Taro";
const message = "こんにちは";
const email = "taro@example.com";
ダブルクォーテーション " " か、シングルクォーテーション ' ' で囲みます。
文字列をつなげる
文字列同士は + でつなげることができます。
const firstName = "Taro";
const lastName = "Yamada";
const fullName = lastName + " " + firstName;
console.log(fullName); // "Yamada Taro"
ここで大事なのは、+ が「足し算」ではなく「くっつける」という意味で使われていることです。
よくあるミス：数字を文字列にしてしまう
const a = "10";
const b = "20";
console.log(a + b); // "1020"
見た目は数字ですが、
クォーテーションで囲んでしまうと「文字列」になります。
「計算したいのか」「文字として扱いたいのか」を意識して、
クォーテーションをつけるかどうかを決めるのがポイントです。
number（数値）
数値は「クォーテーションで囲まない数字」
number は「数値」のデータ型です。
年齢、点数、金額、残高、座標など、
計算したいものは基本的に number です。
const age = 20;
const score = 85;
const price = 1200;
クォーテーションで囲まないのが string との大きな違いです。
計算してみる
const a = 10;
const b = 20;
console.log(a + b); // 30
console.log(a - b); // -10
console.log(a * b); // 200
console.log(b / a); // 2
number 型は、四則演算（足し算・引き算・掛け算・割り算）ができます。
深掘り：string と number の混在に注意
const a = 10;
const b = "20";
console.log(a + b);
この場合、結果は "1020" になります。
number と string を + でつなぐと、
number が string に変換されて「文字列の結合」になってしまうからです。
初心者がよくハマるポイントなので、
「クォーテーションをつけた瞬間、それは文字列になる」
という感覚をしっかり持っておきましょう。
boolean（真偽値）
boolean は「true か false だけ」
boolean（ブーリアン）は、
「真（true）か偽（false）か」の2つしかないデータ型です。
const isStudent = true;
const isAdmin = false;
「〜かどうか」を表すときに使います。
- ログインしているかどうか
- 管理者かどうか
- 在庫があるかどうか
など、はい/いいえで答えられる情報は boolean で表現できます。
条件分岐と相性がいい
boolean は、
後の Day で学ぶ if 文（条件分岐）と組み合わせて本領を発揮します。
const isStudent = true;
if (isStudent) {
console.log("学生割引が使えます");
}
ここではまだ if 文の詳しい説明はしませんが、
「boolean は条件判定に使うための型」と覚えておくとイメージしやすいです。
セキュリティ視点：権限を boolean で管理する
実際のシステムでは、
const isAdmin = true;
const isEmailVerified = false;
のように、
「このユーザーは管理者か？」「メール認証済みか？」
といった重要な情報を boolean で管理します。
この値が間違っていると、
本来アクセスできない人が管理画面に入れてしまうなど、
重大なセキュリティ事故につながります。
だからこそ、boolean は「はい/いいえ」を正しく表現するための
とても重要なデータ型だと意識しておいてください。
null と undefined の入り口
まずは「どちらも“何もない系”」とだけ覚える
null と undefined は、
初心者が「よくわからないまま出会ってしまう」代表的な2つです。
前半では、細かい違いを覚える必要はありません。
まずはざっくりとしたイメージだけ持っておきましょう。
null のイメージ
「ここには何も入っていません」と、
あえて“空っぽ”にしている状態。
const selectedItem = null;
「まだ何も選ばれていない」という意味で、
意図的に空にしている感じです。
undefined のイメージ
「そもそもまだ何も決まっていない」「値が設定されていない」状態。
let value;
console.log(value); // undefined
変数を宣言しただけで、
まだ何も代入していないときに出てくるのが undefined です。
深掘りは後半でやる
null と undefined の違いは、
後半でゆっくり整理します。
今は、
- string / number / boolean が「よく使う3兄弟」
- null / undefined は「何もない系の2人」
くらいのイメージが持てていれば十分です。
実践コード：Day3 前半のサンプル
サンプル1：基本の3つの型を使ってみる
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day3 データ型</title>
</head>
<body>
<h1>Day3: データ型の基本</h1>
<script>
const name = "Taro"; // string
const age = 20; // number
const isStudent = true; // boolean
console.log("名前:", name);
console.log("年齢:", age);
console.log("学生かどうか:", isStudent);
</script>
</body>
</html>
このコードを実行して、
コンソールにそれぞれの値が表示されることを確認してみてください。
サンプル2：string と number の違いを体験する
<script>
const a = 10;
const b = 20;
const c = "10";
const d = "20";
console.log(a + b); // 30
console.log(c + d); // "1020"
</script>
同じ「10」と「20」でも、
クォーテーションの有無で結果が変わることを体感してみてください。
重点理解の整理（前半）
今日の前半で特に大事なポイント
変数には「中身の種類（データ型）」がある
string / number / boolean がまず最初に覚える3つの型
クォーテーションをつけた瞬間、それは「文字列」になる
boolean は「〜かどうか」を表す、とても重要な型
null / undefined については、
「何もない系の値があるんだな」くらいの理解で OK です。
この後半で扱う予定の内容
後半では、次のような内容を扱っていきます。
Day3 後半の予定
null と undefined の違いをもう少し丁寧に整理する
typeof を使ってデータ型を確認する
よくある型のミス（”10″ と 10 の混在など）を例題で体験する
簡単な練習問題で「これは何型？」と自分で判断できるようにする
前半で「型ってこういうものか」という感覚がつかめたら、
後半でそれを一段深くしていきましょう。