【JS第2回】変数とデータ型の基本ルール
プログラム内でデータを一時的に保存する「変数」と、データの性質を決める「データ型」を学びます。モダンなJavaScriptにおけるletとconstの明確な使い分けを身につけましょう。
1. 変数と定数(let と const)
プログラミングにおける 変数(Variable) とは、値(データ)を一時的に入れておく名前付きの「箱」のようなものです。JavaScriptで変数を宣言する際は、主に以下の2つのキーワードを使用します。
① let(再代入可能な変数)
後から中身の値を「再代入(上書き)」できる変数です。ゲームのスコアやループの周回数など、値が途中で変わる可能性がある場合に使用します。
② const(再代入不可能な定数)
一度値を入れたら、後から書き換えることができない「定数」です。消費税率や固定のユーザー設定など、書き換える必要のない(かつ書き換わるとバグになる)安全な値に使用します。
👑 実務の黄金ルール:「基本はconst、必要なときだけlet」
プログラムのバグを極限まで減らすために、開発の現場では**「すべての変数をまずはconstで宣言する」**のが常識です。処理の中でどうしても値を書き換える必要が出てきた要素のみ、局所的に `let` へ変更します。これにより、想定外の書き換えバグを完全に排除できます。
2. 代表的な3大データ型
JavaScriptで扱う値には、それぞれ「データの種類」であるデータ型が定義されています。
- 数値型(Number): 整数や小数を表します。クォーテーションで囲まずに書きます。例:
100や3.14。 - 文字列型(String): 文字の並びを表します。ダブルクォーテーション `”` やシングルクォーテーション `’` で囲んで記述します。例:
"Hello"。 - 真偽値型(Boolean): イエスかノーかの2つの状態のみを表します。
true(正しい)とfalse(誤り)の2種類だけで、条件分岐などで極めて重要な役割を持ちます。
3. テンプレートリテラルによる文字列の動的連結
「〇〇さん、こんにちは」のように、文字列と変数のデータを組み合わせてひとつのテキストを作る際、従来のJSでは足し算記号 `+` を使って `userName + “さん、こんにちは”` のように書いていました。しかしこれは記述が複雑になりがちでした。
モダンなJavaScriptでは、バッククォート “ ` “ でテキスト全体を囲み、その内側で `${変数名}` と記述することで、テキストの中に変数の値をダイレクトに埋め込むことができる「テンプレートリテラル」を使用します。
4. 変数とテンプレートリテラルを使ってみよう
以下のコードを記述すると、定数で定義された名前と価格が、テンプレートリテラルによって綺麗に結合されてコンソールに表示されます。
/* 定数の定義(再代入しない安全な値) */ const userName = "鏡"; const price = 1280; /* テンプレートリテラル(バッククォート `` を使用)による埋め込み */ const message = `こんにちは、${userName}様。お会計は ${price} 円です。`; console.log(message);
JavaScriptにおいて、一度代入した値を後から変更(再代入)できない「定数」を宣言するために用いられるキーワードは何でしょうか?
※この問題の解答と解説は、ページ最下部(まとめの前)に掲載しています。
5. まとめと次回予告
第2回の講義はお疲れ様でした!今回の重要ポイントを振り返りましょう。
- `let` は値の書き換えが可能、`const` は書き換え不可能な定数を定義する。
- 代表的なデータ型として数値(Number)、文字列(String)、真偽値(Boolean)がある。
- バッククォートを使う「テンプレートリテラル」で、文字列の中に `${変数名}` で安全にデータを差し込める。
次回(第3回)は、プログラムの知的な判断に欠かせない「演算子とデータの計算・比較」をテーマに、値の厳密な比較(===)や論理比較のルールをマスターします。お楽しみに!
📖 JavaScriptの基礎を全10回でマスターする
🔑 第2回 理解度チェックの解答と解説
【解説】
正解は **`const`** です。 `let` で宣言した変数は後から再代入(値の上書き)ができますが、`const` で宣言した変数は定数となり、後から再代入しようとするとエラーが発生してプログラムが停止します。意図しない上書きによる予期せぬ動作を防ぐため、実務では可能な限りすべての変数を `const` で書くのが標準設計となります。
