4 - 変数

4.1 導入

例えば 200 円のノートと 100 円のノートをいくつか買って比較する場合のプログラムについて考えてみます。愚直に書くと次の Listing1 のようなコードになるでしょう。

---

Listing1：おつかい

console.log(200 * 6 + 100 * 2);
console.log(200 * 5 + 100 * 3);
console.log(200 * 4 + 100 * 5);

---

これでも良いのですが、ノートやペンの価格が変わった場合にはどうでしょう。3 つの式のそれぞれの値段を書き換える必要があってかなり面倒です。ここが変数の使いどきです。Listing2 のように変数に予め値段を代入しておくことで、何度も書き換えずに済むようになります。

---

Listing2：おつ改

let note = 200;
let pen = 100;

console.log(note * 6 + pen * 2);
console.log(note * 5 + pen * 3);
console.log(note * 4 + pen * 5);

---

また、変数にはもう一つの重要な役割があります。それは右辺の式や値に名前をつけることです。例えば 200 * 4 + 100 * 5 のような式をなんの前提知識も持たずに見たときに、何を示しているか分かるでしょうか。前後の文脈からある程度推測することができる場合もありますが、これが難しい場合も多くあります。これが let sum = 200 * 4 + 100 * 5 となっていれば、この式が合計を示していることが明らかになり、コードが格段に読みやすくなります。

---

演習1

次のコードに 800 円の book 変数を追加し、ノート 4 個、ペン 3 本、本 4 冊の合計金額を算出してみましょう。

let note = 200;
let pen = 100;

console.log(note * 4 + pen * 3);  // ?

---

4.2 変数の宣言

前項では雰囲気で使ってしまいましたが、JavaScript において変数を宣言する場合には let、const、var のいずれかのキーワードを使用して次のように記述します。

---

Listing3：変数の宣言

// 宣言時に値を代入する
let note = 200;
const pen = 100;
var book = 800;

// 先に宣言だけをしてあとから代入する
let note;
var book;

note = 200;
book = 800;

---

let、const、var にはそれぞれ使い分けがあります。

• let
  • let 宣言された変数は、その後のプログラムで再度代入することができます。しかし、同じ名前で再度変数を宣言することはできません。一方で変数のスコープ（変数を使用できる範囲）は、この変数が宣言されたブロック（{ と } で囲まれた範囲のこと）、その子のブロックのみです。
• const
  • 再代入できない点を除いて let と同様です。
  • 一見すると不便そうに見えますが、基本的にプログラムはその後にできる操作をできるだけ制限する方向で記述すつほうがよいとされているので、再代入させたくない変数があるならば積極的に使用すべきです。
• var
  • let 宣言された変数は、その後のプログラムで再度代入することができ、また再度同じ名前で変数を宣言することができます。スコープも緩く、この変数が宣言された関数内であればどこでも使用することができます。一見便利そうに見えますが、スコープの範囲がゆるいがゆえバグの温床になりやすく、現在ではあまり使用されません。

これに関しては JavaDrive のサイトにわかりやすい記述があるので、適宜参照してください。

4.3 undefined

次の Listing4 のように、変数の宣言だけして値を代入しない場合、その変数は undefined で初期化されます。別の値を代入すると undefined ではなくなりますが、明示的に undefined を代入したい場合には Listing5 のように undefined キーワードを使用します。

---

Listing4：undefined

let note;
console.log(note);  // undefined

---

---

Listing5：undefined の使用

let note = 200;
console.log(note);  // 200

note = undefined;
console.log(note);  // undefined

---

4.4 変数の命名

基本的にアルファベット（大文字・小文字）と数字、_を使用することができますが、数字を先頭にすることはできません。また、多くの場合命名にはキャメルケースが使用されます。ただし、変数名にはここで示されているような予約語を使用することはできません。

4.3.1 キャメルケース

ある名前が一つの単語で構成されるならばその単語の小文字表記を、複数の単語の連結で表現したいのであれば最初の単語は小文字表記で、以降の単語は大文字始まりで連結していくというものです。JavaScript をはじめとして、Java や TypeScript、Kotlin などで使用されます。

例：result、bookPrice、bookCasePrice…

4.3.2 アッパーキャメルケース

キャメルケースに似ていますが、全ての単語を大文字で始めるという点で異なります。C# で主に使用されます。

例：Result、BookPrice、BookCasePrice…

4.3.3 スネークケース

全ての単語を小文字で構成し、単語の区切りに _ を使用する手法です。Python や Rust などでよく使われています。

例：result、book_price、book_case_price…

4.3.4 ケバブケース

スネークケースの _ を - に置き換えたものです。CSS などで使用されます。

例：result、book-price、book-case-price…

---

演習2

自分の知っている言語で推奨されている命名規則を調べてみましょう。

---