こんにちは！フロントエンドの現場で長年コードと向き合ってきた私から、JavaScriptを学び始めたあなたへ、最初にして最大の「武器の選び方」についてお話しします。
プログラミングを始めたばかりの頃、変数宣言の `var`, `let`, `const` の使い分けに迷うのは、誰もが通る道です。「全部同じじゃないの？」と思いたくなる気持ち、痛いほど分かります。でも、ここを少し意識するだけで、あなたの書くコードは驚くほど「壊れにくく、読みやすいもの」に変わります。
今日は、難しい専門用語は脇に置いて、身近な例えと一緒に紐解いていきましょう。
—
1. そもそも変数は「箱」です
まず、変数をイメージしてください。「名前を書いたラベルを貼った、中身を入れる箱」です。
- `var`: 何でも入れられるし、中身も自由に入れ替えられる。さらに、どこにでも置けてしまう「魔術的な箱」。
- `let`: 中身を入れ替えることができる「普通の箱」。
- `const`: 一度中身を入れたら、もう二度と開けられない「頑丈な接着剤で閉じた箱」。
—
2. なぜ `var` を使ってはいけないのか？
昔のJavaScriptには `var` しかありませんでした。でも、今の現場で `var` を見かけたら、ベテラン勢はみんな眉をひそめます。
なぜなら、`var` は「どこでも使えてしまう」というルーズさを持っているからです。例えば、部屋の中で隠し場所を探すとき、あちこちに同じ名前の箱が散らばっていたら混乱しますよね？ `var` はプログラムの離れた場所で意図せず中身が書き換わってしまう「バグの温床」になりやすいんです。
「巻き上げ（Hoisting）」という不思議な現象（宣言する前に使えちゃったりする）も、初心者の方を迷路に迷い込ませる原因です。「varは古き良き時代の遺物」として、今はそっと棚にしまっておきましょう。
—
3. `const` を優先する「守りの姿勢」
現代のJavaScript開発では、「迷ったらとりあえず `const`」が鉄則です。
なぜなら、一度決めたら変わらないというルールがあるだけで、コードを読む人は「あ、これは途中で変わらないんだな」と安心して読み進められるからです。これは、お料理で例えるなら「レシピに使う材料を計量して、ボウルに入れたらもう動かさない」という整った環境に似ています。
// 良い例：ずっと変わらない設定値などは const で書く
const TAX_RATE = 0.1; // 消費税率は変わらないのでconst
const userName = “田中太郎”;
// もし間違えて TAX_RATE = 0.2; と書き換えようとすると
// ブラウザが「それはダメだよ！」とエラーを出して止めてくれます。
// これがバグを未然に防ぐ「守りの姿勢」です。
—
4. `let` は「どうしても必要なときだけ」使う
「じゃあ、中身が変わるものはどうすればいいの？」という時に登場するのが `let` です。
例えば、お買い物の合計金額を計算するとき。最初は「0円」からスタートして、商品を追加するたびに金額が増えていきますよね。こういった「変化するもの」には `let` を使います。
// 合計金額のように、値が変化していくものは let を使う
let totalAmount = 0;
totalAmount = totalAmount + 100; // 100円の商品を追加
totalAmount = totalAmount + 500; // 500円の商品を追加
console.log(totalAmount); // 結果は 600
`let` を見ると、私たちは「あ、この変数はあとで中身が書き換わるんだな」と心構えができます。
—
結論：私たちが守るべき「3つのルール」
今日から、あなたのコードをこう変えてみてください。
1. 基本は `const` を使う: 中身を書き換える必要がないなら、すべて `const` にしましょう。
2. 書き換える必要が出てきたら `let` に格上げする: 最初から `let` を使わず、必要になったときだけ `let` に変えるのがスマートです。
3. `var` は使わない: 潔く、卒業しましょう。
—
最後に、あなたへ
最初から完璧に使い分けるのは難しいかもしれません。でも、それでいいんです。コードを書いていて「あれ、これって `const` でいけたかな？」と立ち止まること自体が、あなたがプロフェッショナルへ一歩近づいている証拠です。
泥臭く、試行錯誤しながら書いたコードこそ、一番身につきます。怖がらずにエディタを開いて、まずは `const` を打ってみてください。応援しています！
コメント