変数

ほとんどの場合、JavaScriptアプリケーションは情報を扱う必要があります。2つの例を挙げます。

1. オンラインショップ - 情報には、販売されている商品やショッピングカートが含まれる場合があります。
2. チャットアプリケーション - 情報には、ユーザー、メッセージなどが含まれる場合があります。

変数は、この情報を格納するために使用されます。

変数

変数とは、データのための「名前付きストレージ」です。変数を使って、商品、訪問者、その他のデータを格納できます。

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

以下のステートメントは、「message」という名前の変数を作成します（言い換えれば、_宣言_します）。

let message;

次に、代入演算子=を使用して、いくつかのデータを格納できます。

let message;

message = 'Hello'; // store the string 'Hello' in the variable named message

文字列は、変数に関連付けられたメモリ領域に保存されます。変数名を使用してアクセスできます。

let message;
message = 'Hello!';

alert(message); // shows the variable content

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

let message = 'Hello!'; // define the variable and assign the value

alert(message); // Hello!

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

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

これは短く見えるかもしれませんが、お勧めしません。読みやすくするために、変数ごとに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は、"message"というラベルが付いた箱の中に"Hello!"という値が入っていると想像できます。

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

好きなだけ何度でも変更できます。

let message;

message = 'Hello!';

message = 'World!'; // value changed

alert(message);

値が変更されると、古いデータは変数から削除されます。

2つの変数を宣言し、一方から他方にデータをコピーすることもできます。

let hello = 'Hello world!';

let message;

// copy 'Hello world' from hello into message
message = hello;

// now two variables hold the same data
alert(hello); // Hello world!
alert(message); // Hello world!

let message = "This";

// repeated 'let' leads to an error
let message = "That"; // SyntaxError: 'message' has already been declared

変数の命名

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

1. 名前には、文字、数字、または記号$と_のみを含めることができます。
2. 最初の文字は数字にしてはいけません。

有効な名前の例

let userName;
let test123;

名に複数の単語が含まれている場合は、キャメルケースがよく使用されます。つまり、単語は連続して続き、最初の単語を除く各単語は大文字で始まります：myVeryLongName。

興味深いことに、ドル記号'$'とアンダースコア'_'も名前で使用できます。これらは、文字と同様に、特別な意味のない通常の記号です。

これらの名前は有効です。

let $ = 1; // declared a variable with the name "$"
let _ = 2; // and now a variable with the name "_"

alert($ + _); // 3

無効な変数名の例

let 1a; // cannot start with a digit

let my-name; // hyphens '-' aren't allowed in the name

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

let let = 5; // can't name a variable "let", error!
let return = 5; // also can't name it "return", error!

// note: no "use strict" in this example

num = 5; // the variable "num" is created if it didn't exist

alert(num); // 5

"use strict";

num = 5; // error: num is not defined

定数

定数（変更不可）変数を宣言するには、letの代わりにconstを使用します。

const myBirthday = '18.04.1982';

constを使用して宣言された変数は「定数」と呼ばれます。再割り当てすることはできません。そうしようとするとエラーが発生します。

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // error, can't reassign the constant!

プログラマーは、変数が決して変化しないと確信している場合、constで宣言して、その事実を全員に保証し、伝えることができます。

大文字の定数

実行前にわかっている、覚えにくい値のエイリアスとして定数を使用することは広く行われています。

このような定数は、大文字とアンダースコアを使用して命名されます。

たとえば、いわゆる「ウェブ」（16進数）形式の色のための定数を作成してみましょう。

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

// ...when we need to pick a color
let color = COLOR_ORANGE;
alert(color); // #FF7F00

利点

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

いつ定数に大文字を使用し、いつ普通に命名する必要があるのでしょうか？それを明確にしましょう。

「定数」であるということは、単に変数の値が決して変化しないことを意味します.しかし、実行前にわかっている定数（赤の16進数値など）と、実行時に_計算_されるが初期割り当て後は変更されない定数があります.

例えば

const pageLoadTime = /* time taken by a webpage to load */;

pageLoadTimeの値はページの読み込み前にわからないため、通常の名前が付けられます。しかし、割り当て後に変更されないため、依然として定数です.

言い換えれば、大文字で名前が付けられた定数は、「ハードコードされた」値のエイリアスとしてのみ使用されます.

適切な名前を付ける

変数について言えば、もう1つ非常に重要なことがあります.

変数名は、格納されているデータを記述する、明確でわかりやすい意味を持つ必要があります.

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

実際のプロジェクトでは、ほとんどの時間が、ゼロから完全に別のものを書くのではなく、既存のコードベースを変更および拡張することに費やされます.しばらく他のことをした後、コードに戻ると、適切にラベル付けされた情報を見つける方がはるかに簡単です.言い換えれば、変数に適切な名前が付けられている場合です.

変数を宣言する前に、変数に適切な名前を考える時間を割いてください.そうすることで、あなたは報われるでしょう.

従うべき良いルールは次のとおりです.

• userNameやshoppingCartのような人間が読める名前を使用してください.
• 自分が何をしているのかわからない限り、略語やa、b、cのような短い名前は避けてください.
• 名前をできるだけ説明的で簡潔にしてください.悪い名前の例は、dataとvalueです.このような名前は何も語りません.変数がどのデータまたは値を参照しているかがコードのコンテキストから非常に明白な場合にのみ、それらを使用しても問題ありません.
• チーム内およびあなた自身の心の中で用語に同意してください.サイト訪問者が「ユーザー」と呼ばれる場合、関連する変数はcurrentVisitorまたはnewManInTownではなく、currentUserまたはnewUserと名付ける必要があります.

簡単そうに聞こえますか？確かにそうですが、実際に説明的で簡潔な変数名を作成するのは簡単ではありません.頑張ってください.

まとめ

var、let、またはconstキーワードを使用して、データを格納する変数を宣言できます。

• let – 現代的な変数宣言です。
• var – 昔ながらの変数宣言です。通常はまったく使用しませんが、必要な場合に備えて、古い "var"の章でletとの微妙な違いについて説明します。
• const – letに似ていますが、変数の値を変更することはできません。

変数は、その中に何が入っているかを簡単に理解できるように名前を付ける必要があります。