コードラボJP
プライバシーポリシー お問い合わせ サイトマップ

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

代入演算子一覧
演算子 例 同等の式
= x = y x = y
+= x += y x = x + y
-= x -= y x = x – y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y

目次

シフト代入演算子

シフト代入演算子一覧
演算子 例 同等の式
<<= x <<= y x = x << y
>>>= x >>= y x = x >> y
>>>= x >>>= y x = x >>> y

ビット演算代入演算子

ビット演算代入演算子一覧
演算子 例 同等の式
&= x &= y x = x & y
^= x ^= y x = x ^ y
|= x |= y x = x | y

論理演算代入演算子

論理演算代入演算子一覧
演算子 例 同等の式
&&= x &&= y x = x && (x = y)
||= x ||= y x = x || (x = y)
??= x ??= y x = x ?? (x = y)

論理代入演算子は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の算術演算子は、数値（リテラルまたは変数）に対して算術演算を行います。

演算子 説明
+ 加算
– 減算
* 乗算
** 指数化（ES2016）
/ 除算
% 剰余（除算の余り）
++ インクリメント
— デクリメント

目次

算術演算

典型的な算術演算は、通常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;
演算子 説明
+ 加算
– 減算
* 乗算
** 指数化（ES2016）
/ 除算
% 剰余（除算の余り）
++ インクリメント
— デクリメント

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

JavaScriptの代入演算子

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

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

代入


let x = 10;
x += 5;
演算子 例 同じ意味
= x = y x = y
+= x += y x = x + y
-= x -= y x = x – y
* x *= y x = x * y
/ x /= y x = x / y
% x %= y x = x % y
**= x **= y x = x ** y

注意: 代入演算子についての詳細は、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の型演算子

演算子 説明
typeof 変数の型を返します
instanceof オブジェクトがオブジェクト型のインスタンスである場合、true を返します

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

JavaScriptのビット演算子

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

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

演算子 説明 例 同じ意味 結果 10進数
& AND 5 & 1 0101 & 0001 0001 1
| OR 5 | 1 0101 | 0001 0101 5
~ NOT ~ 5 ~0101 1010 10
^ XOR 5 ^ 1 0101 ^ 0001 0100 4
<< 左シフト 5 << 1 0101 << 1 1010 10
>> 右シフト 5 >> 1 0101 >> 1 0010 2
>>> 符号なし右シフト 5 >>> 1 0101 >>> 1 0010 2

上記の例は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 の違い

スコープ 再宣言 再代入 巻き上げ thisにバインド
var No Yes Yes Yes
let Yes No Yes No
const Yes No No No

良い点

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

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

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

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

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

注意

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

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

Chrome 49 Edge 12 Firefox 36 Safari 11 Opera 36
2016年3月 2015年7月 2015年1月 2017年9月 2016年3月

ブロックスコープ

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の違い

スコープ 再宣言 再代入 巻き上げ thisにバインド
var No Yes Yes Yes
let Yes No Yes No
const Yes No No No

重要

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 キーワードはサポートされていません。

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

Chrome 49 Edge 12 Firefox 36 Safari 11 Opera 36
2016年3月 2015年7月 2015年1月 2017年9月 2016年3月

再宣言

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つの方法で変数を宣言できます:

目次

自動的に宣言される例

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

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

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

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 のような）であることができます。

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

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.";

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

JavaScriptの構文とは、JavaScriptプログラムが構築されるルールのセットです：


// 変数の作成方法:
var x;
let y;

// 変数の使用方法:
x = 5;
y = 6;
let z = x + y;

目次

JavaScriptの値

JavaScriptの構文では、2種類の値が定義されています：

固定値はリテラルと呼ばれます。

変数値は変数と呼ばれます。

JavaScriptのリテラル

固定値のための最も重要な構文ルールは次の通りです：

  1. 数値は小数点を含めても含めなくても書くことができます：
  2. 文字列はダブルクォートまたはシングルクォートで囲まれたテキストです：

10.50

1001

"John Doe"

'John Doe'

JavaScriptの変数

プログラミング言語では、変数はデータ値を格納するために使用されます。

JavaScriptでは、変数を宣言するためにキーワード var、let、const を使用します。

等号は変数に値を割り当てるために使用されます。


let x;
x = 6;

JavaScriptの演算子

JavaScriptは算術演算子（ + – * / ）を使用して値を計算します：


(5 + 6) * 10

JavaScriptは代入演算子（ = ）を使用して変数に値を割り当てます：


let x, y;
x = 5;
y = 6;

JavaScriptの式

式は値、変数、演算子の組み合わせで、値に計算されます。

計算自体は評価と呼ばれます。


5 * 10

x * 10

値は数値や文字列など、さまざまなタイプであることができます。


"John" + " " + "Doe"

JavaScriptのキーワード

JavaScriptのキーワードは実行するアクションを識別するために使用されます。

letキーワードはブラウザに変数を作成するよう指示します：


let x, y;
x = 5 + 6;
y = x * 10;

varキーワードもブラウザに変数を作成するよう指示します：


var x, y;
x = 5 + 6;
y = x * 10;

これらの例では、varまたはletを使用しても同じ結果が得られます。

varとletについてはこのチュートリアルの後で詳しく学びます。

JavaScriptのコメント

すべてのJavaScript文が「実行」されるわけではありません。

二重スラッシュ // または /* と */ の間にあるコードはコメントとして扱われます。

コメントは無視され、実行されません：


let x = 5;   // 実行されます

// x = 6;   実行されません

コメントについては後の章でさらに学びます。

JavaScriptの識別子 / 名前

識別子はJavaScriptの名前です。

識別子は変数、キーワード、および関数の名前を付けるために使用されます。

有効な名前のルールはほとんどのプログラミング言語で同じです。

JavaScriptの名前は次の文字で始まる必要があります：

後続の文字は文字、数字、アンダースコア、またはドル記号であることができます。

Note: 数字は名前の最初の文字として使用することはできません。

このようにしてJavaScriptは識別子を数値から簡単に区別することができます。

JavaScriptは大文字と小文字を区別します

すべてのJavaScriptの識別子は大文字と小文字を区別します。

lastNameとlastnameは2つの異なる変数です：


let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";

JavaScriptはLETやLetをキーワードletとして解釈しません。

JavaScriptとキャメルケース

歴史的に、プログラマーは複数の単語を1つの変数名に結合するために異なる方法を使用してきました：

JavaScriptのプログラマーは通常、小文字から始まるキャメルケースを使用します：


firstName, lastName, masterCard, interCity

JavaScriptの文字セット

JavaScriptはUnicode文字セットを使用しています。

Unicodeは世界中のほとんどの文字、句読点、および記号をカバーしています。

詳細については、完全なUnicodeリファレンスを参照してください。

目次

例


let x, y, z;    // 文1
x = 5;          // 文2
y = 6;          // 文3
z = x + y;      // 文4

JavaScriptプログラム

コンピュータプログラムはコンピュータによって「実行」される「命令」のリストです。

プログラミング言語では、これらのプログラム命令を文と呼びます。

JavaScriptプログラムはプログラム文のリストです。

HTMLでは、JavaScriptプログラムはウェブブラウザによって実行されます。

JavaScript文

JavaScriptの文は次の要素で構成されています：

この文は、ブラウザに対してid=”demo”のHTML要素に「Hello Dolly.」と書き込むよう指示します：


document.getElementById("demo").innerHTML = "Hello Dolly.";

ほとんどのJavaScriptプログラムには多くのJavaScript文が含まれています。

これらの文は書かれた順に1つずつ実行されます。

JavaScriptプログラム（およびJavaScript文）はしばしばJavaScriptコードと呼ばれます。

セミコロン ;

セミコロンはJavaScript文を区切ります。

実行可能な各文の最後にセミコロンを追加してください：


let a, b, c;  // 3つの変数を宣言
a = 5;        // aに値5を代入
b = 6;        // bに値6を代入
c = a + b;    // aとbの合計をcに代入

セミコロンで区切られた複数の文を1行にまとめることもできます：


a = 5; b = 6; c = a + b;

ウェブ上では、セミコロンを省略した例も見かけるかもしれません。

文の最後にセミコロンをつけるのは必須ではありませんが、強く推奨されます。

JavaScriptの空白

JavaScriptは複数のスペースを無視します。スクリプトをより読みやすくするために空白を追加することができます。

次の行は等価です：


let person = "Hege";
let person="Hege";

良い習慣としては、演算子（= + – * /）の周りにスペースを置くことです：


let x = y + z;

JavaScriptの行の長さと改行

最良の読みやすさのために、プログラマーは通常、80文字を超えるコード行を避ける傾向があります。

JavaScript文が1行に収まらない場合、最適な改行位置は演算子の後です：


document.getElementById("demo").innerHTML =
"Hello Dolly!";

JavaScriptのコードブロック

JavaScriptの文は中括弧 {…} 内のコードブロックにグループ化することができます。

コードブロックの目的は、一緒に実行する文を定義することです。

文が関数内でグループ化されるブロックの例として、以下があります：


function myFunction() {
  document.getElementById("demo1").innerHTML = "Hello Dolly!";
  document.getElementById("demo2").innerHTML = "How are you?";
}

このチュートリアルでは、コードブロックにはインデントにスペース2つを使用します。

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

JavaScriptのキーワード

JavaScriptの文は、通常、実行するJavaScriptアクションを識別するキーワードで始まります。

「予約語リファレンス」にはすべてのJavaScriptキーワードがリストされています。

このチュートリアルで学ぶいくつかのキーワードのリストを以下に示します：

キーワード 説明
var 変数を宣言する
let ブロックスコープの変数を宣言する
const ブロックスコープの定数を宣言する
if 条件に基づいて実行する文のブロックをマークする
switch 異なるケースで実行する文のブロックをマークする
for ループで実行する文のブロックをマークする
function 関数を宣言する
return 関数から退出する
try エラーハンドリングを実装する

JavaScriptのキーワードは予約語です。予約語は変数の名前として使用できません。

目次

JavaScriptの表示方法

JavaScriptはさまざまな方法でデータを「表示」できます：

  1. innerHTMLを使用してHTML要素に書き込む。
  2. document.write()を使用してHTML出力に書き込む。
  3. window.alert()を使用してアラートボックスに書き込む。
  4. console.log()を使用してブラウザコンソールに書き込む。

innerHTMLの使用

HTML要素にアクセスするには、JavaScriptはdocument.getElementById(id)メソッドを使用できます。

id属性はHTML要素を定義し、innerHTMLプロパティはHTMLコンテンツを定義します：


<!DOCTYPE html>
<html>
<body>

<h1>私の最初のウェブページ</h1>
<p>最初の段落</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html>

HTML要素のinnerHTMLプロパティを変更することは、HTMLでデータを表示する一般的な方法です。

document.write()の使用

テスト目的であれば、document.write()を使用するのが便利です：


<!DOCTYPE html>
<html>
<body>

<h1>私の最初のウェブページ</h1>
<p>最初の段落</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

HTMLドキュメントの読み込み後にdocument.write()を使用すると、既存のHTMLがすべて削除されます：


<!DOCTYPE html>
<html>
<body>

<h1>私の最初のウェブページ</h1>
<p>最初の段落</p>

<button type="button" onclick="document.write(5 + 6)">試してみる</button>

</body>
</html>

document.write()メソッドはテスト目的のみに使用すべきです。