JavaScript 変数

変数はデータを格納するためのコンテナです。JavaScriptでは4つの方法で変数を宣言できます:

自動的に
var を使用して
let を使用して
const を使用して

自動的に宣言される例
var を使用した例
let を使用した例
const を使用した例

var、let、または const を使用するタイミング
代数と同様に
変数は値を格納するコンテナです
値が未定義（undefined）の場合
JavaScript変数の再宣言
JavaScript算術演算子
JavaScriptドル記号 $
JavaScriptアンダースコア _

自動的に宣言される例

// 見出しを変更する:
document.getElementById("myH").innerHTML = "My First Page";

変数を使用する前に宣言することが良いプログラミングの慣習とされています。

例から推測できるように:

x は値 5 を格納します
y は値 6 を格納します
z は値 11 を格納します

var を使用した例

var x = 5;
var y = 6;
var z = x + y;

1995年から2015年までのすべてのJavaScriptコードで var キーワードが使用されていました。

2015年に let および const キーワードがJavaScriptに追加されました。

var キーワードは古いブラウザ向けに書かれたコードでのみ使用すべきです。

let を使用した例

let x = 5;
let y = 6;
let z = x + y;

const を使用した例

const x = 5;
const y = 6;
const z = x + y;

混在した例

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

price1 と price2 の2つの変数は const キーワードで宣言されています。これらは定数の値であり、変更することはできません。

total 変数は let キーワードで宣言されています。その値は変更可能です。

var、let、または const を使用するタイミング

変数は常に宣言すること
値が変更されない場合は const を使用する
タイプが変更されない場合（配列やオブジェクト）も const を使用する
const を使用できない場合にのみ let を使用する
古いブラウザをサポートする必要がある場合にのみ var を使用する

代数と同様に

代数と同様に、変数は値を保持します:

let x = 5;
let y = 6;

代数と同様に、変数は式で使用されます:

let z = x + y;

上記の例から、total が 11 であることが推測できます。

変数は値を格納するコンテナです

JavaScriptの識別子

すべてのJavaScript変数は固有の名前で識別される必要があります。

これらの固有の名前は識別子と呼ばれます。

識別子は短い名前（x や y のような）またはより詳細な名前（age、sum、totalVolume のような）であることができます。

変数（固有識別子）の名前を構成する一般的なルールは以下の通りです:

文字、数字、アンダースコア、ドル記号を含むことができます。
名前は文字で始まる必要があります。
名前は $ と _ で始まることもできますが、このチュートリアルでは使用しません。
名前は大文字と小文字を区別します（y と Y は異なる変数です）。
予約語（JavaScriptのキーワードなど）は名前として使用できません。

JavaScriptの代入演算子

JavaScriptでは、等号（=）は「代入」演算子であり、「等しい」演算子ではありません。

これは代数と異なります。代数では以下のようには意味がありません:

x = x + 5

しかし、JavaScriptではこれは完全に意味があります: x + 5 の値を計算し、その結果を x に代入します。 x の値は 5 増加します。

JavaScriptのデータ型

JavaScriptの変数は 100 のような数値や “John Doe” のようなテキスト値を保持できます。

プログラミングでは、テキスト値はテキスト文字列と呼ばれます。

JavaScriptは多くの種類のデータを扱えますが、今のところ数値と文字列だけを考えてください。

文字列は二重引用符または単一引用符で囲まれています。数値は引用符なしで書かれています。

数値を引用符で囲むと、テキスト文字列として扱われます。

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

JavaScript変数の宣言

JavaScriptで変数を作成することを「宣言」と呼びます。

var キーワードまたは let キーワードでJavaScript変数を宣言します:

var carName;

または:

let carName;

宣言後、変数には値がありません（技術的には未定義です）。

変数に値を割り当てるには等号を使用します:

carName = "Volvo";

変数を宣言と同時に値を割り当てることもできます:

let carName = "Volvo";

以下の例では、carName という変数を作成し、その値に “Volvo” を割り当てます。

その後、id=”demo”のHTML段落内にその値を「出力」します:

すべての変数をスクリプトの始めに宣言するのが良いプログラミング慣習です。

1文で多くの変数を宣言できます。

let を使って文を始め、コンマで変数を区切ります:

let person = "John Doe", carName = "Volvo", price = 200;

宣言は複数行にわたることができます:

let person = "John Doe",
carName = "Volvo",
price = 200;

値が未定義（undefined）の場合

コンピュータプログラムでは、変数はしばしば値なしで宣言されます。その値は計算する必要があるものや後で提供されるもの（ユーザー入力など）です。

値なしで宣言された変数は値 undefined を持ちます。

次の実行後、変数 carName は値 undefined を持ちます:

let carName;

JavaScript変数の再宣言

var で宣言されたJavaScript変数を再宣言すると、その値は失われません。

これらの文の実行後、変数 carName は依然として値 “Volvo” を持ちます:

var carName = "Volvo";
var carName;

注意

let または const で宣言された変数を再宣言することはできません。

次のようには動作しません:

let carName = "Volvo";
let carName;

JavaScript算術演算子

代数と同様に、JavaScript変数を使って算術演算を行うことができます。= や + のような演算子を使用します:

let x = 5 + 2 + 3;

文字列を追加することもできますが、その場合、文字列が連結されます:

let x = "John" + " " + "Doe";

次も試してみてください:

let x = "5" + 2 + 3;

JavaScriptドル記号 $

JavaScriptではドル記号を文字として扱うため、$ を含む識別子は有効な変数名です:

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

$ を使用することはあまり一般的ではありませんが、プロのプログラマはしばしばJavaScriptライブラリのメイン関数の別名として使用します。

JavaScriptライブラリのjQueryでは、例えば、メイン関数 $ はHTML要素を選択するために使用されます。jQuery $(“p”); は「すべての p 要素を選択します」という意味です。

JavaScriptアンダースコア _

JavaScriptではアンダースコアを文字として扱うため、_ を含む識別子は有効な変数名です:

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

_ を使用することはあまり一般的ではありませんが、プロのプログラマの間では「プライベート（非表示）」変数の別名として使用する慣習があります。