本記事ではJavaScriptにおける変数・エスケープシーケンス・インクリメント／デクリメントについて説明していきます。
JavaScriptにおける変数
変数
…ざっくりですが値を入れる入れ物です。数学でいうxやyなどと似た扱いをします。
プログラム上で変数や定数を使用するには、PCにそのことを理解してもらえるように「変数や定数を使用するよ～」という明示が必要です。これを 「宣言」 といいます。
変数の宣言方法は３通りあります。
let
…変数の再宣言は不可。ブロックスコープを持ちます。
厳密なスコープ管理が可能で、コードがどのように動作するかを正確に予測しやすくなります。
＜＜使用例＞＞
let x = 20;
x = 50; // 再代入はできる
// let x = 30; // 再宣言をするとエラーが発生する
const
…変数の再宣言及び再代入が不可でブロックスコープを持ちます。
一度値が設定されるとその値を変更することはできません。
このように値が不変である特徴を持つ変数は「定数」として扱われます。
＜＜使用例＞＞
const z = 10;
// z = 20; // エラー: 再代入をするとエラーが発生する。
var
…変数の再宣言が可能で、関数スコープを持ちます。
ブロックスコープを持たず、ループ内での変数の再利用等を行うと意図しない動作を引き起こすことがあります。
そのためletやconstよりも推奨されません。（一応使用しても動作はします）
＜＜使用例＞＞
var z = 10;
var z = 30; // 再宣言できる。
また、変数（定数）には命名規則があり、キャメルケース という規則で命名するよう定められています。
キャメルケース
…最初の単語は小文字、以降の単語の最初の文字を大文字にします。
例えば下記のように記述します。
yourName
またJavaScriptの構文などで使用されている「if」や「break」など
「プログラム上で既に使用されている言葉（予約語）」としての扱いとなるため、これらは変数として命名することができません。
言語はだんだん新しく更新されていくものなので都度予約語が何か調べるのが良いです。
先ほど説明に出した「ブロックスコープ」「関数スコープ」とは何かについて以下説明していきます。
まず変数には有効範囲があり、有効範囲外で使おうとするとエラーが発生します。
この有効範囲のことを「スコープ」と呼びます。
ブロックスコープ
…「{}」（中括弧）で囲まれた処理の部分です。
下記の例だと「ブロックスコープ１」と「ブロックスコープ２」は独立しており、
ブロックスコープ１で宣言・定義した変数はブロックスコープ２内で使用できません。
＜＜例＞＞
if(条件式){
// ブロックスコープ１
}else{
// ブロックスコープ２
}
関数スコープ
…「function 関数名(引数){処理}」または「function(引数)｛処理｝」と書いた「{}」の中の部分です。
＜＜例＞＞
function 関数名(引数){
// 関数スコープ１
}
function (引数){
// 関数スコープ２
}
// 関数スコープの範囲
if(条件式){
let test;
// 変数testは有効
if(条件式){
// 変数testは有効
}
}
// 変数testは無効
JavaScriptの変数の宣言はこの変数が有効である範囲を考慮した上で行う必要があります。
エスケープシーケンス
次に文字列を扱う上で必要不可欠なエスケープシーケンスについて説明していきます。
例えば「I'm fine」という文字列を出力しようとします。
console.log('I'm fine');
すると、下記のようにエラーが発生します。
理由としては「I'm」で用いられているシングルクォート「'」と、JavaScriptで文字列を囲むシングルクォートのプログラム上で判別がつかないためです。
ここで代替案としてダブルクォート「"」を使用して下記のように書いてみましょう。
console.log("I'm fine");
このように「I'm fine」と表示されるようになりました。
しかし、プロジェクトによってシングルクォート・ダブルクォートどちらを使用するか決めている場合、どちらかが文字列として表示できなくなるという状態になります。
それを回避するために エスケープシーケンスがあります。
エスケープシーケンス
…リテラルで表示できない特別な文字列を表示できるようにする方法。
下記に代表的な例を記載しました。
\n ：改行
\t ：タブ
\\ ：バックスラッシュ
\' ：シングルクォート
\" ：ダブルクォート
\f ：フォームフィード
先ほどの例をもう一度この記載に置き換えて表示してみましょう。
console.log('I\'m fine');
このように、シングルクォートで囲っている、シングルクォートを表示することができました。
汎用的な例でいうと改行もよく用いられます。
例えば下記のように「I'm」と「fine」の間に「\n」を記述します。
console.log('I\'m \n fine');
するとこのように文字列を改行することができます。
特殊な文字列を表示するために必要なので、基本的なエスケープシーケンスは覚えておいて損はないはずです。
JavaScriptにおけるインクリメント／デクリメント
他の言語を使ったり、勉強している方はすでに知っておられるかもしれませんが、
JavaScriptにおいてもインクリメント／デクリメントがあります。
インクリメント
…１を足す処理。前置型インクリメント演算子と後置型インクリメント演算子があります。
＜＜使用例＞＞
let i = 20;
++i ; // この部分がインクリメント
console.log(i); // 21が出力される
let j = 30;
i++ ; // この部分がインクリメント
console.log(j); // 31が出力される
コンソールの結果は下記のようになります。
デクリメント
…１を引く処理。前置型デクリメント演算子と後置型デクリメント演算子があります。
＜＜使用例＞＞
let k = 20;
--k ; // この部分がインクリメント
console.log(k); // 19が出力される
let l = 30;
l-- ; // この部分がインクリメント
console.log(l); // 29が出力される
コンソールに表示された結果は下記のようになります。
これらはいちいち「変数 = 変数 + 1;」のように記述するよりも短くコードを書くことができます。
ただし、前置と後置で動作が異なるため、注意が必要です。
インクリメントの前置と後置で動作が異なる例を確認してみましょう。
＜＜前置インクリメントの例＞＞
let x = 3;
let y = ++x; // xをインクリメントしてからyに代入
console.log(x); // 4
console.log(y); // 4
前置インクリメントは、変数の値を増やした後にその変数を評価します。
＜＜後置インクリメントの例＞＞
let a = 4;
let b = a++; // aをbに代入してからインクリメント
console.log(a); // 5
console.log(b); // 4
後置インクリメントは変数の値を評価した後にその変数を増やすため、このような結果になります。
つまり「変数bに格納されてからaを+1」しているという動作になります。
参考: JavaScript[完全]入門(https://www.amazon.co.jp/JavaScript-%E5%AE%8C%E5%85%A8-%E5%85%A5%E9%96%80-%E6%9F%B3%E4%BA%95%E6%94%BF%E5%92%8C/dp/481560763X)