【JavaScript】変数宣言 let の正しい使い方と再代入の仕組み

2026年1月22日

概要

プログラミングにおいて「データ」を一時的に保存しておく箱が「変数」です。 ES6（モダンJavaScript）以降、変数の宣言には主に let と const が使われます。本記事では、値を後から変更（再代入）できる let に焦点を当て、その宣言方法、値の更新、変数同士の結合といった基本的な取り扱い方を解説します。

仕様（入出力）

入力: 文字列、数値、日付オブジェクト、関数などのデータ
出力:
1. 変数の宣言と初期値のログ出力
2. 再代入による変数値の変更確認
3. 変数同士を組み合わせた演算結果の出力

基本の使い方

変数を定義するには let 変数名 = 値; という構文を使用します。一度宣言した変数は、プログラムの途中で中身（値）を入れ替えることができます。

コード全文（HTML / JavaScript）

HTML (index.html)

結果を確認するための土台となるHTMLです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let変数デモ</title>
    <script src="variable-demo.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>コンソールを開いて変数を確認してください</h1>
        <p>F12キーまたは右クリック「検証」からConsoleタブを選択します。</p>
    </div>
</body>
</html>

JavaScript (variable-demo.js)

ユーザー入力を元に、定義、再代入、計算、結合のパターンを網羅したコードです。誤字や参照エラーが起きないよう最適化しています。

/**
 * 変数操作のデモンストレーション
 */
const runVariableDemo = () => {
    console.log('--- 1. 基本的な宣言とデータ型 ---');
    
    // 文字列の代入
    let playerName = "勇者アルス";
    console.log("名前:", playerName);

    // オブジェクト（日付）の代入
    let loginTimestamp = new Date();
    console.log("ログイン時間:", loginTimestamp);

    // 関数の代入（アロー関数）
    let greetAction = () => console.log("ようこそ、ゲームの世界へ！");
    greetAction(); // 変数に格納した関数を実行

    
    console.log('--- 2. 値の再代入（更新） ---');
    
    // 変数の中身を書き換える
    // letは「再代入可能」な変数を定義します
    let currentStatus = "ステータス: 正常";
    console.log(currentStatus);
    
    currentStatus = "ステータス: 毒"; // 値を上書き
    console.log(currentStatus);


    console.log('--- 3. 変数を使った計算 ---');

    // 数値計算
    let baseAttack = 50;
    let bonusAttack = 20;
    
    // 変数同士を足して新しい変数に入れる
    let totalAttack = baseAttack + bonusAttack;
    console.log("攻撃力合計:", totalAttack);


    console.log('--- 4. 文字列の結合 ---');

    // 文字列を持つ変数同士をつなぐ
    let lastName = "佐藤";
    let firstName = "一郎";
    
    // + 演算子で連結
    let fullName = lastName + firstName;
    console.log("フルネーム:", fullName);


    console.log('--- 5. 値のコピー ---');

    // 変数の値を別の変数にコピーする
    let originalScore = 100;
    let copiedScore = originalScore;
    
    console.log("コピーされたスコア:", copiedScore);
};

// デモを実行
runVariableDemo();

カスタムポイント

初期値の設定: let score; のように値を代入せずに宣言だけ行うことも可能です（中身は undefined になります）。後で必ず値が入る場合はこの書き方も使われます。
constへの変更: 再代入する予定がない変数（定数）については、let ではなく const を使うことが推奨されます。コードを読む人に「この値は変わらない」と伝えることができるためです。
変数名: user_name（スネークケース）や userName（キャメルケース）など命名規則を統一しましょう。JavaScriptではキャメルケースが一般的です。

注意点

大文字・小文字の区別: JavaScriptの変数は大文字と小文字を厳密に区別します。fullName と fullname は全く別の変数として扱われます。タイポによる参照エラー（ReferenceError）は非常に多いミスです。
宣言前の使用: 変数は宣言する前に使うことはできません。必ず行の上の方で let x = ... と宣言してから、下の行で使用してください。
変数の二重宣言禁止: 同じスコープ（範囲）内で let userName = ... を2回書くとエラーになります。値を更新したい場合は、2回目以降は let を付けずに userName = ... と書きます。

応用

テンプレートリテラルの活用

文字列を結合する際、+ 記号を使う代わりにバッククォート（`）を使うと、変数をより自然に埋め込むことができます。

let item = "リンゴ";
let price = 120;

// 従来の書き方
// let message = item + "は" + price + "円です。";

// モダンな書き方（テンプレートリテラル）
let message = `${item}は${price}円です。`;
console.log(message);