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

// 文字列（String）の例です

const greeting = "こんにちは";
const name = "太郎";
const message = 'JavaScriptを勉強中です';

// コンソールに表示してみます
console.log(greeting);      // こんにちは
console.log(name);          // 太郎
console.log(message);       // JavaScriptを勉強中です

// 文字列をつなげて文章を作る例です

const greeting = "こんにちは、";
const name = "太郎";
const end = "さん！";

const fullMessage = greeting + name + end;

console.log(fullMessage); // こんにちは、太郎さん！

const numText = "100"; // 見た目は数字ですが、型は文字列です

// 数値（Number）の例です

const age = 30;        // 整数
const price = 1980;    // 整数
const taxRate = 0.1;   // 小数

console.log(age);      // 30
console.log(price);    // 1980
console.log(taxRate);  // 0.1

// 数値の計算例です

const price = 2000;
const taxRate = 0.1;

// 税額を計算
const tax = price * taxRate;

// 合計金額を計算
const total = price + tax;

console.log("税額：" + tax);       // 税額：200
console.log("合計金額：" + total); // 合計金額：2200

const num = 100;      // 数値
const text = "100";   // 文字列

console.log(num + num);   // 200（数値同士の足し算）
console.log(num + text);  // "100100"（文字列として連結されます）

// 真偽値（Boolean）の例です

const isAdult = true;      // 大人かどうか
const hasTicket = false;   // チケットを持っているかどうか

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

// null の例です

let selectedItem = null; // まだ何も選ばれていない状態

console.log(selectedItem); // null

// undefined の例です

let value; // 値を代入していない

console.log(value); // undefined

// typeof の基本的な使い方です

console.log(typeof "こんにちは"); // "string"
console.log(typeof 123);         // "number"
console.log(typeof true);        // "boolean"

let value;
console.log(typeof value);       // "undefined"

let empty = null;
console.log(typeof empty);       // "object"（歴史的な仕様でこうなっています）

// ==============================
// Day 3：データ型を調べる練習
// ==============================

// 文字列（String）
const text = "JavaScriptを勉強中";

// 数値（Number）
const count = 3;
const price = 1980;

// 真偽値（Boolean）
const isAdult = true;
const hasTicket = false;

// null
const emptyValue = null;

// undefined（宣言だけして値を入れていない）
let notAssigned;

// typeof を使って、それぞれの型を調べてみます
console.log("text の型：" + typeof text);           // "string"
console.log("count の型：" + typeof count);         // "number"
console.log("price の型：" + typeof price);         // "number"
console.log("isAdult の型：" + typeof isAdult);     // "boolean"
console.log("hasTicket の型：" + typeof hasTicket); // "boolean"
console.log("emptyValue の型：" + typeof emptyValue); // "object"（null はこう返ります）
console.log("notAssigned の型：" + typeof notAssigned); // "undefined"

// ==============================
// Day 3：データ型 練習テンプレート
// ==============================

// 1. いろいろな値を用意してみる

// 文字列（String）
// クォートで囲まれたものは文字列になります
const userName = "太郎";
const greeting = "こんにちは";

// 数値（Number）
// 整数も小数も Number 型です
const age = 25;
const height = 170.5;

// 真偽値（Boolean）
// true / false の二択です
const isStudent = true;
const hasJob = false;

// null
// 意図的に「何も入っていない」ことを表します
const favoriteFood = null;

// undefined
// 宣言しただけで値を入れていないときの状態です
let futurePlan;

// 2. typeof で型を調べてみる

console.log("=== typeof の結果 ===");

console.log("userName の型：" + typeof userName);   // "string"
console.log("greeting の型：" + typeof greeting);   // "string"

console.log("age の型：" + typeof age);             // "number"
console.log("height の型：" + typeof height);       // "number"

console.log("isStudent の型：" + typeof isStudent); // "boolean"
console.log("hasJob の型：" + typeof hasJob);       // "boolean"

console.log("favoriteFood の型：" + typeof favoriteFood); // "object"（null はこう返ります）
console.log("futurePlan の型：" + typeof futurePlan);     // "undefined"

// 3. 自分で値を差し替えてみましょう
// 下の行を、自分の情報や好きな値に書き換えて練習してみてください

const city = "東京";
const score = 95;
const isHappy = true;

console.log("city の型：" + typeof city);   // "string"
console.log("score の型：" + typeof score); // "number"
console.log("isHappy の型：" + typeof isHappy); // "boolean"

// ユーザー名やメールアドレスなどの文字列の例です

const userName = "山田太郎";      // ユーザー名
const email = "taro@example.com"; // メールアドレス
const address = "東京都新宿区";   // 住所

console.log(userName);
console.log(email);
console.log(address);

// 数値（Number）の例です

const age = 28;          // 年齢
const points = 1200;     // 所持ポイント
const purchaseCount = 5; // 購入回数

console.log(age);
console.log(points);
console.log(purchaseCount);

// 真偽値（Boolean）の例です

const isMember = true;        // 会員かどうか
const wantsNewsletter = false; // メルマガ希望かどうか
const isLoggedIn = true;      // ログイン中かどうか

console.log(isMember);
console.log(wantsNewsletter);
console.log(isLoggedIn);

// null の例です

const profileImage = null; // プロフィール画像が未設定の状態

console.log(profileImage); // null

// undefined の例です

let phoneNumber; // 電話番号を後で入れる予定

console.log(phoneNumber); // undefined

// typeof の基本的な使い方です

console.log(typeof "山田太郎"); // "string"
console.log(typeof 28);         // "number"
console.log(typeof true);       // "boolean"

let value;
console.log(typeof value);      // "undefined"

const empty = null;
console.log(typeof empty);      // "object"（null は歴史的な理由でこう返ります）

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

// ユーザー名（文字列）
const userName = "山田太郎";

// 年齢（数値）
const age = 28;

// 会員かどうか（真偽値）
const isMember = true;

// メールアドレス（文字列）
const email = "taro@example.com";

// プロフィール画像のURL（まだ未設定なので null）
const profileImageUrl = null;

// 電話番号（後で登録する予定なので undefined のまま）
let phoneNumber; // 値を代入していないので、現時点では undefined になります

// ユーザー情報の型をチェックして表示する

console.log("=== ユーザー情報の型チェック ===");

// 文字列（String）
console.log("userName の値：" + userName);
console.log("userName の型：" + typeof userName); // "string"

console.log("email の値：" + email);
console.log("email の型：" + typeof email);       // "string"

// 数値（Number）
console.log("age の値：" + age);
console.log("age の型：" + typeof age);           // "number"

// 真偽値（Boolean）
console.log("isMember の値：" + isMember);
console.log("isMember の型：" + typeof isMember); // "boolean"

// null
console.log("profileImageUrl の値：" + profileImageUrl);
console.log("profileImageUrl の型：" + typeof profileImageUrl); // "object"（null はこう返ります）

// undefined
console.log("phoneNumber の値：" + phoneNumber);
console.log("phoneNumber の型：" + typeof phoneNumber); // "undefined"

// ==============================
// Day 3：ユーザー情報の型チェックプログラム テンプレート
// ==============================

// 1. ユーザー情報を変数として用意する

// ユーザー名（自分の名前に書き換えてOKです）
const userName = "山田太郎";

// 年齢（数字だけを書きます）
const age = 28;

// 会員かどうか（true か false のどちらか）
const isMember = true;

// メールアドレス（架空のものでもOKです）
const email = "taro@example.com";

// プロフィール画像のURL（まだ未設定なので null にしておきます）
const profileImageUrl = null;

// 電話番号（後で登録する予定なので、今は値を入れません）
let phoneNumber; // 値を代入していないので undefined になります

// 2. typeof を使って、それぞれの型をチェックする

console.log("=== ユーザー情報の型チェック ===");

// ユーザー名
console.log("userName の値：" + userName);
console.log("userName の型：" + typeof userName); // "string"

// 年齢
console.log("age の値：" + age);
console.log("age の型：" + typeof age); // "number"

// 会員フラグ
console.log("isMember の値：" + isMember);
console.log("isMember の型：" + typeof isMember); // "boolean"

// メールアドレス
console.log("email の値：" + email);
console.log("email の型：" + typeof email); // "string"

// プロフィール画像URL
console.log("profileImageUrl の値：" + profileImageUrl);
console.log("profileImageUrl の型：" + typeof profileImageUrl); // "object"（null はこう返ります）

// 電話番号
console.log("phoneNumber の値：" + phoneNumber);
console.log("phoneNumber の型：" + typeof phoneNumber); // "undefined"

// 3. 自分の情報に書き換えて練習してみましょう

// 例：別のユーザー情報を追加してみる
const anotherUserName = "佐藤花子";
const anotherAge = 32;
const anotherIsMember = false;

console.log("anotherUserName の値：" + anotherUserName);
console.log("anotherUserName の型：" + typeof anotherUserName); // "string"

console.log("anotherAge の値：" + anotherAge);
console.log("anotherAge の型：" + typeof anotherAge); // "number"

console.log("anotherIsMember の値：" + anotherIsMember);
console.log("anotherIsMember の型：" + typeof anotherIsMember); // "boolean"