変数を作ってみよう

このレッスンでは、JavaScriptで変数を宣言する書き方をゼロから学び、letとconstの違いを理解して自分のコードで正しく使い分けられるようになることを目標にします。「JavaScript 変数 使い方」で検索してたどり着いた方にも分かるよう、基本から説明します。

変数とは、値に名前をつけて保存しておく「箱」のようなものです。JavaScriptで変数を宣言するときはletかconstを使います。let 変数名 = 値;はあとから値を変更できる変数、const 変数名 = 値;は一度代入した値を変更できない変数(定数)です。「変わる可能性がある値はlet、変わらない値はconst」というのが初心者向けの基本ルールで、実務でも「まずconstを使い、必要なときだけletにする」という書き方が推奨されています。

サンプルコードではlet nameとconst ageという2つの変数を宣言し、console.log()で画面に表示しています。+を使った文字列の連結(「こんにちは、」+ name + 「さん!」)は、複数の文字列や変数の値をつなげて1つのメッセージを組み立てる基本テクニックです。数値の変数(age)を文字列と連結すると、自動的に文字列へ変換されて表示される点もあわせて覚えておくと、あとで条件分岐やループと組み合わせるときに役立ちます。

初心者がよくつまずくのが、constで宣言した変数に後から値を代入して「Assignment to constant variable」というエラーが出るケースです。これは「値を変えないと約束した変数」を書き換えようとしたために起きるエラーで、原因が分かれば怖くありません。ほかにも、変数の宣言前にその変数を使うとエラーになる点や、同じ名前の変数をletで二重に宣言するとエラーになる点は、JavaScriptの変数でつまずきやすい代表的な原因です。

実際の開発現場では、ユーザーの入力値やAPIから取得したデータなど、あらゆる情報がまず変数に格納されてから処理されます。ログイン中のユーザー名や、カートに入っている商品の合計金額のように、画面の複数箇所で使い回す値は変数として管理するのが基本です。変数の宣言方法や命名のわかりやすさは、コードの読みやすさ・保守性に直結するため、実務のコードレビューでも重視される基礎スキルです。

変数名の付け方にもコツがあり、nのような1文字の名前よりも、userNameやtotalPriceのように中身が想像できる名前を付けることが、実務のコードでは強く推奨されています。読みやすい変数名は、あとから見直したときの理解速度を大きく左右します。