現実世界のオブジェクト

現実世界では、オブジェクトとは家、車、人、動物などの物体のことです。

以下は車のオブジェクトの例です:

オブジェクトのプロパティ

現実世界の車には重量や色などのプロパティがあります:

car.name = Fiat, car.model = 500, car.weight = 850kg, car.color = white.

カー・オブジェクトも同じプロパティを持っていますが、その値は車ごとに異なります。

オブジェクトのメソッド

現実世界の車にはstartやstopといったメソッドがあります:

car.start(), car.drive(), car.brake(), car.stop().

カー・オブジェクトも同じメソッドを持っていますが、それらのメソッドは異なるタイミングで実行されます。

JavaScript変数

JavaScript変数はデータ値のコンテナです。

次のコードは、変数carに単純な値（Fiat）を割り当てます:

例

let car = "Fiat";

JavaScriptオブジェクト

オブジェクトも変数です。ただし、オブジェクトには多くの値を含めることができます。

次のコードは、オブジェクトcarに多くの値（Fiat、500、white）を割り当てます:

例

const car = {type:"Fiat", model:"500", color:"white"};

Note:
オブジェクトをconstキーワードで宣言するのは一般的な慣習です。constを使用したオブジェクトの詳細については、JS Constの章を参照してください。

JavaScriptオブジェクトの定義方法

オブジェクトリテラルを使用する

オブジェクトリテラルは波括弧{}の内部に名前と値のペアのリストです。

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

Note:
名前と値のペアはキーと値のペアとも呼ばれます。

オブジェクトリテラルはオブジェクト初期化子とも呼ばれます。

JavaScriptオブジェクトの作成

これらの例は、4つのプロパティを持つJavaScriptオブジェクトを作成します:

例

// オブジェクトを作成
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

スペースと改行は重要ではありません。オブジェクト初期化子は複数行にまたがることができます:

// オブジェクトを作成
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

この例では空のJavaScriptオブジェクトを作成し、その後に4つのプロパティを追加します:

// オブジェクトを作成
const person = {};

// プロパティを追加
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

newキーワードを使用する

この例では、new Object()を使用して新しいJavaScriptオブジェクトを作成し、その後に4つのプロパティを追加します:

例

// オブジェクトを作成
const person = new Object();

// プロパティを追加
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Note:
上記の例はまったく同じ動作をしますが、new Object()を使用する必要はありません。
可読性、シンプリシティ、実行速度のために、オブジェクトリテラルメソッドを使用します。

オブジェクトのプロパティ

JavaScriptオブジェクト内の名前付き値はプロパティと呼ばれます。

名前と値のペアはPHPの連想配列、Pythonの辞書、Cのハッシュテーブル、Javaのハッシュマップ、RubyとPerlのハッシュに似ています。

オブジェクトプロパティへのアクセス

オブジェクトプロパティには2つの方法でアクセスできます:

• objectName.propertyName
• objectName[“propertyName”]

例

person.lastName;
person["lastName"];

JavaScriptオブジェクトメソッド

メソッドとはオブジェクト上で実行できるアクションです。

メソッドは、プロパティ値として保存された関数定義です。

例

const person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

上記の例では、thisはpersonオブジェクトを参照します:

• this.firstNameはpersonのfirstNameプロパティを意味します。
• this.lastNameはpersonのlastNameプロパティを意味します。

JavaScriptでは、オブジェクトがキングです。

オブジェクトを理解すれば、JavaScriptを理解することができます。

オブジェクトはプロパティとメソッドのコンテナです。

• プロパティは名前付きの値です。
• メソッドはプロパティとして保存された関数です。

プロパティはプリミティブ値、関数、または他のオブジェクトであることができます。

JavaScriptでは、ほとんど「すべて」がオブジェクトです。

• オブジェクトはオブジェクトです。
• 数学はオブジェクトです。
• 関数はオブジェクトです。
• 日付はオブジェクトです。
• 配列はオブジェクトです。
• マップはオブジェクトです。
• セットはオブジェクトです。

プリミティブ値を除くすべてのJavaScriptの値はオブジェクトです。

JavaScriptのプリミティブ

プリミティブ値は、プロパティやメソッドを持たない値です。

3.14はプリミティブ値です。

プリミティブデータ型はプリミティブ値を持つデータです。

JavaScriptでは7種類のプリミティブデータ型が定義されています:

• string
• number
• boolean
• null
• undefined
• symbol
• bigint

不変性

プリミティブ値は不変です（ハードコードされており、変更することができません）。

x = 3.14の場合、xの値を変更することはできますが、3.14の値を変更することはできません。

JavaScriptオブジェクトは可変です

オブジェクトは可変です。参照によってアドレス指定され、値ではなく参照されます。

personがオブジェクトである場合、次のステートメントはpersonのコピーを作成しません:

const x = person;

xオブジェクトはpersonのコピーではありません。xオブジェクトはpersonそのものです。

xに対する変更は、personにも影響します:

例

// オブジェクトを作成
const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}

// コピーを作成
const x = person;

// 両方で年齢を変更
x.age = 10;

Note:
後の章でオブジェクトについてさらに詳しく学びます。

JavaScriptの関数は特定のタスクを実行するために設計されたコードブロックです。

JavaScriptの関数は、「何か」がそれを呼び出したときに実行されます。

例

// p1とp2の積を計算する関数
function myFunction(p1, p2) {
  return p1 * p2;
}

JavaScript関数の構文

JavaScriptの関数はfunctionキーワードで定義され、その後に名前が続き、その後に括弧 () が続きます。

関数名には、文字、数字、アンダースコア、ドル記号（変数と同じルール）を含めることができます。

括弧内には、カンマで区切られたパラメータ名を含めることができます:

function name(parameter1, parameter2, parameter3) {
  // 実行されるコード
}

関数のパラメータは、関数定義の括弧 () 内にリストアップされます。

関数引数は、関数が呼び出されたときに関数によって受け取る値です。

関数の内部では、引数（パラメータ）はローカル変数として振る舞います。

関数の呼び出し

関数の内部のコードは、「何か」が関数を呼び出すときに実行されます:

• イベントが発生したとき（ユーザーがボタンをクリックしたとき）
• JavaScriptコードから呼び出されたとき
• 自動的に（自己呼び出し）

関数の呼び出しについては、後のチュートリアルでさらに詳しく学びます。

関数の戻り値

JavaScriptがreturn文に到達すると、関数の実行は停止します。

関数がステートメントから呼び出された場合、JavaScriptは呼び出しステートメントの後にコードを「返して」実行します。

関数はしばしば戻り値を計算します。戻り値は「呼び出し元」に「返されます」:

例

// 二つの数値の積を計算し、結果を返す関数
function myFunction(a, b) {
  return a * b;
}

なぜ関数を使うのか？

関数を使うことで、コードを再利用することができます。

同じコードを何度も使うことができます。

異なる引数を使って同じコードを使うことで、異なる結果を生成することができます。

()演算子

()演算子は関数を呼び出します:

例

// 華氏から摂氏に変換する関数
function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}

let value = toCelsius(77);

不正確なパラメータで関数にアクセスすると、不正確な答えが返されることがあります:

例

// 華氏から摂氏に変換する関数
function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}

let value = toCelsius();

()なしで関数にアクセスすると、関数の結果ではなく関数そのものが返されます:

例

// 華氏から摂氏に変換する関数
function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}

let value = toCelsius;

重要

上記の例からわかるように、toCelsiusは関数オブジェクトを参照し、toCelsius()は関数の結果を参照します。

関数を変数の値として使用する

関数は変数と同じように使うことができます。すべての種類の数式、代入、計算で使用することができます。

例

// 関数の戻り値を変数に格納する代わりに
let x = toCelsius(77);
let text = "気温は " + x + " 摂氏度です";

関数を直接、変数の値として使用することができます:

例

// 関数の戻り値を変数に格納する代わりに
let text = "気温は " + toCelsius(77) + " 摂氏度です";

関数については後のチュートリアルでさらに詳しく学びます。

ローカル変数

JavaScriptの関数内で宣言された変数は、その関数にローカルになります。

ローカル変数はその関数内からしかアクセスできません。

例

// ここではcarNameを使用できません

function myFunction() {
  let carName = "Volvo";
  // ここではcarNameを使用できます
}

// ここではcarNameを使用できません

ローカル変数はその関数が開始されるときに作成され、関数が完了すると削除されます。

JavaScriptには8つのデータ型があります。

• String（文字列）
• Number（数値）
• Bigint（ビッグインテガー）
• Boolean（真偽値）
• Undefined（未定義）
• Null（ヌル）
• Symbol（シンボル）
• Object（オブジェクト）

オブジェクトデータ型

オブジェクトデータ型には組み込みオブジェクトとユーザー定義オブジェクトの両方が含まれます。

組み込みオブジェクトタイプには以下があります:

objects, arrays, dates, maps, sets, intarrays, floatarrays, promises など。

例

// 数値:
let length = 16;
let weight = 7.5;

// 文字列:
let color = "Yellow";
let lastName = "Johnson";

// 真偽値:
let x = true;
let y = false;

// オブジェクト:
const person = {firstName:"John", lastName:"Doe"};

// 配列オブジェクト:
const cars = ["Saab", "Volvo", "BMW"];

// 日付オブジェクト:
const date = new Date("2022-03-25");

JavaScriptの変数はどんな種類のデータも保持できます。

データ型の概念

プログラミングにおいて、データ型は重要な概念です。

変数で操作するためには、その型についての知識が重要です。

データ型がなければ、コンピュータはこのような問題を安全に解決できません:

let x = 16 + "Volvo";

「16」と「Volvo」を足すことに何か意味があるでしょうか？エラーが発生するか、結果が出力されるでしょうか？

JavaScriptは上記の例を次のように扱います:

let x = "16" + "Volvo";

数値と文字列を足す場合、JavaScriptは数値を文字列として扱います。

例

let x = 16 + "Volvo";

例

let x = "Volvo" + 16;

JavaScriptは式を左から右に評価します。異なる順序で異なる結果が生じることがあります:

JavaScript:

let x = 16 + 4 + "Volvo";

結果:

20Volvo

JavaScript:

let x = "Volvo" + 16 + 4;

結果:

Volvo164

最初の例では、JavaScriptは「16」と「4」を数値として扱い、最後に「Volvo」に到達します。

2番目の例では、最初のオペランドが文字列であるため、すべてのオペランドが文字列として扱われます。

JavaScriptのタイプはダイナミックです

JavaScriptにはダイナミックなタイプがあります。これは同じ変数がさまざまなデータ型で使用できることを意味します:

例

let x;       // 現在 x は未定義です
x = 5;       // 現在 x は数値です
x = "John";  // 現在 x は文字列です

JavaScriptの文字列

文字列（テキスト文字列）は「John Doe」のような文字の並びです。

文字列は引用符で書かれます。シングルクォートまたはダブルクォートのどちらかを使用できます:

例

// ダブルクォートを使用:
let carName1 = "Volvo XC60";

// シングルクォートを使用:
let carName2 = 'Volvo XC60';

文字列の中に引用符を使用することができますが、文字列を囲む引用符と一致していない必要があります:

例

// ダブルクォートの中にシングルクォートを使用:
let answer1 = "It's alright";

// ダブルクォートの中にシングルクォートを使用:
let answer2 = "He is called 'Johnny'";

// シングルクォートの中にダブルクォートを使用:
let answer3 = 'He is called "Johnny"';

後のチュートリアルで文字列についてさらに学びます。

JavaScriptの数値

すべてのJavaScriptの数値は10進数（浮動小数点数）として格納されます。

数値は小数点を伴うか、伴わないかで書かれます:

例

// 小数点あり:
let x1 = 34.00;

// 小数点なし:
let x2 = 34;

指数表記

非常に大きな数や非常に小さな数は科学的な（指数）表記で書くことができます:

例

let y = 123e5;    // 12300000
let z = 123e-5;   // 0.00123

ほとんどのプログラミング言語には多くの数値型があります:

整数（整数）:

byte (8ビット), short (16ビット), int (32ビット), long (64ビット)

実数（浮動小数点数）:

float (32ビット), double (64ビット)

JavaScriptの数値は常に一つの型です:

double (64ビット浮動小数点数)

JavaScript BigInt

すべてのJavaScriptの数値は64ビット浮動小数点形式で格納されます。

JavaScriptのBigIntは通常のJavaScriptのNumberでは表現できない大きな整数値を格納するために使用される新しいデータ型（ES2020）です。

例

let x = BigInt("123456789012345678901234567890");

後のチュートリアルでBigIntについてさらに学びます。

JavaScriptの真偽値

真偽値はtrueまたはfalseの二つの値しか持つことができません。

例

let x = 5;
let y = 5;
let z = 6;
(x == y)       // trueを返します
(x == z)       // falseを返します

真偽値は条件テストでよく使用されます。

後のチュートリアルで真偽値についてさらに学びます。

JavaScriptの配列

JavaScriptの配列は角括弧で書かれます。

配列の要素はカンマで区切られます。

以下のコードは、三つのアイテム（車の名前）を含む配列「cars」を宣言（作成）します:

例

const cars = ["Saab", "Volvo", "BMW"];

配列のインデックスはゼロベースで、最初のアイテムが [0]、次が [1]、というようになります。

後のチュートリアルで配列についてさらに学びます。

JavaScriptのオブジェクト

JavaScriptのオブジェクトは波括弧 {} で書かれます。

オブジェクトのプロパティは名前と値のペアで書かれ、カンマで区切られます。

例

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

上記の例のオブジェクト（person）には4つのプロパティがあります: firstName、lastName、age、eyeColor。

後のチュートリアルでオブジェクトについてさらに学びます。

typeof演算子

JavaScriptのtypeof演算子を使用して、JavaScript変数の型を調べることができます。

typeof演算子は変数または式の型を返します:

例

typeof ""             // "string"を返します
typeof "John"         // "string"を返します
typeof "John Doe"     // "string"を返します

例

typeof 0              // "number"を返します
typeof 314            // "number"を返します
typeof 3.14           // "number"を返します
typeof (3)            // "number"を返します
typeof (3 + 4)        // "number"を返します

後のチュートリアルでtypeofについてさらに学びます。

未定義

JavaScriptでは、値がない変数は値として「未定義（undefined）」を持ちます。その型も未定義です。

例

let car;    // 値は未定義、型は未定義です

どんな変数でも値を「未定義」に設定することで空にすることができます。その型も未定義になります。

例

car = undefined;    // 値は未定義、型は未定義です

空の値

空の値は「未定義」とは異なります。

空の文字列は有効な値としても型があります。

例

let car = "";    // 値は ""、typeof は "string"です

JavaScriptの代入演算子は、JavaScriptの変数に値を代入します。

シフト代入演算子

ビット演算代入演算子

論理演算代入演算子

論理代入演算子はES2020で導入されました。

= 演算子

単純代入演算子（=）は変数に値を代入します。

単純代入の例

let x = 10;
let x = 10 + y;

+= 演算子

加算代入演算子（+=）は変数に値を加算します。

加算代入の例

let x = 10;
x += 5;
let text = "Hello"; text += " World";

-= 演算子

減算代入演算子（-=）は変数から値を減算します。

減算代入の例

let x = 10;
x -= 5;

*= 演算子

乗算代入演算子（*=）は変数を乗算します。

乗算代入の例

let x = 10;
x *= 5;

**= 演算子

累乗代入演算子（**=）は変数を指数にします。

累乗代入の例

let x = 10;
x **= 5;

/= 演算子

除算代入演算子（/=）は変数を除算します。

除算代入の例

let x = 10;
x /= 5;

%= 演算子

剰余代入演算子（%=）は変数に剰余を代入します。

剰余代入の例

let x = 10;
x %= 5;

<<= 演算子

左シフト代入演算子（<<=）は変数を左シフトします。

左シフト代入の例

let x = -100;
x <<= 5;

>>= 演算子

右シフト代入演算子（>>=）は変数を右シフトします（符号付き）。

右シフト代入の例

let x = -100;
x >>= 5;

>>>= 演算子

符号なし右シフト代入演算子（>>>=）は変数を右シフトします（符号なし）。

符号なし右シフト代入の例

let x = -100;
x >>>= 5;

&= 演算子

ビット AND 代入演算子（&=）は二つのオペランドに対してビット AND 演算を行い、その結果を変数に代入します。

ビット AND 代入の例

let x = 10;
x &= 5;

|= 演算子

ビット OR 代入演算子（|=）は二つのオペランドに対してビット OR 演算を行い、その結果を変数に代入します。

ビット OR 代入の例

let x = 10;
x |= 5;

^= 演算子

ビット XOR 代入演算子（^=）は二つのオペランドに対してビット XOR 演算を行い、その結果を変数に代入します。

ビット XOR 代入の例

let x = 10;
x ^= 5;

&&= 演算子

論理 AND 代入演算子（&&=）は二つの値の間で使用されます。最初の値が true の場合、二つ目の値が代入されます。

論理 AND 代入の例

let x = 10;
x &&= 5;

&&= 演算子はES2020の機能です。

||= 演算子

論理 OR 代入演算子（||=）は二つの値の間で使用されます。最初の値が false の場合、二つ目の値が代入されます。

論理 OR 代入の例

let x = 10;
x ||= 5;

||= 演算子はES2020の機能です。

??= 演算子

Nullish coalescing 代入演算子（??=）は二つの値の間で使用されます。最初の値が undefined または null の場合、二つ目の値が代入されます。

Nullish coalescing 代入の例

let x;
x ??= 5;

??= 演算子はES2020の機能です。

JavaScriptの算術演算子は、数値（リテラルまたは変数）に対して算術演算を行います。

算術演算

典型的な算術演算は、通常2つの数値に対して行われます。

数値はリテラルである場合もあります:

let x = 100 + 50;

また、変数である場合もあります:

let x = a + b;

また、式で演算することもできます:

let x = (100 + 50) * a;

演算子とオペランド

算術演算における数値は、オペランドと呼ばれます。オペランド間で行われる操作は演算子によって定義されます。

例えば、次のようになります:

100 + 50

この場合、100と50がオペランドであり、+が演算子です。

加算

加算演算子（+）は数値を加算します:

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

減算

減算演算子（-）は数値を減算します:

let x = 5;
let y = 2;
let z = x - y;

乗算

乗算演算子（*）は数値を乗算します:

let x = 5;
let y = 2;
let z = x * y;

除算

除算演算子（/）は数値を除算します:

let x = 5;
let y = 2;
let z = x / y;

剰余

剰余演算子（%）は、除算の余りを返します:

let x = 5;
let y = 2;
let z = x % y;

算術演算において、整数の除算は商と余りを返します。

数学的には、モジュロ演算の結果は算術的な除算の余りです。

インクリメント

インクリメント演算子（++）は数値を増加させます:

let x = 5;
x++;
let z = x;

デクリメント

デクリメント演算子（–）は数値を減少させます:

let x = 5;
x--;
let z = x;

指数化

指数化演算子（**）は、第1オペランドを第2オペランドの累乗にします:

let x = 5;
let z = x ** 2;

x ** y は、Math.pow(x,y) と同じ結果を返します:

let x = 5;
let z = Math.pow(x,2);

演算子の優先順位

演算子の優先順位は、算術式で操作が行われる順序を示します。

例えば、次のような演算がある場合:

let x = 100 + 50 * 3;

上記の例の結果は、150 * 3 と同じでしょうか、それとも 100 + 150 と同じでしょうか？

加算か乗算が最初に行われるのでしょうか？

伝統的な学校の数学と同様に、乗算が最初に行われます。

乗算 (*) および除算 (/) は、加算 (+) および減算 (-) よりも優先度が高くなります。

そして（学校の数学と同様に）、括弧を使用することで優先順位を変更することができます。

括弧を使用すると、括弧内の演算が最初に計算されます:

let x = (100 + 50) * 3;

優先順位が同じ演算子が多数存在する場合（加算と減算、または乗算と除算など）、左から右へと計算されます:

例:

let x = 100 + 50 - 3;
let x = 100 / 50 * 3;

JavaScriptの演算子は、さまざまな数学的および論理的な計算を実行するために使用されます。

例:

• 代入演算子 = は値を代入します
• 加算演算子 + は値を加算します
• 乗算演算子 * は値を乗算します
• 比較演算子 > は値を比較します

JavaScriptの代入

代入演算子（=）は変数に値を代入します:

代入の例

let x = 10;
// xに値5を代入
let x = 5;
// yに値2を代入
let y = 2;
// zにx + yの値を代入
let z = x + y;

JavaScriptの加算

加算演算子（+）は数値を加算します:

加算

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

JavaScriptの乗算

乗算演算子（*）は数値を乗算します:

乗算

let x = 5;
let y = 2;
let z = x * y;

JavaScriptの演算子の種類

JavaScriptにはさまざまな種類の演算子があります:

• 算術演算子
• 代入演算子
• 比較演算子
• 文字列演算子
• 論理演算子
• ビット演算子
• 三項演算子
• 型演算子

JavaScriptの算術演算子

算術演算子は数値に対して算術演算を行います:

算術演算子の例

let a = 3;
let x = (100 + 50) * a;

注意: 算術演算子についての詳細は、JS Arithmetic 章で説明されています。

JavaScriptの代入演算子

代入演算子はJavaScript変数に値を代入します。

加算代入演算子（+=）は変数に値を追加します。

代入

let x = 10;
x += 5;

注意: 代入演算子についての詳細は、JS Assignment 章で説明されています。

JavaScriptの比較演算子

注意: 比較演算子についての詳細は、JS Comparisons 章で説明されています。

JavaScriptの文字列比較

上記のすべての比較演算子は、文字列に対しても使用できます:

let text1 = "A";
let text2 = "B";
let result = text1 < text2;

文字列は辞書順に比較されます:

let text1 = "20";
let text2 = "5";
let result = text1 < text2;

JavaScriptの文字列の加算

+ は文字列を追加（連結）するためにも使用されます:

let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;

+= 代入演算子も文字列を追加（連結）するために使用できます:

let text1 = "とても素敵な ";
text1 += "良い日";

text1 の結果は次のとおりになります:

とても素敵な 良い日

注意: 文字列に使用される + 演算子は、連結演算子と呼ばれます。

数値と文字列の加算

2つの数値を加算すると、合計が返されますが、数値と文字列を加算すると文字列が返されます:

let x = 5 + 5;
let y = "5" + 5;
let z = "Hello" + 5;

x, y, z の結果は次のとおりです:

10
55
Hello5

注意: 数値と文字列を加算すると、結果は文字列になります!

JavaScriptの論理演算子

注意: 論理演算子についての詳細は、JS Comparisons 章で説明されています。

JavaScriptの型演算子

注意: 型演算子についての詳細は、JS Type Conversion 章で説明されています。

JavaScriptのビット演算子

ビット演算子は32ビットの数値に対して動作します。

操作の中で数値のオペランドは32ビットの数値に変換されます。結果はJavaScript数値に変換されます。

上記の例は4ビットの符号なしの例ですが、JavaScriptでは32ビットの符号付き数値を使用します。

このため、JavaScriptでは ~ 5 は10を返しません。-6 を返します。

~00000000000000000000000000000101 は 11111111111111111111111111111010 を返します。

const キーワードは ES6（2015年）で導入されました。

const で定義された変数は再宣言できません。

const で定義された変数は再代入できません。

const で定義された変数はブロックスコープを持ちます。

再代入できません

const キーワードで定義された変数は再代入できません:

const PI = 3.141592653589793;
PI = 3.14;      // これはエラーになります
PI = PI + 10;   // これもエラーになります

代入が必要です

JavaScript の const 変数は宣言時に値を代入する必要があります:

正しい:

const PI = 3.14159265359;

間違い:

const PI;
PI = 3.14159265359;

JavaScript const を使用するタイミング

値が変更されるべきでないことが明確な場合には常に const で変数を宣言します。

const を使用して宣言する場合:

• 新しい配列
• 新しいオブジェクト
• 新しい関数
• 新しい正規表現

定数オブジェクトと配列

const キーワードは少し誤解を招くことがあります。

それは定数値を定義するのではなく、値への定数参照を定義します。

そのため、次の操作はできません:

• 定数値の再代入
• 定数配列の再代入
• 定数オブジェクトの再代入

しかし、次の操作はできます:

• 定数配列の要素の変更
• 定数オブジェクトのプロパティの変更

定数配列

定数配列の要素を変更することができます:

// 定数配列を作成できます:
const cars = ["Saab", "Volvo", "BMW"];

// 要素を変更できます:
cars[0] = "Toyota";

// 要素を追加できます:
cars.push("Audi");

しかし、配列を再代入することはできません:

const cars = ["Saab", "Volvo", "BMW"];

cars = ["Toyota", "Volvo", "Audi"];    // エラー

定数オブジェクト

定数オブジェクトのプロパティを変更することができます:

// 定数オブジェクトを作成できます:
const car = {type:"Fiat", model:"500", color:"white"};

// プロパティを変更できます:
car.color = "red";

// プロパティを追加できます:
car.owner = "Johnson";

しかし、オブジェクトを再代入することはできません:

const car = {type:"Fiat", model:"500", color:"white"};

car = {type:"Volvo", model:"EX60", color:"red"};    // エラー

重要

var、let、const の違い

良い点

let と const はブロックスコープを持ちます。

let と const は再宣言できません。

let と const は使用する前に宣言しなければなりません。

let と const は this にバインドしません。

let と const は巻き上げされません。

注意

Internet Explorer 11以前では let と const キーワードはサポートされていません。

最初の完全なサポートが始まったブラウザのバージョンに関する情報は以下の表をご参照ください:

ブロックスコープ

const キーワードで変数を宣言する場合、ブロックスコープに関しては let と類似しています。

この例では、ブロック内で宣言された x と、ブロック外で宣言された x は異なります:

const x = 10;
// ここでは x は 10 です

{
  const x = 2;
  // ここでは x は 2 です
}

// ここでは x は 10 です

再宣言

JavaScript の var 変数を再宣言することはプログラムのどこでも許可されています:

var x = 2;     // 許可されています
var x = 3;     // 許可されています
x = 4;         // 許可されています

既存の var 変数または let 変数を同じスコープで const に再宣言することは許可されません:

var x = 2;     // 許可されています
const x = 2;   // 許可されていません

{
  let x = 2;     // 許可されています
  const x = 2;   // 許可されていません
}

{
  const x = 2;   // 許可されています
  const x = 2;   // 許可されていません
}

既存の const 変数を同じスコープで再代入することは許可されません:

const x = 2;     // 許可されています
x = 2;           // 許可されていません
var x = 2;       // 許可されていません
let x = 2;       // 許可されていません
const x = 2;     // 許可されていません

{
  const x = 2;   // 許可されています
  x = 2;         // 許可されていません
  var x = 2;     // 許可されていません
  let x = 2;     // 許可されていません
  const x = 2;   // 許可されていません
}

巻き上げ

var で定義された変数はプログラムの先頭に巻き上げられ、いつでも初期化できます。

つまり、宣言する前に変数を使用することができます:

// これはOKです:
carName = "Volvo";
var carName;

巻き上げされた const 変数もプログラムの先頭に巻き上げられますが、初期化はされません。

つまり、宣言する前に const 変数を使用すると ReferenceError が発生します:

alert (carName);
const carName = "Volvo";

let キーワードは ES6（2015年）で導入されました。

let で宣言された変数はブロックスコープを持ちます。

let で宣言された変数は使用する前に宣言されなければなりません。

let で宣言された変数は同じスコープ内で再宣言することはできません。

ブロックスコープ

ES6（2015年）以前、JavaScriptにはブロックスコープがありませんでした。

JavaScriptにはグローバルスコープと関数スコープがありました。

ES6では、let と const という2つの新しいキーワードが導入され、JavaScriptにブロックスコープを提供しました:

{
  let x = 2;
}
// ここでは x を使用できません

グローバルスコープ

var で宣言された変数は常にグローバルスコープを持ちます。

var キーワードで宣言された変数はブロックスコープを持つことができません:

{
  var x = 2;
}
// ここでは x を使用できます

再宣言できない

let で定義された変数は再宣言できません。

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

let を使用すると、次のようにできません:

let x = "John Doe";

let x = 0;

var で定義された変数は再宣言できます。

var を使用すると、次のようにできます:

var x = "John Doe";

var x = 0;

変数の再宣言

var キーワードを使用して変数を再宣言すると問題が発生することがあります。

ブロック内で変数を再宣言すると、ブロック外の変数も再宣言されます:

var x = 10;
// ここでは x は 10 です

{
  var x = 2;
  // ここでは x は 2 です
}

// ここでは x は 2 です

let キーワードを使用して変数を再宣言すると、この問題を解決できます。

ブロック内で変数を再宣言しても、ブロック外の変数は再宣言されません:

let x = 10;
// ここでは x は 10 です

{
  let x = 2;
  // ここでは x は 2 です
}

// ここでは x は 10 です

var、let、constの違い

重要

let と const はブロックスコープを持ちます。

let と const は再宣言できません。

let と const は使用する前に宣言しなければなりません。

let と const は this にバインドしません。

let と const は巻き上げされません。

良い点

let と const はブロックスコープを持ちます。

let と const は再宣言できません。

let と const は使用する前に宣言しなければなりません。

let と const は this にバインドしません。

let と const は巻き上げされません。

注意

Internet Explorer 11以前では let と const キーワードはサポートされていません。

最初の完全なサポートが始まったブラウザのバージョンに関する情報は以下の表をご参照ください:

再宣言

var を使用して JavaScript 変数を再宣言することはプログラムのどこでも許可されています:

var x = 2;
// ここで x は 2 です

var x = 3;
// ここで x は 3 です

let を使用すると、同じブロック内での変数の再宣言は許可されません:

var x = 2;   // 許可されています
let x = 3;   // 許可されていません

{
  let x = 2;   // 許可されています
  let x = 3;   // 許可されていません
}

{
  let x = 2;   // 許可されています
  var x = 3;   // 許可されていません
}

Let の巻き上げ

var で定義された変数は先頭に巻き上げられ、いつでも初期化できます。

これはOKです:

carName = "Volvo";
var carName;

let で定義された変数もブロックの先頭に巻き上げられますが、初期化されません。

つまり、let 変数を宣言する前に使用すると ReferenceError が発生します:

carName = "Saab";
let carName = "Volvo";

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

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

自動的に宣言される例

// 見出しを変更する:
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 を使用するタイミング

1. 変数は常に宣言すること
2. 値が変更されない場合は const を使用する
3. タイプが変更されない場合（配列やオブジェクト）も const を使用する
4. const を使用できない場合にのみ let を使用する
5. 古いブラウザをサポートする必要がある場合にのみ 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;

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

JavaScriptのコメントは、JavaScriptコードを説明し、可読性を高めるために使用できます。

JavaScriptのコメントは、別のコードをテストする際に実行を防止するためにも使用されます。

単一行コメント

単一行コメントは // で始まります。

// から行末までのテキストはJavaScriptによって無視されます（実行されません）。

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

// 段落を変更する:
document.getElementById("myP").innerHTML = "My first paragraph.";

この例では、各コード行の前に単一行コメントが使用されています。

複数行コメント

複数行コメントは /* で始まり */ で終わります。

/* と */ の間のテキストはJavaScriptによって無視されます。

/*
以下のコードは
my web page内のid = "myH"の見出し
およびid = "myP"の段落を変更します：
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";

通常、単一行コメントが使用されます。ブロックコメントは公式のドキュメント作成に使用されることが多いです。

コメントを使用して実行を防止する

コメントを使用してコードの実行を防ぐことは、コードテストに適しています。

コード行の前に // を追加すると、その行は実行可能なコードからコメントに変わります。

// document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";

この例では、複数の行をコメントブロックで囲んで、それらの行の実行を防止しています。