こんにちは、かつコーチです。
前回はエディタ設定の記事で、VSCodeを使った快適な開発環境の作り方を紹介しました。
今回からは、いよいよJavaScriptの基本文法に入っていきます。
最初のテーマは「変数の宣言」です。
let・const・varという3つのキーワードが登場するので、それぞれの違いを整理していきましょう。
変数とは？
値を入れておく「箱」
変数とは、数値や文字列などのデータを一時的に入れておく箱のようなものです。
たとえば「ユーザーの名前」や「合計金額」など、プログラムの中で何度も使う値を変数に入れておくことで、後から簡単に呼び出したり書き換えたりできます。
let userName = "かつコーチ";
console.log(userName);
// 出力: かつコーチ
userName という名前の箱に "かつコーチ" という文字列を入れて、console.log で中身を表示しています。
なぜ宣言が必要なのか
JavaScriptでは、変数を使う前に「これから変数を使いますよ」という宣言をする必要があります。
その宣言に使うキーワードが let・const・var の3種類です。
同じ「変数を作る」という目的のキーワードですが、性質がそれぞれ異なります。
varの特徴と問題点
varの基本の書き方
var は昔からあるキーワードで、こんな風に書きます。
var age = 20;
console.log(age);
// 出力: 20
見た目は let とほとんど同じですが、var には初心者がハマりやすい落とし穴があります。
スコープが「関数単位」でしか区切られない
スコープとは、その変数が有効に使える範囲のことです。
var は { } で囲んだブロックの中で宣言しても、そのブロックの外からアクセスできてしまいます。
if (true) {
var message = "こんにちは";
}
console.log(message);
// 出力: こんにちは（ifブロックの外なのに参照できてしまう）
一見便利に見えるかもしれませんが、私が実際につまずいたのはまさにこの挙動でした。
同じ名前の変数をfor文のループの中でうっかり再利用してしまい、想定外の値で処理が進んでしまうバグに何時間も気づけなかったことがあります。
原因を探ってみると、var がブロックの外まで有効になっていたことで、別の場所で書いたつもりの変数が実は同じものを指していた、というオチでした。
こうした事故を防ぐために生まれたのが let と const です。
letとconstの基本
letの書き方と特徴
let は var の弱点を解消したキーワードで、{ } の中だけで有効なブロックスコープを持ちます。
if (true) {
let message = "こんにちは";
console.log(message);
// 出力: こんにちは
}
console.log(message);
// エラー: message is not defined
if の外に出ると message は存在しないものとして扱われるため、意図しない場所で変数が参照される事故を防げます。
let で宣言した変数は、後から値を再代入できます。
let count = 1;
count = 2;
console.log(count);
// 出力: 2
constの書き方と特徴
const も let と同じくブロックスコープを持ちますが、大きな違いは再代入ができないという点です。
const siteName = "かつコーチのブログ";
console.log(siteName);
// 出力: かつコーチのブログ
一度 const で値を入れると、それを別の値に書き換えることはできません。
const siteName = "かつコーチのブログ";
siteName = "別のブログ";
// エラー: Assignment to constant variable.
「値を変えるつもりがない変数」には const を使うことで、コードを読む人に「これは後から変わらない値だ」という意図を伝えられます。
どれを使えばいいのか
基本方針は「constを優先、必要ならlet」
現在のJavaScript開発では、次のような優先順位で使い分けるのが一般的です。
- まず
constで宣言してみる - 後から値を変える必要が出てきたら
letに変更する varは基本的に使わない（古いコードで見かけたときに読めれば十分）
// ✅ 再代入しない値はconst
const taxRate = 0.1;
// ✅ 後から値が変わる値はlet
let cartTotal = 0;
cartTotal = cartTotal + 1000;
❌ Before：とりあえずvarを使ってしまう例
function calcTotal(price) {
var tax = price * 0.1;
for (var i = 0; i < 3; i++) {
var tax = tax + i;
// 意図せず外側のtaxまで書き換わってしまう
}
return tax;
}
console.log(calcTotal(1000));
var は同じ名前で何度でも宣言し直せてしまうため、ループの中で意図せず外側の変数を上書きしてしまうことがあります。
✅ After：constとletを使い分けた例
function calcTotal(price) {
const baseTax = price * 0.1;
let total = baseTax;
for (let i = 0; i < 3; i++) {
total = total + i;
}
return total;
}
console.log(calcTotal(1000));
// 出力: 103
const と let はブロックスコープを持つため、for の中の i は for の外に漏れ出しません。
同じ名前を重複して宣言しようとするとエラーになるので、うっかりミスにもすぐ気づけます。
まとめ
この記事のポイント
varは関数単位のスコープしか持たず、意図しない場所で変数が参照される事故が起きやすいletはブロックスコープを持ち、再代入できる変数を宣言するときに使うconstはブロックスコープを持ち、再代入できない変数を宣言するときに使う- 基本方針は「まず
const、必要ならlet、varは使わない」
次に読むべき記事
次回は、JavaScriptの主なデータ型について解説します。
→ 次の記事：JavaScriptの主なデータ型