8-1. 変数・データ型・演算子

このセクションで学ぶこと

JavaScriptの変数宣言（let・const）の使い分けを理解する
プリミティブ型とオブジェクト型の違いを知る
テンプレートリテラルや便利な文字列メソッドを使えるようになる
暗黙の型変換の罠と === による厳密比較を理解する
論理演算子・Null合体演算子・オプショナルチェーンを使いこなす

JavaScriptはブラウザとNode.js（サーバーサイド）の両方で動く言語だ。この章では第4章で学んだプログラミングの基礎概念をJavaScriptの具体的な文法で押さえる。

変数宣言：`let` と `const`

JavaScriptには変数宣言のキーワードが3つあるが、現代のコードでは let と const だけを使う。

const name = "Alice";   // 再代入不可（定数）
let count = 0;          // 再代入可能
count = 1;              // OK

name = "Bob";           // エラー：Assignment to constant variable

var は古い書き方で、スコープのルールが直感に反するため使わない。

`const` を優先する理由

const で宣言しておくと「この変数は変わらない」という意図が明確になり、バグを防げる。再代入が必要になったときだけ let に変える習慣をつけよう。

// 良い例
const MAX_RETRY = 3;
const apiUrl = "https://api.example.com";

// 後から変更が必要なものは let
let retryCount = 0;
retryCount++;

データ型

JavaScriptの型は大きく プリミティブ型 と オブジェクト型 に分かれる。

プリミティブ型（値そのものを保持）
┌─────────────┬──────────────────────┬─────────────────────┐
│ 型           │ 例                   │ 説明                 │
├─────────────┼──────────────────────┼─────────────────────┤
│ number      │ 42, 3.14, NaN        │ 整数・小数を統一した型│
│ string      │ "hello", 'world'     │ 文字列               │
│ boolean     │ true, false          │ 真偽値               │
│ undefined   │ undefined            │ 値が未設定            │
│ null        │ null                 │ 意図的な「なし」      │
│ bigint      │ 9007199254740993n    │ 巨大整数             │
│ symbol      │ Symbol("id")         │ ユニークな識別子      │
└─────────────┴──────────────────────┴─────────────────────┘

オブジェクト型（参照を保持）
  object / array / function など

`typeof` で型を調べる

typeof 42          // "number"
typeof "hello"     // "string"
typeof true        // "boolean"
typeof undefined   // "undefined"
typeof null        // "object"  ← 有名なバグ。歴史的経緯で直されていない
typeof []          // "object"
typeof {}          // "object"
typeof function(){} // "function"

`undefined` と `null` の違い

let a;              // 宣言したが値を入れていない → undefined
let b = null;       // 意図的に「空」を表したい → null

// 実務では
// undefined: 「まだ設定されていない」
// null:      「存在しないことが確定している」

数値の罠：`NaN` と浮動小数点

// NaN（Not a Number）：数値演算が失敗したとき
parseInt("abc")     // NaN
NaN === NaN         // false ← NaNは自分自身と等しくない
isNaN(NaN)          // true  ← isNaN() で判定する

// 浮動小数点の精度問題
0.1 + 0.2           // 0.30000000000000004
0.1 + 0.2 === 0.3   // false
// 対策：整数に変換して計算するか、toFixed()を使う
(0.1 + 0.2).toFixed(1) === "0.3"  // true（文字列として比較）

文字列

テンプレートリテラル

バッククォートを使うと、変数の埋め込みと複数行が簡単に書ける。

const user = "Alice";
const score = 95;

// 古い書き方（+で連結）
const msg1 = "こんにちは、" + user + "！スコアは" + score + "点です。";

// テンプレートリテラル（推奨）
const msg2 = `こんにちは、${user}！スコアは${score}点です。`;

// 複数行もそのまま書ける
const html = `
  <div>
    <p>${user}</p>
  </div>
`;

便利な文字列メソッド

const s = "  Hello, World!  ";

s.trim()              // "Hello, World!"    前後の空白を除去
s.toLowerCase()       // "  hello, world!  "
s.includes("World")   // true
s.startsWith("  He")  // true
s.replace("World", "JS") // "  Hello, JS!  "
s.split(", ")         // ["  Hello", "World!  "]
"abc".repeat(3)       // "abcabcabc"
"5".padStart(3, "0")  // "005"  ← ゼロ埋めに便利

型変換

JavaScriptは型変換が暗黙的に行われる（型強制）ため、意図しない動作が起きやすい。

// 暗黙の型変換の例
"5" + 3         // "53"  （+は文字列連結が優先）
"5" - 3         // 2     （-は数値演算）
"5" * "3"       // 15
true + 1        // 2
false + 1       // 1
null + 1        // 1
undefined + 1   // NaN

// 明示的な変換（推奨）
Number("42")    // 42
String(42)      // "42"
Boolean(0)      // false
Boolean("")     // false
Boolean(null)   // false
Boolean(undefined) // false
Boolean([])     // true  ← 空配列でもtrueになる点に注意

等値比較：`==` vs `===`

// == は型変換してから比較（使わない）
0 == "0"    // true
0 == false  // true
"" == false // true

// === は型も含めて厳密比較（常にこちらを使う）
0 === "0"    // false
0 === false  // false
null === undefined // false

ルール：等値比較は必ず === を使う。== は使わない。

演算子

算術演算子

10 + 3   // 13
10 - 3   // 7
10 * 3   // 30
10 / 3   // 3.3333...（JavaScriptに整数除算はない）
10 % 3   // 1   （余り）
2 ** 10  // 1024（べき乗）

let x = 5;
x++;     // 5 → 6（後置インクリメント）
++x;     // 6 → 7（前置インクリメント）
x += 10; // 17

論理演算子と短絡評価

true && false   // false
true || false   // true
!true           // false

// 短絡評価：左辺が決まれば右辺を評価しない
false && console.log("実行されない")
true  || console.log("実行されない")

// 実用的な使い方
const user = null;
const name = user && user.name;  // user がnullなら name もnull（エラーにならない）

const config = null;
const host = config || "localhost";  // configがfalsyなら"localhost"

// Null合体演算子 ??（null/undefinedのときだけデフォルト値を使う）
const port = null ?? 3000;   // 3000
const zero = 0 ?? 3000;     // 0  （0はnullではないので置き換えない）
const empty = 0 || 3000;    // 3000 ←||は0をfalsyと判定するので注意

オプショナルチェーン `?.`

const user = null;

// 従来の書き方
const city = user && user.address && user.address.city;

// オプショナルチェーン（nullやundefinedなら undefined を返す）
const city2 = user?.address?.city;  // undefined（エラーにならない）

// メソッド呼び出しにも使える
user?.getName()  // userがnullでもエラーにならない

まとめ

項目	ポイント
変数宣言	`const` 優先、再代入が必要なら `let`。`var` は使わない
型	7種類のプリミティブ型。`typeof null === "object"` に注意
文字列	テンプレートリテラル（バッククォート）を使う
等値比較	常に `===`。`==` は使わない
論理演算子	`??` と `?.` で null/undefined を安全に扱う

8-1. 変数・データ型・演算子

このセクションで学ぶこと

変数宣言：let と const

const を優先する理由

データ型

typeof で型を調べる

undefined と null の違い

数値の罠：NaN と浮動小数点

文字列