Ne:Code道場～JavaScript 変数の巻～

はじめに

この記事ではJavaScriptの変数について、基本文法について取り上げつつ、つまづきポイントを補足しています。 各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、変数について理解を深めていきましょう。

そもそも「変数」って何ニャ？

「値を入れられる名前付きの箱」が変数です。 まずは基本文法から見てみましょう。

var x = 0;

「var」は宣言子といい、変数を作成（宣言）する際に必ず用いるものです。宣言子があることで、後に続く文字が変数であることをJavaScriptに伝えることができます。 この場合は、宣言子の後の「x」を、JavaScriptは変数だと認識します。「var x」で、xという名前の箱（変数）が誕生しました。 箱というだけあって、中にものを入れることができます。 後に続く「= 0;」で、xという名前の箱に、0という値を入れています。 ここでの「=」は、「代入演算子」と呼ばれ、左側の箱（変数）に、右側のものを入れる（代入する）のに用いられます。

宣言した変数は、どう使えば良いかニャ？

例えば以下のように2つの変数を作りました。x座標、y座標をそれぞれ表している変数です。

var x = 3;
var y = 10;

変数の中身を取り出すのは簡単で、変数を「そのまま」用いれば中身の値を取得できます。

console.log(x); // 3と出力されるニャ

「そのまま」という部分がキモです。変数の箱はそのまま用いることで、中の値を取り出せるからです。 では、xとy、この2つの変数を使って、「x方向に3、y方向に10進むニャ」という文字を出力してみましょう。 文字列の一部を変数に置き換えて繋げる書き方は慣れないうちは戸惑うことも多いと思います。そんな時は以下のような方法で書いてみましょう。

// ①まずは完成形の文字をそのまま書き込むニャ
console.log(‘x方向に3、y方向に10進むニャ’);

// ②置き換えたい所で文字を区切って繋げるニャ
console.log(‘x方向に’ + 3 + ‘、y方向に’ + 10 + ’進むニャ’);

// ③最後の仕上げに変数に置き換えるニャ
console.log(‘x方向に’ + x + ‘、y方向に’ + y + ’進むニャ’);
//出力結果→ x方向に3、y方向に10進むニャ

上記のコードは、「’」で囲われた文字エリアと変数を分けているのがポイントです。変数はそのままつかうことで中身を取り出せるので、文字エリアの中に含めてしまわないように気をつけましょう。 文字エリアに含めてしまったら、それはもう文字の一部としてJavaScriptに認識されてしまいます。

// ④こう書かないように要注意ニャ
console.log(‘x方向に + x + 、y方向に + y + 進むニャ’); 
//出力結果→ x方向に + x + 、y方向に + y + 進むニャ

変数の、「値を変える」にはどうすれば良いかニャ？

変数の値を変えるのはとても簡単です。

var x = 3;
x = 10; // 変数の値を10に置き換えたニャ
x = x + 2; // 変数の値を12（10 + 2）に置き換えたニャ

代入演算子を使って変数の値を置き換えることができます。 この際に、宣言子は変数作成の最初だけになっているのがポイントです。

「箱の名前」はなんでも良いかニャ？

宣言子の後が変数名になりますが、一定の名付けルールがあります。 例えば、こちらの例は明らかに駄目そうだと感じますよね。

var var = 0;

JavaScriptの気持ちになってみますと、「var」があったので、次に来るのは変数かなと思っていたら、まさかの「var」おかわりに、戸惑うだろうことは予想できますね。 このコードはもちろん、エラーになります。「var」はJavaScriptが使う予定となっている「予約語」なので、変数名には用いることができないのです。 JavaScriptがどういった単語を予約語としているのかは、最初から全部覚える必要はありませんよ。もし予約語を使ってしまったらこのコードの例の様にエラーになりますから、そのエラーに遭遇した時に、「そういえば、予約語っていう変数名に使えない単語があるんだったな」と思い出し、修正してゆきましょう。

変数名考えるの難しいニャ

自由に付けられるけど一定のルールがある変数名、どういった名前をつければ良いか悩んだ猫弟子は、シンプルに1文字変数名にしていこうと思いついたようです。

// 鮭はaという変数ニャ。5匹あるニャ。
var a = 5;
// 鮪はbという変数ニャ。10匹あるニャ。
var b = 10;
// 合計はcという変数ニャ。aとbを足した値を入れるニャ。
var c = a + b;

確かに一文字なら予約語とバッティングすることは無いでしょう。タイピングも少なくて楽ちんかもしれません。 でもちょっと待ってください。 aは鮭の個数を管理している変数で、bは鮪、cはそれらの合計と、役割がちゃんとありますよね。 変数名を付ける時には、中には行っているもののイメージがしやすい名前を付けましょう。箱に「みかん」とラベルがついているのに、蓋を開けたら「りんご」が入っていたら変だと感じますよね。変数名もこのラベルと同じで中身が予想できるものを付けましょう。

// 鮭の数ニャ
var salmon = 5;
// 鮪の数ニャ
var tuna = 10;
// 合計ニャ。(●´ڡ`●)
var sum = salmon + tuna;

変数宣言はこれでバッチリかニャ？

漫画でもありましたが、JavaScriptの宣言子はずっと「var」でしたが、2015年に転換期が訪れています。 新たな宣言子の仲間に「let」が加わりました。後発のものは、それ以前のものが抱えていた問題や改善点が解消されていることが世の常ですよね。 「let」も「var」の抱えていた多くの問題を解消してくれています。 「var」のか抱えていた問題は、まだ取り上げていない知識のものも含むので、順次補足してゆきたいと思います。 ここではまず2点、「同じ名前の変数とlet」と「if文とlet」について取り上げます。

「同じ名前の変数とlet」ってどういうことニャ

例えば以下のようなコードがあったとします。

var salmon = 5;
var salmon = 10;

salmonという変数が二個も宣言されていますね？なんだかおかしいと感じるのではないでしょうか。変数は名前で識別するはずなのに同じ名前の変数を宣言してしまうと、どちらかわからなくなりそうですよね。 そんなおかしさをかんじる「同じ名前の変数宣言」、「var」の場合はエラーなく行えてしまいます。 バグ（≒プログラムの動作不良）の温床になってしまいそうな予感がしますね。 ところが、この変数宣言の宣言子に「let」を用いた場合は同じ名前の変数を宣言するとエラーになります。

let salmon = 5;
let salmon = 10; // もう既にその名前の変数は宣言されていると怒られたニャ

ちゃんとエラーになってくれるので、すぐに気づけて修正ができるのはありがたいですね。

「if文とlet」ってどういうことニャ

Ne:Code道場の1回目では「if文」をとりあげました。if文のサンプルコードで変数宣言部分は敢えて記載しないようにしていました。というのも、この変数宣言の説明でletについて補足をしてから、変数宣言には「let」を用いてゆきたいという思いがあったからです。

if (false) {
  var x = 1;
}
console.log(x); //「1」って表示されるニャ?!

変数xはif文の中で宣言されているにも関わらず、if文の下で利用できていますよね。これは「変数の巻き上げ」という動きになります。詳しい説明は関数について説明する際に補足します。 これが宣言子にletを用いると以下のようになります。

if (false) {
  let x = 1;
}
console.log(x); // xなんて変数は無いと怒られるニャ

if文の中で宣言している変数はその外では使えない、とてもしっくりくる動きになりましたね。

終わりに

変数について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたものがこちらです。

1. 変数は宣言ありきだニャ
   1. 宣言子を用いて宣言してから変数を使う、これが大原則ニャ。宣言子を用いるのは変数ごとに一回だけで、宣言済の変数は宣言子を用いず利用可能ニャ
2. 変数の名前はとっても重要ニャ
   1. 中にどんな値が入っているのかイメージできるような名前を付けるニャ
3. 宣言子はvar以外もあるニャ。例えばletニャ
   1. letの美味しいポイントはこの後も取り上げてゆくニャ。varだけじゃない事をまずは抑えるニャ

変数は全ての処理の要になります。自分で好きに名前をつけられ、好きな値を保持することができるので、裁量が大きくなるため、使いこなせるかどうかがキモになってきます。変数をしっかり身につけつつ、今後の学習に繋げてゆきましょう。