2025年8月28日

JavaScriptの基本：変数・値・データ型

// =======================================
// JavaScriptの基本：変数・値・データ型
// =======================================

// =======================================
// 1. 変数の宣言と値の代入（const / let）
// =======================================

// constで変数を定義（再代入不可）
const totalPrice = 18000 + 10000; // 合計金額を計算して代入
console.log("constで変数totalPriceを定義して呼び出す→" + totalPrice);
console.log("👉 上の行では 28000 が表示される");

// letで変数を定義（再代入可能）
let userValue = 1; // 変数userValueに1を代入
userValue = "22222"; // 再代入で文字列に変更可能
console.log("letで変数userValueを1で宣言後、22222に再代入して呼び出す→" + userValue);
console.log("👉 上の行では 22222 が表示される");

// 計算結果を変数に代入
const result = 1 + 2;
console.log("constで定義した変数result = 1+2 を呼び出す→" + result);
console.log("👉 上の行では 3 が表示される");

// ""で囲うと文字列として認識
console.log("Hello" + "World");
console.log("👉 上の行では HelloWorld が表示される");
console.log("1" + "1");
console.log("👉 上の行では 11 が表示される（文字列の連結）");

// =======================================
// 2. データ型の確認（typeof）
// =======================================

console.log("=== typeof あり / なし の比較を確認します ===");

// --------------------------------------------------
// 文字列 string
// --------------------------------------------------
console.log("=== 文字列 ===");
console.log('"ラスカル" → ' + "ラスカル"); // → は区切りの記号
console.log("👉 上の行では 「ラスカル」がそのまま表示される");
console.log('"ラスカル" の typeof → ' + typeof "ラスカル");
console.log("👉 上の行では string が表示される（文字列型）");

// --------------------------------------------------
// 数値 number
// --------------------------------------------------
console.log("=== 数値 ===");
console.log("10 → " + 10);
console.log("👉 上の行では 10 がそのまま表示される");
console.log("10 の typeof → " + typeof 10);
console.log("👉 上の行では number が表示される（数値型）");

// --------------------------------------------------
// 論理値 boolean
// --------------------------------------------------
console.log("=== 論理値 ===");
console.log("true → " + true);
console.log("👉 上の行では true がそのまま表示される");
console.log("true の typeof → " + typeof true);
console.log("👉 上の行では boolean が表示される（真偽値型）");

// =======================================
// 3. null と undefined
// =======================================

// null の使用例（値を空にする）
let errorMessage = null;
console.log("letで変数errorMessageにnullを代入→" + errorMessage);
console.log("👉 上の行では null が表示される（値を意図的に空にした）");

// undefined の使用例（値を設定していない場合）
let errorMessage2;
console.log("値を設定していない変数errorMessage2を呼び出す→" + errorMessage2);
console.log("👉 上の行では undefined が表示される（値が未定義）");

// =======================================
// ポイントまとめ
// =======================================
// 1. const で定義した変数は再代入できない
// 2. let で定義した変数は再代入可能
// 3. "" または '' で囲むと文字列 string として扱われる
// 4. typeof なし → 値そのものが表示される
// 5. typeof あり → 値のデータ型（種類）が表示される
// 6. null は値を空にするために使用
// 7. undefined は値が設定されていない場合に自動的に出力される
// 8. 「→」は出力を見やすくする記号、「+」は文字列をつなげる演算子