Day3 後半のゴール
Day3 後半では、前半で触れたデータ型をもう一段深く理解していきます。
特に、初心者がつまずきやすい null / undefined、そして 「型の確認」や「型ミス」 に焦点を当てます。
「なんとなく知っている」から
「自分で型を意識してコードを書ける」状態に近づくのが後半のゴールです。
null と undefined をちゃんと区別してみる
null は「わざと空にしている」
null は、「ここには何も入っていません」と 意図的に空にしている状態 を表します。
const selectedItem = null;
console.log(selectedItem); // null
この例では、「まだ何も選ばれていない」という意味で null を入れています。
「ここには値が入る予定だけど、今はまだない」というニュアンスです。
例：ログイン中のユーザー
let currentUser = null; // まだ誰もログインしていない
console.log(currentUser); // null
ログイン処理が終わったら、ここにユーザー情報が入るイメージです。
「最初は null、あとで本物の値が入る」という使い方がよくあります。
undefined は「まだ何も決まっていない」
undefined は、「値が設定されていない」「そもそも何も代入されていない」状態です。
let value;
console.log(value); // undefined
変数を宣言しただけで、
まだ中身を入れていないときに自動的に undefined になります。
例：関数の戻り値がないとき
後の Day で学ぶ「関数」で、
何も返さない関数を呼び出すと undefined になることがあります。
今は「undefined は“まだ決まってない”感じ」とだけ覚えておけば十分です。
null と undefined のざっくり比較
null
「ここは空っぽだと、あえて決めている」
undefined
「ここにはまだ何も設定されていない」
セキュリティの観点で言うと、
「本当は値があるはずなのに undefined のままだった」
「null のつもりが別の値になっていた」
といった状態は、バグや脆弱性の原因になります。
だからこそ、「今この変数はどんな状態のはずか？」を
型と一緒に意識することが大事です。
typeof でデータ型を確認する
typeof は「今これ何型？」を教えてくれる
JavaScript には、値の型を調べるための typeof という演算子があります。
const name = "Taro";
const age = 20;
const isStudent = true;
console.log(typeof name); // "string"
console.log(typeof age); // "number"
console.log(typeof isStudent); // "boolean"
「これは string かな？ number かな？」と迷ったときに、
typeof を使うと答えを教えてくれます。
null と undefined に typeof を使ってみる
const value1 = null;
let value2;
console.log(typeof value1); // "object"
console.log(typeof value2); // "undefined"
ここでポイントになるのが、
null に typeof を使うと “object” と返ってくる ことです。
これは JavaScript の歴史的な仕様ミスで、
「null は object です」と言いたいわけではありません。
実務では「typeof null は ‘object’ になる」という“クセ”として覚えておきます。
undefined に typeof を使うと、
素直に "undefined" が返ってきます。
よくある型のミスとその正し方
数字を文字列にしてしまう
間違った例
const price = "1000";
const tax = "100";
console.log(price + tax); // "1000100"
見た目は数字ですが、
クォーテーションで囲んでしまったため string になっています。
その結果、「足し算」ではなく「文字列の結合」になってしまいます。
正しい例
const price = 1000;
const tax = 100;
console.log(price + tax); // 1100
「計算したいものはクォーテーションをつけない」
このルールを徹底するだけで、多くのバグを防げます。
true / false を文字列にしてしまう
間違った例
const isStudent = "true";
console.log(isStudent); // "true"（文字列）
これだと、boolean ではなく string です。
条件分岐で使おうとすると、意図しない動きになります。
正しい例
const isStudent = true;
console.log(isStudent); // true（boolean）
true / false は クォーテーションをつけない のが正解です。
null と undefined をごちゃごちゃにする
ありがちなパターン
「とりあえず何もないから undefined を代入しておこう」と書いてしまうことがあります。
let selectedItem = undefined; // 書けてしまうが、あまり良くない
undefined は「まだ何も設定されていない」という意味なので、
意図的に「空」を表したいときは null を使う方が自然です。
より良い書き方
let selectedItem = null; // まだ何も選ばれていない
「ここは意図的に空です」と伝えたいときは null。
「まだ何も代入していない」状態は undefined。
この使い分けを意識できると、一気に中級者っぽくなります。
「これは何型？」と自分で判断する練習
例題で型を当ててみる
例1
const a = "Hello";
これは string です。クォーテーションで囲まれているからです。
例2
const b = 42;
これは number です。クォーテーションがなく、数値として扱われます。
例3
const c = false;
これは boolean です。true / false は boolean の専用キーワードです。
例4
const d = null;
これは「意図的に空」の状態です。型としては「null という特別な値」として扱います。
例5
let e;
これは、値を代入していないので undefined です。
typeof で答え合わせする
console.log(typeof a); // "string"
console.log(typeof b); // "number"
console.log(typeof c); // "boolean"
console.log(typeof d); // "object"（null のクセ）
console.log(typeof e); // "undefined"
自分で「これは何型だろう？」と考えてから、
typeof で答え合わせをする習慣をつけると、
型の感覚がどんどん鋭くなっていきます。
実践コード：Day3 後半のサンプル
サンプル1：いろいろな型をまとめて確認する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day3 後半</title>
</head>
<body>
<h1>Day3: データ型の確認</h1>
<script>
const name = "Taro";
const age = 20;
const isStudent = true;
const selectedItem = null;
let tempValue;
console.log("name:", name, "→", typeof name);
console.log("age:", age, "→", typeof age);
console.log("isStudent:", isStudent, "→", typeof isStudent);
console.log("selectedItem:", selectedItem, "→", typeof selectedItem);
console.log("tempValue:", tempValue, "→", typeof tempValue);
</script>
</body>
</html>
このコードを実行して、
コンソールに表示される型を一つずつ確認してみてください。
サンプル2：型ミスをあえて起こしてみる
<script>
const price = "1000";
const tax = 100;
console.log("price + tax:", price + tax);
</script>
この結果が "1000100" になることを確認してから、
price を number に直して再度実行してみてください。
<script>
const price = 1000;
const tax = 100;
console.log("price + tax:", price + tax); // 1100
</script>
「クォーテーション一つで意味が変わる」という感覚を、
自分の目で確かめておくことが大事です。
Day3 後半の重点理解
今日の後半で特に大事なポイント
null は「意図的に空」、undefined は「まだ何も設定されていない」
typeof で「今これは何型か」を確認できる
クォーテーションをつけるかどうかで、string と number / boolean が分かれる
型を意識せずに書くと、バグやセキュリティ問題の温床になる
セキュリティスペシャリストの視点から言うと、
「型を甘く見ると、想定外の動きが起きる」
「想定外の動きは、そのまま脆弱性につながる」
ということを、早い段階で知っておいてほしいです。
Day3 の締めくくり
Day3 であなたが手に入れたのは、
「値の種類を意識してコードを書く力」です。
Day1〜Day3 で、
- コードを書く → ブラウザで動かす
- 変数という箱を使う
- その箱の中身の種類（データ型）を意識する
という、プログラミングの土台がかなり整ってきました。