変数と定数｜1から始めるJavaScript#3

どうもRyokutyaです。
今回はcodeを書くうえですごく重要な変数と定数について解説してきます。
変数を使えるようになればより自由度の高いcodeを記述できるようになるでマスターしていきましょう。

変数

変数は一言で言えば「データを入れておく箱」です。

変数の宣言①

変数を利用するためには変数の宣言をしなくてはいけません。
変数の宣言は以下の様に行います。

var 変数名;

var x;

これでｘという変数ができました。

複数の変数を宣言する場合は、

var a;
var b;
var c;

とすれば変数a,変数b,変数cができます。
上記のような場合同じような内容を3回も書くのは面倒だという方は、

var a,b,c;

と書いても変数a,変数b,変数cを作ることができます。
変数を作るのは簡単でしたね。
「で、変数って結局何？」ってなりますよね。
初めに説明したように、変数は「データを入れておく箱」見たいなものと思ってください。
以下のようにすることで変数に値を代入できます。

var a;  //変数の宣言
a = 3; //変数aに3を代入

var a = 3; //このように変数の宣言と値の代入を一文で書くこともできる
console.log(a); //3が表示される。

変数はいくつでも宣言することができます。また、一度格納した値は呼び出してもなくなることはありません。
変数に格納されたデータは何度でも使用できます。
以下の例を見てみましょう。

var a=3;
var b=a+3;
var c=a+5;
console.log(b); //6が表示される
console.log(c); //8が表示される

このように変数aに格納されてたデータ（３）は何度でも取り出して使用することが可能です。

変数の上書き

変数の値は上書きすることができます。

var a=3;
console.log(a); //3が表示される
a=5;　//変数aに新たなデータ5を代入
console.log(a); //5が表示される

このように一度宣言した変数に違うデータを代入することで変数内のデータを上書きすることができます。
ここまでは数値で説明してきましたが変数の中には数値以外のデータをいれることもできます。

var a="こんにちは";
console.log(a); //こんにちはが表示される

このように変数の中には様々なデータを格納することができます。
codeを記述するうえで非常に便利な変数ですが、いくつか注意点があります。
変数はその名の通り途中で格納するデータを変更ができるので書き方を間違えたりすると知らない間に自分が思っているのと違うデータが入ってることがあります。
その場合プログラムは予期せぬ動作をするかエラーがでます。
そんな時はひとつひとつの変数になんのデータが入っているかconsoleなどに表示して確認してください。
一つ例を見てみましょう。

var a=3;
var b=a;
a=5;
console.log(b);

このcodeでconsoleに表示されるのは何だと思いますか？
変数aを宣言し3を格納した後、変数bを宣言しaのデータを格納しました。
その後、変数aに格納したデータを5に上書きしました。
console.logで変数bのデータを表示すると・・・
3が表示されます。
5が表示されると思った方は注意が必要です。
変数bに格納されたデータが5だと思い込んだまま変数bを使い続ければこれ以降のcodeをずっと勘違いしたまま記述することになります。
JavaScriptをはじめようの時にも書いたのですがJavaScriptは上から順に処理が実行されます。
ですので、変数bが宣言され変数aのデータが代入された後変数aのデータが上書きされても変数bの中に格納されたデータが上書きされることはありません。

var a=3;
var b=a;
a=5;
console.log(b); //3
b=a;
console.log(b);//5

このようにもう一度、変数aのデータを変数bに代入すれば変数bに格納されるデータは5に上書きされます。

変数の宣言②

変数の宣言方法はvar 変数名;のほかにlet 変数名；があります。
使い方は基本的にvarと同じです。

let a;
a=3;
let b=5;

このように省略した書き方も同じです。もちろんいろんなデータ型を格納できるところも同じです。
では何がちがうのでしょうか？
varで変数を宣言する場合は

var a=3;
var a=5;

としてもエラーにならずに変数aに格納されるデータが上書きされるだけです。
しかし、letの場合

let a=3;
let a=5;

この場合はIdentifier ‘a’ has already been declared　「すでに’a’という変数名は宣言済みです」とエラーがでます。
これは変数の有効範囲（スコープ）に関わってくるのですが今回は割愛します。
今は、「letの方がvarよりも細かく変数の有効範囲を管理できる」、「letは同じ変数名を宣言するとエラーがでる」くらいに覚えておいてくれれば問題ありません。

定数

const　定数名=値;で宣言します。
定数とは違い、一度宣言すると途中で中のデータを上書きすることはできません。

const a=5;// 定数の宣言
a=4; //エラーになります

定数はその名の通り定まった値なので、変数のように後からデータを上書きするこができません。
定数の値を変更したい場合は一行目の値を5から他の値に書き換えるしかありません。
定数は一度設定すると基本的に上書きができないので、codeが処理されていく過程で格納しているデータが上書きされたくないときに使用します。

変数や定数を使う理由

変数や定数を使うことはプログラミングを書く上で必ず必要になってきます。
変数や定数を使用しなくても問題なく動くcodeでもあえて使うこともあります。
それはなぜでしょう？

1つ目の理由として「同じ値を繰り返し使える」ということが挙げられます。
変数の説明の際に書いたように一度変数を宣言しておけばそこに格納されたデータは何回でも変数名を書くだけで使用できます。
変数の説目の際はわかりやすいように簡単な式を格納していましたが、複雑で長い式であった場合、何回も記述すると時間もかかるし、めんどくさいです。
何より人間なので記述ミスすることがあります。そんなとき変数を使えば記述ミスをなくすことができます。

2つ目の理由として「値の意味をわかりやすくする」ということがあげられます。
例えば

console.log(100*1.1);

というようなcodeがあったとします。
これだけ見ると「なんの計算をしているんだ？」っとなると思いますが、

const Tax=1.1;
let price=100;
console.log(price*Tax);

このように書いてあると「値段に税をかけているんだな」と理解できると思います。
変数を使うことでcodeの可読性がよくなり、後から見た時や他の人がcodeを読みやすくすることができます。

3つ目に「変更が起こった時に対応しやすい」ということが挙げられます。

const Tax=1.1;
let price1=100;
console.log(price1*Tax);
let price2=200;
console.log(price2*Tax);
　　　　・
　　　　・
　　　　・
let price100=10000;
console.log(price100*Tax);　

このようなcodeがあったとき税に変更が起こった場合、一行目の定数の値を変更するだけで対応できます。
もし、定数や変数を使っていなかった場合100か所の値を直さなければならず、修正漏れやミスが発生する可能性が高まります。

こうした理由から定数や変数をしっかりと使えるようになりましょう。

変数や定数の名前の付け方

変数名や定数名は基本的に自由につけることができます。
基本的にと書いたように名前の付け方にはいくつかのルールがあります。

ルール１

_（アンダーバー）,$(ドルマーク）,数字は使えるが、それ以外の記号（-（ハイフン）,=（イコール）など）は使えない。

ルール2

半角スペースは使えない

ルール3

1文字目に数字は使えない（2文字目以降は使用可能）

ルール4

JavaScriptの予約語は使えない

JavaScriptには予約語という意味を持つ単語があり予約語を名前にすることはできません。
予約語そのものでなければ使用は可能です。
（doは予約語のため使用できないが、do_nameなどは使用可能）

これらのルールに反しない範囲であれば自由に名前を付けることが可能です。
しかし、推奨される名前の付け方や非推奨の名前の付け方があります。

①1文字の名前や意味のない文字列（非推奨）
まさにこの記事の説明に使ったvar a,let b,const cのような1文字あるいは意味を持たない文字列は非推奨です。
これは変数や定数の「値の意味を分かりやすくする」というメリットを殺してしまっているためです。

②ローマ字で日本語の名前を付ける,日本語入力で名前を付ける（非推奨）
var namae=”Ryokutya;やlet 名前=”Ryokutya”;とするのは非推奨です。
変数名や定数名をつけるときは英単語で名前を付けることが推奨されています。
var name=”Ryokutya”;やlet price=100;など。

2つ以上英単語でてくる場合

2つ以上の英単語が出てくる場合の記法がいくつかあります。
1.先頭の単語以外の頭文字を大文字にするcamelCase記法（myName,myBrothorNameなど）

2.すべての単語の頭文字を大文字にするPasscall記法（MyName,MyBrothorNameなど)

3.単語同士を_（アンダーバー）で連結アンダースコア記法（my_name,my_brother_nameなど）

必ずしもこの記法を使用して記述する必要はありません。あくまで推奨とされているだけです。
ですが、code内で統一した書き方の方がわかりやすいのは言うまでもありませんので、できるだけ統一した書き方を心掛けるのがいいと思います。

おわりに

今回は変数と定数について学びました。
codeの見やすさの向上や一度格納したデータは何度でも使えるなど様々なメリットがあるのでしっかりと覚えてくださいね。
では今回はこのあたりで(^^)/~