変数

変数とは

変数（variable）は値を記憶する領域に名前つけたもののことを指します。
変数という名前の通り、記憶した値を変更することができます。
例えるなら、値を格納する箱のようなものが変数で、その箱に格納した値は任意で変更することができるのです。
変数を使うことで、データを一時的に保管したり、変数名で呼び出して格納した値を何度でも使用することができます。
変数を実際に使うには、その変数を 宣言 する必要があります。
JavaScriptで変数を宣言する際は行頭に varキーワード をつけて、その後に変数名を記述します。

var 変数名;
var 変数名1, 変数名2, 変数名3; // カンマ区切りにすることで、1行で変数を複数宣言することもできます。

変数に値を代入する

変数にデータを格納することを 代入 といいます。
代入は左辺に変数名を記述し、イコールを挟んで右辺に格納する値を記述します。

変数名 = 値;

変数を宣言する際に初期値を必ずしも指定する必要はなく、
指定しない場合は「未定義」であることを意味する undefined が自動的に設定されます。

function myFunction() {
  var num;
  console.log(num); // undefined
}

変数に値を代入したのち、その変数名を記述することで格納した値を呼び出すことができます。
また、変数に代入したのち、変数に格納した値を上書きすることもできます。
上書きは変数に値を代入する方法と同じ方法で記述することができます。（宣言ではないので varキーワード は不要です。）
下記のサンプルではログに2回出力しています。
1回目のログ出力は代入する前であるため「未定義」を意味する undefined が出力され、
2回目のログ出力は「10」を変数numに代入しているため 10 がログに出力されます。

function myFunction() {
  var num;
  console.log(num); // undefined
  num = 10;
  console.log(num); // 10
}

変数の宣言時に値の代入をすることもできます。
このことを 初期化 といいます。（2行のコードが1行になるのでスッキリしますね。）
この場合もカンマ区切りでまとめて初期化を行うことができます。

function myFunction() {
  var num_1 = 10;
  var num_2 = 100, num_3 = 1000; // まとめて初期化も可能
  console.log(num_1); // 10
  console.log(num_2); // 100
  console.log(num_3); // 1000
}

定数とは

変数は上書きができると説明しましたが、ときには変数を上書きしたくないケースもあります。
このように上書きしたくない変数は 定数 として宣言して使用します。
定数（constant）も同様に値を保持できますが、変数とは違って初期化後に再代入することができません。
また、具体的な数値や文字列を表す定数の変数名には、
大文字と「_」（アンダースコア）を組み合わせて名前をつけることが慣習となっています。（必須ではありません。）
このようにすることで、大量のコードの中から値が変わらない（変えてはいけない）変数が見つかりやすくなります。

定数は変数と同じく名前をつけることができ、値を格納することもできますが、 一度値を格納すると以降はその値を変更することができません。
JavaScriptで定数を宣言する際は行頭に const をつけて初期化を行います。

const 定数名 = 値;

下記のサンプルで定数が更新されないことを確認してみましょう。

function myFunction() {
  const num = 10;
  num = 100;
  console.log(num);
}

定数numに対して、100を再代入して上書きしようとしましたが、
「TypeError: Assignment to constant variable.」とエラーが表示されます。

一般的に定数を使用できるのであれば、変数ではなく定数を使うべきです。
スプレッドシートのIDやURLなど、処理の中で変わることがない値は定数で宣言することを推奨します。
逆に変数を使うべき場面もあります。
例えば、ループ処理の中で値が更新される場合は変数を使う必要があります。

識別子の命名規則

ここまでで変数、定数、関数に対して任意の名前をつけることができると説明してきました。
これらの名前は 識別子 といい、JavaScriptでは自由に名前をつけることができるのですが、実はルールが設けられています。

  • 先頭文字は数字や記号文字を使うことができない。（記号文字のうちアンダースコア（_）とドル記号($)は使用できます。）
  • 予約後は使用できない。
  • 大文字と小文字は区別される。

予約語 はJavaScriptで特別な意味を持つ単語として決められているワードになります。
例えば、変数宣言で使用する var や、関数の定義で使用する function が挙げられます。
JavaScriptの予約語は下記の通りです。

  • break
  • case
  • catch
  • const
  • continue
  • debugger
  • default
  • delete
  • do
  • else
  • finally
  • for
  • function
  • if
  • in
  • instanceof
  • let
  • new
  • throw
  • try
  • typeof
  • var
  • void
  • while
  • with

識別子の命名のコツ

識別子のルールが守られていれば自由に名前をつけることができます。
ただ、名前の付け方が統一されていて、かつ読みやすい名前だとコーディングがしやすいですよね。
以下のポイントを守って名前をつけるとコーディングがしやすくなります。

変数の中身や関数の内容がわかる名前をつける

例えば、変数に「名前」を格納したい場合、皆さんはどのような変数名をつけますか？
下記のサンプルでは、文字列の「Taro」を変数nameと変数numに格納しています。
変数名をnameにすると、格納されている値は名前だと想像することができます。
その一方、変数名がnumにすると、格納されている値は一見数字であると想像してしまいます。
関数の名前も同様にどのような処理が行われているイメージがしやすい名前をつけるようにしましょう。

var name = 'Taro'; // Good!
var num = 'Taro';  // NG!

日本語やローマ字は使わず、英語を使う

JavaScriptの予約後は英語なので、識別子は英語で統一するとコードが読みやすくなります。
日本語やローマ字で変数宣言や関数の定義をすることはできますが、書き方に統一感がないと読みにくくなるためおすすめはできません。

var name =  `Taro`;  // Good!
var 名前 = `Taro`;   // NG!
var namae = `Taro`; // NG!

変数名と関数名はキャメル記法、定数名にはスネーク記法を使う

キャメル記法 というのは、複数の英単語で変数名や関数名をつける際に2つ目以降の頭文字を大文字にする記法です。
キャメルというのはラクダ（Camel）が由来なのですが、頭文字を大文字にするとちょうどそこがコブのように見えることから キャメル記法 と言われています。
もうひとつの記法として スネーク記法 と呼ばれるものがあります。こちらは英単語をアンダースコア（_）でつないでいく記法です。　　

// 関数名はキャメル記法
function getUserName() {
  // 変数名はキャメル記法
  var userName = 'Taro';
  // 定数はスネーク記法
  const GREETING_WORD = 'Hello ';
  console.log(GREETING_WORD + userName); // Hello Taro
}

これらのポイントを意識しながらコーディングをすると、自然と読みやすいスクリプトになっていきます。