キーワード	宣言
const	宣言時に初期値を設定した後は、値の変更ができない。
let	宣言した後に、自由に変数の値を変更できる。
var	従来の変数宣言。宣言した後に、自由に変数の値を変更できる。

const、let、varどのキーワードも共通の宣言方法
変数宣言を「,（カンマ）」で区切ることにより、同時に複数の変数を定義することが可能。

const ConstText = "「const」キーワードの使い方", const ConstNum = 1;
const ConstNum1 = 1, const ConstNum2 = 2;
↓
上記は下記の宣言と内容は同じ。
const ConstText = "「const」キーワードの使い方";
const ConstNum = 1;
const ConstNum1 = 1;
const ConstNum2 = 2;

「const」キーワード

「var」の問題点を改善するために導入された「宣言（キーワード）」の１つ。
「const」キーワードで変数を宣言した場合、変数の値を再設定することができない。
変数の値を設定するには、「const」キーワードで宣言をしたときに、値（初期値）を設定する。
変数に対して値を再設定する必要がない場合は、「const」キーワードでの変数宣言が推奨されている。

「let」キーワードと「const」キーワードの変数２重定義エラー

「var」キーワードは、「同じ名前の変数を再定義できてしまう」という問題があるらしい。
そこが改善され、「let」キーワードと「const」キーワードでは、
同じ名前の変数を再定義しようとすると、構文エラー（SyntaxError）が発生する。
「let」キーワードと「const」キーワードの改善点は、
「変数を二重に定義できない」という点。

SyntaxError: redeclaration of キーワード名変数名

「const」キーワードの書式

const 変数名 = 初期値;
const ConstNum = 1;
const ConstText = "「const」キーワードの使い方";

「const」キーワードで宣言した変数に値を再設定しようとすると発生するエラー

TypeError: invalid assignment to const '変数名'

「let」キーワード

「var」の問題点を改善するために導入された「宣言（キーワード）」の１つ。
「let」キーワードは、変数を宣言・値の代入（初期設定）を行った後に、
値の変更（再設定）をすることができる変数宣言。
「let」キーワードでの変数宣言は、初期値を設定しないでも宣言可能。
初期値を設定しなかった場合の変数初期値のデフォルトは、「undefined」。
「let」キーワードで変数宣言した変数は、何度でも値の再設定が可能。

「let」キーワードと「const」キーワードの変数２重定義エラー

SyntaxError: redeclaration of キーワード名変数名

「let」キーワードの書式

//宣言と初期値の同時設定する書式
let 変数名 = 初期値;

let LetNum = 1;
let LetText = "「let」キーワードの使い方";
let LetNum1 = 10, let LetText2 = "連続しての宣言";

//宣言後に値を設定する方法
let 変数名;
変数名 = 初期値;

let LetNull;
LetNull = "テキストを代入";
LetNull = 100;

「var」キーワード

一番古くからある変数宣言で、
使い方は、「let」キーワードとほぼ同じ。
現時点では、「var」キーワードは使えるが、
「let」キーワードの使用を推奨されている。

「var」キーワードは、変数を宣言・値の代入（初期設定）を行った後に、
値の変更（再設定）をすることができる変数宣言。
「var」キーワードでの変数宣言は、初期値を設定しないでも宣言可能。
初期値を設定しなかった場合の変数初期値のデフォルトは、「undefined」。
「var」キーワードで変数宣言した変数は、何度でも値の再設定が可能。

「let」キーワードと「const」キーワードの変数２重定義エラー

SyntaxError: redeclaration of キーワード名変数名

「var」キーワードに、変数の再定義をすると、
最後の定義に上書きされる。

「var」キーワードの書式

//宣言と初期値の同時設定する書式
var 変数名 = 初期値;

var VarNum = 1;
var VarText = "「var」キーワードの使い方";
var VarNum1 = 10, var VarText2 = "連続しての宣言";

//宣言後に値を設定する方法
var 変数名;
変数名 = 初期値;

var VarNull;
VarNull = "テキストを代入";
VarNull = 100;

Back

変数名に使える文字

変数名の名前（識別子）に使用できる文字は、
・「半角のアルファベット」「_（アンダースコア）」「$（ダラー）」「数字」を組み合わせた名前にする
・変数名は数字から開始できない
・予約語と被る名前は利用できない
という条件がある。

Back

変数の中身を確認する方法

「Javascript」で、変数の中身を確認する作業は、
プログラミングをしていると必ず行う作業。
ブラウザか、コンソールに表示する方法が「Javascript」で行える。

変数の中身を確認するには、プログラムでブラウザに値を表示するか、
コンソールに変数の値を出力するなどして確認できる。
下記のプログラムコードを記述することで、ブラウザ・コンソールに表示される。

ブラウザでコンソールを表示する方法は、「F12」を押すことで、ブラウザの下に、
エラーなどを確認できる「デバッグ」ツールが表示され、いくつかのツールの中に「コンソール」もあり、
内容が確認できるようになっている。

変数の中身を確認する方法

alert("変数の中身＝"+変数名);
alert("出力したいテキスト");
alert(変数名);
alert(配列名[0]);
alert(element.style.width);

console.log("ログとして出力したいテキスト");
console.info("情報として出力したいテキスト");
console.warn("警告として出力したいテキスト");
console.error("エラーとして出力したいテキスト");
console.dir(出力したいオブジェクト);
console.dirxml(出力したいDOM);
console.assert(/*条件*/,"/*出力したいメッセージ*/");

実行回数を出力

console.count();

呼び出し元の関数を出力

console.trace();

time〜timeendの間にあるプログラムの実行時間を計測し出力する。（識別名は同一のものを指定）

console.time(/*識別名*/);
console.timeEnd(/*識別名*/);

profile～profileEndまでの処理にかかった時間を詳細に出力する（識別名は同一のものを指定）

console.profile(/*識別名*/);
console.profileEnd(/*識別名*/);

group～groupEndまでの各種メソッドがグループ化されて出力する。（識別名は同一のものを指定）

console.group(/*識別名*/);
console.log("各種ログ情報");
console.groupEnd(/*識別名*/);

Back

変数名の動的な指定方法

変数名を動的に指定するには、「eval()」関数を使用する。

eval()関数は、JavaScriptコードの文字列を評価して実行する。
組み合わせた文字列が、「Javascript」コードとして正しければ、コードを実行してくれる。
eval()は、引数が妥当な文字列かどうかを決定し、
次に、JavaScriptコードを探す文字列の解析をします。
JavaScriptコードが見つかれば、それを実行する。

サンプルコード

for(i=1; i<=5; i++){
eval("var sample_"+ i +";");
}

上記のfor構文のサンプルコードは、下記のコードと同じことになる。
var sample_1;
var sample_2;
var sample_3;
var sample_4;
var sample_5;

Back