Day2 後半のゴール
Day2 後半では、前半で学んだ
- 変数とは何か
- let と const の違い
- 「基本は const」という考え方
を、実際のコード例と「よくある失敗」を通して、
より実践的なレベルまで引き上げます。
特に、次の3つをしっかり体に染み込ませます。
Day2 後半で身につけたいこと
let と const を状況に応じて選べるようになる
良い変数名・悪い変数名の感覚をつかむ
初心者がやりがちなミスを、自分で気づいて直せるようになる
let と const の使い分けを深掘りする
状況ごとに考える「これは let？それとも const？」
前半では「基本は const、再代入する場合のみ let」と話しました。
後半では、具体的なシチュエーションを見ながら、
自分で判断できるようになることを目指します。
例1：ログイン中のユーザー名
const userName = "Taro";
console.log("ログイン中のユーザー:", userName);
ログインしているユーザー名は、
その処理の中では途中で変わりません。
したがって const が自然です。
例2：カート内の商品数
let itemCount = 0;
console.log("カート内の商品数:", itemCount);
itemCount = itemCount + 1;
console.log("商品を1つ追加:", itemCount);
itemCount = itemCount + 2;
console.log("さらに2つ追加:", itemCount);
カート内の商品数は、
ユーザーの操作によって増えたり減ったりします。
このように「変化していく値」は let を使うのが適切です。
深掘り：なぜ「なんでも let」は危険なのか
もし、すべてを let で書いてしまうと、
「この変数はどこかで変わるかもしれない」という前提で
コードを読まなければいけなくなります。
let price = 1000;
// ここで何か処理がたくさんある…
console.log(price); // 本当にまだ 1000 だろうか？
セキュリティの観点で見ると、
「変わらないはずの値が、どこかで書き換えられていた」
という状況は非常に危険です。
const を使うことで、
- この値は途中で変わらない
- 変えようとしたらエラーになる
という“安全装置”をつけることができます。
変数命名を実践レベルで考える
良い名前は「読んだ瞬間に意味がわかる」
変数名は、動けば何でもいいわけではありません。
むしろ「どう名前をつけるか」で、コードの読みやすさが大きく変わります。
悪い例
let a = 20;
let b = 30;
let c = a + b;
console.log(c);
これでも動きますが、
a, b, c が何を表しているのか、まったくわかりません。
良い例
const itemPrice = 20;
const shippingFee = 30;
const totalPrice = itemPrice + shippingFee;
console.log(totalPrice);
何を計算しているのかが、
コードを見ただけでイメージできます。
単語をつなぐときのルール（キャメルケース）
JavaScript では、
複数の単語をつなげるときに「キャメルケース」という書き方をよく使います。
const userName = "Taro";
const totalScore = 120;
const maxSpeed = 80;
最初の単語は小文字、
2つ目以降の単語の先頭を大文字にする書き方です。
避けたほうがいい名前
意味があいまいな名前
let data;
let info;
let value;
何でもかんでも data や value にしてしまうと、
後から読んだときに「結局これ何？」となります。
一文字だけの名前
let x;
let y;
let z;
数学の式ならまだしも、
アプリケーションのコードでは意味が薄すぎます。
セキュリティ視点：名前で意図を伝える重要性
セキュリティ的に重要な値（パスワード、トークン、権限など）は、
変数名で「これは重要なものだ」とわかるようにしておくと安全です。
const userPassword = "secret";
const adminToken = "xxxx";
こうしておくことで、
「この変数は雑に扱ってはいけないな」と
コードを読む人に伝えることができます。
初心者がやりがちなミスとその直し方
ミス1：宣言せずにいきなり使う
間違った例
name = "Taro";
console.log(name);
この書き方は、
古い JavaScript では動いてしまうこともありますが、
今の書き方としては完全にアウトです。
必ず let か const をつけて宣言します。
正しい例
const name = "Taro";
console.log(name);
ミス2：同じ名前をもう一度宣言する
間違った例
let score = 10;
let score = 20; // エラー
同じスコープ（同じ範囲）の中で、
同じ名前の変数をもう一度宣言することはできません。
正しい例
let score = 10;
score = 20; // これはOK（再代入）
ミス3：const なのに再代入しようとする
間違った例
const age = 20;
age = 21; // エラー
const は「中身を変えない約束」です。
変えようとするとエラーになります。
正しい例
let age = 20;
age = 21; // 変えたいなら let を使う
エラーは「悪いこと」ではなく「ガイド」
エラーが出たときは、
ブラウザのコンソールに表示されるメッセージをよく見てください。
たとえば、
Identifier 'score' has already been declared
「score はすでに宣言されているよ」Assignment to constant variable.
「const の変数に代入しようとしているよ」
など、ちゃんとヒントが書いてあります。
実践：Day2 後半のサンプルコード
例題1：ユーザー情報を変数で管理する
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day2 後半</title>
</head>
<body>
<h1>Day2: 変数の使い分け</h1>
<script>
const userName = "Taro";
const userAge = 20;
let loginCount = 0;
console.log("ユーザー名:", userName);
console.log("年齢:", userAge);
console.log("ログイン回数:", loginCount);
loginCount = loginCount + 1;
console.log("再ログイン後の回数:", loginCount);
</script>
</body>
</html>
ここでは、
- 変わらない情報（名前・年齢）は const
- 変わっていく情報（ログイン回数）は let
という使い分けをしています。
例題2：悪い命名と良い命名の比較
悪い例
let a = "Taro";
let b = 20;
let c = 1;
良い例
const userName = "Taro";
const userAge = 20;
let loginCount = 1;
どちらも動きますが、
後から読むときの理解しやすさがまったく違います。
重点理解の再確認
基本は const、再代入する場合のみ let
Day2 全体を通して、
この一文がいちばん大事なメッセージです。
まず const で書く
「あ、この値は途中で変えたいな」と気づいたら let に変える
この順番を守るだけで、
- バグが減る
- セキュリティリスクが減る
- 他人が読んでもわかりやすいコードになる
という、かなり大きなメリットがあります。
Day2 の締めくくり
Day2 であなたが手に入れたのは、
「値に名前をつけて扱う力」です。
これは、今後の
- 条件分岐
- 繰り返し
- 関数
- オブジェクト
など、あらゆる文法の土台になります。
もし余力があれば、
自分の好きな情報（好きなゲーム名、推しの名前、住んでいる都市など）を
変数にして console.log で表示してみてください。
次に進む前に、
「const と let、どっちを使うか自分で選べる感覚」
を、もう一度味わっておくといいですね。