JavaScript | ゼロからはじめるプログラミング、30日で基礎を学ぶJavaScript:JavaScript文法の基礎 - Day2:変数

JavaScript JavaScript
スポンサーリンク

Day2 前半のゴール

Day2 のテーマは「変数」です。
ここをしっかり押さえられるかどうかで、この先の理解スピードが大きく変わります。

前半では次の3つに集中します。

Day2 前半でやること

変数とは何かをイメージで理解する

letconst の基本的な違いを知る

「基本は const、必要なときだけ let」という考え方を身につける

文法を丸暗記するのではなく、
「なぜそう書くのか」をイメージでつかむことを大事にしていきます。


変数とは何か

変数は「名前をつけた箱」

プログラミングでよく使う表現ですが、
変数は「値を入れておく箱」に名前をつけたものだと思ってください。

たとえば、次のコードを見てみましょう。

let name = "Taro";
JavaScript

これは、

  • name という箱を用意して
  • その中に "Taro" という文字列を入れる

という意味になります。

なぜ変数が必要なのか

もし変数がなかったら、
同じ値を何度も直接書かなければいけません。

console.log("Taro");
console.log("Taro");
console.log("Taro");
JavaScript

これを変数を使って書き直すと、こうなります。

let name = "Taro";

console.log(name);
console.log(name);
console.log(name);
JavaScript

「一度だけ中身を決めて、あとは名前で呼び出す」
これが変数の一番の役割です。

セキュリティ視点のひとこと

変数は「データを一時的に持つ場所」です。
ユーザーから受け取った値や、外部から来たデータも変数に入ります。

だからこそ、
「この変数にはどんな種類の値が入るのか」
「途中で書き換えられていいのか」
を意識することが、後々セキュリティ面でも重要になってきます。


let と const の基本

let と const は「変数の宣言のしかた」

JavaScript では、変数を作るときに
let または const を使います。

let name = "Taro";
const age = 20;
JavaScript

どちらも「変数を作る」という意味ですが、
大きな違いは「あとから中身を変えられるかどうか」です。

let は「あとから中身を変えてもいい箱」

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

score = 90;
console.log(score);  // 90
JavaScript

let で作った変数は、あとから別の値を代入できます。
これを「再代入」と呼びます。

const は「中身を変えない箱」

const age = 20;
console.log(age);  // 20

age = 21;  // ここでエラー
JavaScript

const で作った変数は、一度値を入れたら
あとから別の値を代入することはできません。

「固定したい値」「途中で変わってほしくない値」に使います。

深掘り:なぜ「基本は const」なのか

初心者のうちは、
「変えられる let の方が便利そう」と思うかもしれません。

でも、実務では 「基本は const」 が推奨されます。

理由はシンプルで、

  • const:
    「この変数は途中で変わらない」とコードを読む人に約束できる
  • let:
    「どこかで変わるかもしれない」ので、追いかけるのが大変になる

からです。

セキュリティの観点でも、
「変わらないはずの値が、どこかで書き換えられていた」
という状況はバグや脆弱性の原因になります。

変数が勝手に変わらないように、
「変える必要がないものは const にしておく」
これは安全なコードを書くための、かなり重要な習慣です。


実例で理解する let と const

例1:ユーザー名はどっち?

const name = "Taro";
console.log(name);
JavaScript

ユーザー名が一度決まったら、
その処理の中で変える必要は基本的にありません。
なので const が自然です。

例2:スコアはどっち?

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

score = score + 10;
console.log(score);  // 10
JavaScript

ゲームのスコアのように、
途中で値が変わっていくものは let が向いています。

例3:今日の日付はどっち?

const today = "2026-05-11";
console.log(today);
JavaScript

「今日」という概念は、そのプログラムが動いている間は変わりません。
なので const が適切です。


変数命名の基本(前半)

変数名は「自分と他人へのメッセージ」

変数名は、あとからコードを読む人へのメッセージです。
ax のような名前でも動きますが、
何を表しているのかがわからなくなります。

let a = "Taro";      // 悪い例(意味がわからない)
let name = "Taro";   // 良い例(何を表しているか一目でわかる)
JavaScript

英語で書くのが基本

JavaScript の世界では、変数名は基本的に英語で書きます。

const userName = "Taro";
const userAge = 20;
JavaScript

日本語でも書けなくはないですが、
トラブルの元になりやすいので避けるのが無難です。

let 名前 = "太郎";  // 技術的には動くが、実務ではほぼ使われない
JavaScript

ルール:使える文字

変数名に使えるのは、

  • アルファベット(a〜z, A〜Z)
  • 数字(0〜9)
  • _(アンダースコア)
  • $

ただし、最初の1文字目に数字は使えません。

let user1 = "Taro";   // OK
let _user = "Taro";   // OK
let 1user = "Taro";   // NG(エラー)
JavaScript

実践コード:Day2 前半のサンプル

サンプル1:名前と年齢を変数に入れて表示する

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Day2 変数</title>
  </head>
  <body>
    <h1>Day2: 変数の基本</h1>

    <script>
      const name = "Taro";
      const age = 20;

      console.log("名前:", name);
      console.log("年齢:", age);
    </script>
  </body>
</html>

ここでは、
「途中で変える必要がない」ので、両方とも const を使っています。

サンプル2:スコアを更新してみる

<script>
  let score = 0;
  console.log("スタート時のスコア:", score);

  score = score + 10;
  console.log("アイテム取得後のスコア:", score);
</script>

このように、
「変わっていく値」に対してだけ let を使う、
という感覚を少しずつ身につけていきましょう。


重点理解の整理

基本は const、再代入する場合のみ let

ここが Day2 前半の一番大事なポイントです。

まず const で書いてみる

「途中で値を変えたい」と思ったときだけ let に変える

この順番を守るだけで、
コードの安全性と読みやすさが一気に上がります。

セキュリティスペシャリストとしての感覚で言うと、
「変えられる場所は少ないほど安全」です。
let を乱用せず、const をデフォルトにすることは、
小さなようでいて、とても大きな防御力アップになります。


この後半で扱う予定の内容

後半では、次のような内容を扱っていきます。

Day2 後半の予定

もう少し複雑な例で let / const を使い分ける

ダメな変数名・良い変数名の具体例

ありがちなミス(宣言忘れ、再宣言など)

簡単な練習問題で手を動かす

前半で学んだ「箱のイメージ」と「基本は const」という考え方を、
後半でしっかり体に落とし込んでいきましょう。

タイトルとURLをコピーしました