変数

ほとんどの場合、JavaScript アプリケーションは情報を処理する必要があります。ここに2つの例があります。

1. オンラインショップ – 情報は “売られている商品” や “ショッピングカート” などが考えられます。
2. チャットアプリケーション – 情報は “ユーザ”、“メッセージ” やその他より多くのものが考えられます。

変数は情報を保持するために使われます。

変数

変数 はデータのための “名前付けされた格納場所” です。私たちは商品や訪問者、その他のデータを格納するために変数が利用できます。

JavaScriptで変数を作るには、let キーワードを使います。

下の文は “message” という名前の変数を作ります(別の言い方: 宣言 または 定義 ):

let message;

代入演算子 = を使って、データを置く事ができます。

let message;

message = 'Hello'; // 文字列を格納します

今、文字列は変数に関連付けられたメモリ領域に保存されています。変数名を使ってアクセスすることができます。:

let message;
message = 'Hello!';

alert(message); // 変数の中身を表示します

簡潔にするために、変数宣言と代入を1行で書くことができます。

let message = 'Hello!'; // 変数宣言と値の代入

alert(message); // Hello!

また、1行で複数の変数を宣言することもできます。

let user = 'John', age = 25, message = 'Hello';

より短いように見えるかもしれませんが、これは推奨しません。可読性のため、1変数1行にしてください。

複数行のケースはちょっと長くなりますが、読みやすいです。

let user = 'John';
let age = 25;
let message = 'Hello';

多くの変数がある場合、このように書く人もいます:

let user = 'John',
  age = 25,
  message = 'Hello';

…もしくは “カンマから始まる” スタイル:

let user = 'John'
  , age = 25
  , message = 'Hello';

技術的にはこれらすべてのパターンは同じです。なので、これは個人の好みと美学の問題です。

var message = 'Hello';

現実での例え

ユニークな名前のステッカーを付けたデータの “箱” として想像すれば、“変数” という概念を簡単に把握できます。

たとえば、変数 message は値 "Hello!" を持った "message" とラベル付けされた箱として想像することができます。:

箱の中にはどんな値でも入れることができます。

また、それを変えることもできます。値は必要なだけ何度でも変更することができます。

let message;

message = 'Hello!';

message = 'World!'; // 値の変更

alert(message);

値が変更されたとき、古い値は変数から削除されます。

私たちは2つの変数を宣言して、ある変数から別の変数にデータをコピーすることもできます。

let hello = 'Hello world!';

let message;

// hello から message に 'Hello world' をコピー
message = hello;

// これで2つの変数は同じデータを持ちます
alert(hello); // Hello world!
alert(message); // Hello world!

let message = "This";

// 'let' の繰り返しはエラーになります
let message = "That"; // SyntaxError: 'message' has already been declared

変数のネーミング

JavaScript変数名は2つの制限があります:

1. 名前は文字、数字、記号 $ と _ のみを含む必要があります。
2. 最初の文字は数字であってはいけません。

変数名の例:

let userName;
let test123;

名前に複数の単語を含む場合、camelCase が一般的に使われます。 つまり、単語が続々と続き、各単語は大文字で始まります: myVeryLongName.

興味深いことに – ドル '$' や アンダースコア '_' も名前に使うことができます。それらは単に文字のように特別な意味をもたない普通の記号です。

これらは有効な名前です:

let $ = 1; // 名前 "$" の変数を宣言
let _ = 2; // またここでは名前 "_" の変数です

alert($ + _); // 3

正しくない変数名の例です:

let 1a; // 数値から開始はできません

let my-name; // ハイフン '-' は名前で許可されていません

let имя = '...';
let 我 = '...';

let let = 5; // "let" という変数名にはできません、エラーです!
let return = 5; // 同様に "return" という名前もエラーです!

// 注意: この例は "use strict" なしモードです

num = 5; // 存在しなかった場合、変数 "num" が作られます

alert(num); // 5

"use strict";

num = 5; // エラー: num が未定義です

定数

定数を宣言するためには、 let の代わりに const を使います。

const myBirthday = '18.04.1982';

const を使って宣言された変数は “定数” と呼ばれます。それらは変更することが出来ません。変更しようとするとエラーになります:

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // エラー, 定数の再代入はできません!

プログラマがその変数は決して変更されるべきでないと確信するとき、それを保証しつつみんなにその事実を明示的に示すために const を使います。

大文字の定数

実行する前に分かっているが、覚えるのが難しいという値に対しては、エイリアスとして定数を使うという慣習は広く行われています。

このような定数は大文字とアンダースコアを使って名前がつけられます。

例えば、いわゆる “web”(16進数) 形式での色の定数を作りましょう:

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...色を使う必要がある場合、次のようにします
let color = COLOR_ORANGE;
alert(color); // #FF7F00

メリット:

• COLOR_ORANGE は "#FF7F00" よりも覚えるのが遥かに簡単です。
• COLOR_ORANGE よりも "#FF7F00" のほうがタイプミスをし易いです。
• コードを読むとき、#FF7F00 よりも COLOR_ORANGE のほうがより意味があります。

いつ定数に大文字を使うべきなのか、いつ通常の名前をつけるべきなのかを明らかにしましょう。

“定数” であることは、その値は決して変わらないことを意味します。が、実行する前に知られている定数(赤の16進数のような)と、実行中にランタイムで 計算 されますが、代入後は変更されないものがあります。

たとえば:

const pageLoadTime = /* webページの読み込み時間 */;

pageLoadTime の値はページロードする前にはわからないので、通常の名前がつけられます。しかし代入後は変更されないのでこれも定数です。

つまり、大文字の名前の定数は “ハードコードされた” 値のエイリアスとしてのみ使います。

正しい名前をつける

変数について話すとき、もう1つ極めて重要な事があります。

変数は分かりやすい名前にしてください。必要に応じて考えましょう。

変数のネーミングは、プログラミングにおいて、もっとも重要で複雑なスキルの1つです。変数名をちょっと見れば、どのコードが初心者で書かれ、どれが経験豊富な開発者によって書かれたものかがわかります。

実際のプロジェクトでは、スクラッチで完全に分離された何かを書くよりも、既存のコードベースの修正や拡張に最も時間を費やします。そして、何か他のことをした後にコードに戻ったとき、よくラベル付けされた情報を探すのははるかに簡単です。それは言い換えると、適切な名前がついている変数、です。

変数を宣言する前に正しい名前について考えるようにしてください。それは多くのことに報いるでしょう。

いくつかの良いルールです:

• userName または shoppingCart のように人間が読みやすい名前を使ってください。
• 本当に何をしているか分かっている場合を除き、 a, b, c のような略語や短い名前は避けてください。
• 最大限説明的、かつ簡潔な名前を作ってください。悪い名前の例としては data や value です。このような名前からは何も分かりません。コンテキストからデータや値が意味することが例外的に明白な場合のみ使ってもOKです。
• あなたのチームの中で、またあなた自身の心の中で用語を統一してください。もしあるサイト訪問者が “ユーザ” と呼ばれる場合、関連する変数として currentVisitor や newManInTown ではなく currentUser や newUser のように命名するべきです。

簡単に聞こえますか？ 確かにそうですが、実際には良い説明的で簡潔な名前を作ることは簡単ではありません。頑張りましょう。

サマリ

データを格納するために変数を宣言することができます。それは var, let, または const を使うことでできます。

• let – は現代の変数宣言です。Chrome(V8)では、let を使うには、そのコードは strict モードである必要があります。
• var – は伝統的なスタイルの変数宣言です。一般的には使いませんが、必要なときのために、チャプター 古い "var" で let との微妙な違いを説明します。
• const –　は let のようですが、変数の値は変更することができません。

変数は、内部のことを簡単に理解できるように命名するべきです。