初心者向けJavaScriptガイド｜基礎から応用まで完全攻略（第2部: データと制御構造:変数とデータ型をマスターする[変数の種類、データ型、型変換]）

変数とは何か？

プログラミングにおいて変数はデータを格納するための箱のようなものです。JavaScriptでは、変数を使って値を保存し、必要なときに取り出したり更新したりできます。

変数の宣言

JavaScriptでは、let、const、varの3つのキーワードを使って変数を宣言します。

let

letは、再代入が可能な変数を作成します。

let age = 25;
console.log(age); // 25
age = 26;
console.log(age); // 26

const

constは再代入ができない定数を宣言します。

const name = "太郎";
console.log(name); // 太郎
// name = "花子"; // エラー

var

varは古い方法で、現在はletやconstを推奨します。

var city = "東京";
console.log(city);

データ型とは何か？

JavaScriptには値を分類するためのデータ型があります。データ型を理解することで、コードの動作を予測しやすくなります。

基本的なデータ型

1. 数値型（Number）

数値を表します。

let score = 95;
console.log(score); // 95

2. 文字列型（String）

文字や文字列を表します。

let greeting = "こんにちは";
console.log(greeting); // こんにちは

3. 真偽値型（Boolean）

trueまたはfalseの値を取ります。

let isStudent = true;
console.log(isStudent); // true

4. 未定義型（Undefined）

値が設定されていない場合にundefinedとなります。

let unknown;
console.log(unknown); // undefined

5. Null

意図的に空の値を設定する場合に使用します。

let emptyValue = null;
console.log(emptyValue); // null

6. オブジェクト型（Object）

複雑なデータを扱うための型です。

let user = { name: "太郎", age: 25 };
console.log(user.name); // 太郎

型変換

JavaScriptでは、データ型を変更することができます。これを型変換と言います。

暗黙的な型変換

JavaScriptが自動で型を変換します。

console.log("5" + 3); // "53"
console.log("5" - 3); // 2

明示的な型変換

開発者が意図的に型を変換します。

数値に変換

let str = "123";
let num = Number(str);
console.log(num); // 123

文字列に変換

let value = 456;
let strValue = String(value);
console.log(strValue); // "456"

真偽値に変換

let emptyString = "";
console.log(Boolean(emptyString)); // false
let nonEmptyString = "Hello";
console.log(Boolean(nonEmptyString)); // true

応用例

ここでは、変数とデータ型を組み合わせた簡単なプログラムを作成します。

シンプルな計算機

let num1 = 10;
let num2 = 20;
let sum = num1 + num2;
console.log("合計:", sum); // 合計: 30

型チェック

typeofを使って変数のデータ型を確認できます。

let value = "こんにちは";
console.log(typeof value); // "string"

フォームの入力確認

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入力確認</title>
</head>
<body>
    <form>
        <label for="age">年齢:</label>
        <input type="text" id="age">
        <button type="button" onclick="checkAge()">確認</button>
    </form>
    <script>
        function checkAge() {
            let age = document.getElementById('age').value;
            if (Number(age) >= 20) {
                alert('成人です');
            } else {
                alert('未成年です');
            }
        }
    </script>
</body>
</html>

まとめ

この記事では、JavaScriptの変数とデータ型について詳しく解説しました。次回は「演算子と条件分岐の基本」について学びます。これらの知識を使って、より高度なプログラムを作成してみましょう。