JavaScriptのブール値は、trueまたはfalseのいずれかを表します。

ブール値

プログラミングでは非常に頻繁に、YES / NO、ON / OFF、TRUE / FALSEのように、一つの変数が二つの値のいずれかを取る必要があります。JavaScriptにはそのためのブールデータ型があります。これはtrueまたはfalseの値しか取ることができません。

Boolean() 関数

Boolean() 関数を使用して、式（または変数）がtrueかどうかを確認することができます:

// 式がtrueであるかどうかを確認する:
Boolean(10 > 9)

または、より簡単に:

// 式がtrueであるかどうかを確認する:
(10 > 9)

比較と条件

JS Comparisons 章では比較演算子の完全な概要が示されています。

JS If Else 章では条件文の完全な概要が示されています。

以下にいくつかの例を示します:

式のブール値は、すべてのJavaScriptの比較と条件の基盤です。

“値”を持つものは全てtrue

例:

100

3.14

-15

"Hello"

"false"

7 + 1 + 3.14

“値”を持たないものは全てfalse

0（ゼロ）のブール値はfalseです:

let x = 0;
Boolean(x);

-0（マイナスゼロ）のブール値はfalseです:

let x = -0;
Boolean(x);

空の文字列 “” のブール値はfalseです:

let x = "";
Boolean(x);

undefinedのブール値はfalseです:

let x;
Boolean(x);

nullのブール値はfalseです:

let x = null;
Boolean(x);

falseのブール値はもちろんfalseです:

let x = false;
Boolean(x);

NaNのブール値はfalseです:

let x = 10 / "Hallo";
Boolean(x);

JavaScriptのブール値としてのオブジェクト

通常、JavaScriptのブール値はリテラルから作成されるプリミティブ値です:

let x = false;

しかし、ブール値はキーワードnewを使ってオブジェクトとして定義することもできます:

let y = new Boolean(false);

Example

let x = false;
let y = new Boolean(false);

// typeof x は boolean を返す
// typeof y は object を返す

Booleanオブジェクトを作成しないでください。

new キーワードはコードを複雑にし、実行速度を遅くします。

Booleanオブジェクトは予期しない結果を生むことがあります:

let x = false;
let y = new Boolean(false);

// == 演算子を使用すると、x と y は等しいと判断されます:
(x == y)

// === 演算子を使用すると、x と y は等しくありません:
(x === y)

JavaScriptのオブジェクトを比較すると、常にfalseを返します。

Math.random()

Math.random() は0（含む）から1（排他）までのランダムな数値を返します:

// ランダムな数値を返す:
Math.random();

Math.random() は常に1未満の数値を返します。

JavaScript ランダム整数

Math.random() を Math.floor() と組み合わせると、ランダムな整数を返すことができます。

JavaScriptには整数というものは存在しません。ここで扱っているのは小数点以下がない数値です。

Example

// 0から9までのランダムな整数を返す:
Math.floor(Math.random() * 10);

Example

// 0から10までのランダムな整数を返す:
Math.floor(Math.random() * 11);

Example

// 0から99までのランダムな整数を返す:
Math.floor(Math.random() * 100);

Example

// 0から100までのランダムな整数を返す:
Math.floor(Math.random() * 101);

Example

// 1から10までのランダムな整数を返す:
Math.floor(Math.random() * 10) + 1;

Example

// 1から100までのランダムな整数を返す:
Math.floor(Math.random() * 100) + 1;

適切なランダム関数

上記の例から分かるように、全てのランダムな整数目的に適したランダム関数を作成するのが良い考えです。

このJavaScript関数は常にmin（含む）からmax（排他）までのランダムな数値を返します:

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min) ) + min;
}

このJavaScript関数は常にminからmax（両方を含む）までのランダムな数値を返します:

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}

JavaScriptのMathオブジェクトを使用すると、数値に対して数学的な操作を行うことができます。

Math オブジェクト

Mathオブジェクトは他のオブジェクトと異なり、コンストラクタを持ちません。

Mathオブジェクトは静的です。つまり、Mathオブジェクトを生成することなく、すべてのメソッドやプロパティを使用することができます。

Math プロパティ（定数）

すべてのMathプロパティの構文は: Math.property です。

JavaScriptは8つの数学定数を提供しており、これらはMathのプロパティとしてアクセスできます:

• Math.E // Euler’s number
• Math.PI // PI
• Math.SQRT2 // 2の平方根
• Math.SQRT1_2 // 1/2の平方根
• Math.LN2 // 2の自然対数
• Math.LN10 // 10の自然対数
• Math.LOG2E // Eの底2の対数
• Math.LOG10E // Eの底10の対数

Math メソッド

すべてのMathメソッドの構文は: Math.method(number) です。

整数への変換

数値を整数に丸めるための一般的な4つのメソッドがあります:

• Math.round(x) // 最も近い整数に丸める
• Math.ceil(x) // 最も近い整数に切り上げる
• Math.floor(x) // 最も近い整数に切り下げる
• Math.trunc(x) // xの整数部分を返す（ES6で追加）

Math.round()

Math.round(x) は最も近い整数を返します:

Math.round(4.6);
Math.round(4.5);
Math.round(4.4);

Math.ceil()

Math.ceil(x) はxを最も近い整数に切り上げた値を返します:

Math.ceil(4.9);
Math.ceil(4.7);
Math.ceil(4.4);
Math.ceil(4.2);
Math.ceil(-4.2);

Math.floor()

Math.floor(x) はxを最も近い整数に切り下げた値を返します:

Math.floor(4.9);
Math.floor(4.7);
Math.floor(4.4);
Math.floor(4.2);
Math.floor(-4.2);

Math.trunc()

Math.trunc(x) はxの整数部分を返します:

Math.trunc(4.9);
Math.trunc(4.7);
Math.trunc(4.4);
Math.trunc(4.2);
Math.trunc(-4.2);

Math.sign()

Math.sign(x) はxが負、ゼロ、または正であるかを返します:

Math.sign(-4);
Math.sign(0);
Math.sign(4);

Math.trunc() および Math.sign() は JavaScript 2015 – ES6 で追加されました。

Math.pow()

Math.pow(x, y) はxのy乗を返します:

Math.pow(8, 2);

Math.sqrt()

Math.sqrt(x) はxの平方根を返します:

Math.sqrt(64);

Math.abs()

Math.abs(x) はxの絶対値（正の値）を返します:

Math.abs(-4.7);

Math.sin()

Math.sin(x) は角度x（ラジアンで指定）の正弦値（-1から1の値）を返します。

度数ではなくラジアンで指定する場合は、度数をラジアンに変換する必要があります:

角度（ラジアン） = 角度（度数） x PI / 180.

Math.sin(90 * Math.PI / 180);     // 1を返す（90度の正弦）

Math.cos()

Math.cos(x) は角度x（ラジアンで指定）の余弦値（-1から1の値）を返します。

度数ではなくラジアンで指定する場合は、度数をラジアンに変換する必要があります:

角度（ラジアン） = 角度（度数） x PI / 180.

Math.cos(0 * Math.PI / 180);     // 1を返す（0度の余弦）

Math.min() と Math.max()

Math.min() および Math.max() は引数リストの中から最小値または最大値を見つけるために使用できます:

Math.min(0, 150, 30, 20, -8, -200);
Math.max(0, 150, 30, 20, -8, -200);

Math.random()

Math.random() は0（含む）から1（排他）までのランダムな数値を返します:

Math.random();

The Math.log() メソッド

Math.log(x) はxの自然対数（底eの対数）を返します。

自然対数は特定の成長レベルに達するまでにかかる時間を示します:

Math.log(1);
Math.log(2);
Math.log(3);

Math.E と Math.log() は対になっています。

Math.Eを何回かかけると10が得られますか？

Math.log(10);

The Math.log2() メソッド

Math.log2(x) はxの底2の対数を返します。

2を何回かかけると8が得られますか？

Math.log2(8);

The Math.log10() メソッド

Math.log10(x) はxの底10の対数を返します。

10を何回かかけると1000が得られますか？

Math.log10(1000);

JavaScript Math メソッド

JavaScript 日付入力

一般的に、JavaScriptの日付入力形式には3種類があります:

ISO形式はJavaScriptで厳密な標準に従います。

他の形式は定義があまり明確ではなく、ブラウザに依存することがあります。

JavaScript 日付出力

入力形式に関係なく、JavaScriptはデフォルトで日付を完全なテキスト文字列で出力します:

Sat Jul 06 2024 14:47:01 GMT+0900 (GMT+09:00)

JavaScript ISO 日付

ISO 8601は日付と時刻の表現のための国際標準です。

ISO 8601構文（YYYY-MM-DD）はJavaScriptの推奨日付形式でもあります:

例（完全な日付）

const d = new Date("2015-03-25");

計算される日付はあなたのタイムゾーンに対して相対的です。タイムゾーンによって、上記の結果は3月24日から3月25日の間で異なる場合があります。

ISO 日付（年と月）

ISO日付は日を指定せずに書くこともできます（YYYY-MM）:

const d = new Date("2015-03");

タイムゾーンによって、上記の結果は2月28日から3月1日の間で異なる場合があります。

ISO 日付（年のみ）

ISO日付は月と日を指定せずに書くこともできます（YYYY）:

const d = new Date("2015");

タイムゾーンによって、上記の結果は2014年12月31日から2015年1月1日の間で異なる場合があります。

ISO 日付（日付と時刻）

ISO日付は追加された時間、分、秒で書くこともできます（YYYY-MM-DDTHH:MM:SSZ）:

const d = new Date("2015-03-25T12:00:00Z");

日付と時間は大文字のTで区切られます。

UTC時間は大文字のZで定義されます。

UTCに対して時間を変更したい場合は、Zを削除し、代わりに+HH:MMまたは-HH:MMを追加します:

const d = new Date("2015-03-25T12:00:00-06:30");

UTC（協定世界時）はGMT（グリニッジ標準時）と同じです。

日付時刻文字列でTまたはZを省略すると、異なるブラウザで異なる結果が得られることがあります。

タイムゾーン

タイムゾーンを指定せずに日付を設定する場合、JavaScriptはブラウザのタイムゾーンを使用します。

タイムゾーンを指定せずに日付を取得する場合、結果はブラウザのタイムゾーンに変換されます。

言い換えると: GMT（グリニッジ標準時）で日時が作成された場合、中央アメリカからブラウズされた場合、CDT（中央アメリカ夏時間）に変換されます。

JavaScript 短い日付

短い日付は「MM/DD/YYYY」の構文で書かれます:

const d = new Date("03/25/2015");

警告！

一部のブラウザでは、先頭にゼロのない月または日がエラーを引き起こす場合があります:

const d = new Date("2015-3-25");

“YYYY/MM/DD”の動作は未定義です。

一部のブラウザはフォーマットを推測しようとしますが、一部はNaNを返します。

const d = new Date("2015/03/25");

“DD-MM-YYYY”の動作も未定義です。

一部のブラウザはフォーマットを推測しようとしますが、一部はNaNを返します。

const d = new Date("25-03-2015");

JavaScript 長い日付

長い日付は通常、「MMM DD YYYY」の構文で書かれます:

const d = new Date("Mar 25 2015");

月と日はどちらの順序でも構いません:

const d = new Date("25 Mar 2015");

そして、月は全体で書くこともできます（January）、または略語（Jan）で書くこともできます:

const d = new Date("January 25 2015");

const d = new Date("Jan 25 2015");

コンマは無視されます。名前は大文字と小文字を区別しません:

const d = new Date("JANUARY, 25, 2015");

日付入力 – 日付の解析

有効な日付文字列がある場合、Date.parse()メソッドを使用してミリ秒に変換することができます。

Date.parse()は日付と1970年1月1日の間のミリ秒数を返します:

let msec = Date.parse("March 21, 2012");

その後、ミリ秒数を使用して日付オブジェクトに変換することができます:

let msec = Date.parse("March 21, 2012");
const d = new Date(msec);

例

const d = new Date();
const d = new Date("2022-03-25");

JavaScript Dateの出力

デフォルトでは、JavaScriptはブラウザのタイムゾーンを使用し、日付を完全なテキスト文字列として表示します:

Sat Jul 06 2024 14:43:20 GMT+0900 (GMT+09:00)

日付の表示方法については、後でこのチュートリアルで詳しく学びます。

日付オブジェクトの作成

Dateオブジェクトはnew Date()コンストラクタで作成されます。

新しい日付オブジェクトを作成する方法には9つの方法があります:

• new Date()
• new Date(日付文字列)
• new Date(年, 月)
• new Date(年, 月, 日)
• new Date(年, 月, 日, 時)
• new Date(年, 月, 日, 時, 分)
• new Date(年, 月, 日, 時, 分, 秒)
• new Date(年, 月, 日, 時, 分, 秒, ミリ秒)
• new Date(ミリ秒)

JavaScript new Date()

new Date()は現在の日付と時間で日付オブジェクトを作成します:

const d = new Date();

new Date(日付文字列)

new Date(日付文字列)は日付文字列から日付オブジェクトを作成します:

const d = new Date("October 13, 2014 11:13:00");
const d = new Date("2022-03-25");

new Date(年, 月, …)

new Date(年, 月, …)は指定した日付と時間で日付オブジェクトを作成します。

7つの数字は、順に年、月、日、時、分、秒、ミリ秒を指定します:

const d = new Date(2018, 11, 24, 10, 33, 30, 0);

例:

const d = new Date(2018, 15, 24, 10, 33, 30); // 2019年4月24日10時33分30秒

日数が最大を超えてもエラーにはなりませんが、オーバーフローは次の月に加えられます:

const d = new Date(2018, 5, 35, 10, 33, 30); // 2018年6月5日10時33分30秒

6, 5, 4, 3, 2の数字を使用する

6つの数字は、年、月、日、時、分、秒を指定します:

const d = new Date(2018, 11, 24, 10, 33, 30);

5つの数字は、年、月、日、時、分を指定します:

const d = new Date(2018, 11, 24, 10, 33);

4つの数字は、年、月、日、時を指定します:

const d = new Date(2018, 11, 24, 10);

3つの数字は、年、月、日を指定します:

const d = new Date(2018, 11, 24);

2つの数字は、年と月を指定します:

const d = new Date(2018, 11);

月を省略することはできません。パラメータが1つだけの場合は、ミリ秒として扱われます。

const d = new Date(2018); // 1970年1月1日00:00:02に当たるので、前世紀

前世紀

1桁または2桁の年は、19xxとして解釈されます:

const d = new Date(99, 11, 24); // 1999年12月24日
const d = new Date(9, 11, 24);  // 1909年12月24日

JavaScriptは日付をミリ秒で保存します

JavaScriptは、1970年1月1日以降のミリ秒数として日付を保存します。

ゼロ時間は1970年1月1日00:00:00 UTCです。

1日（24時間）は86,400,000ミリ秒です。

現在の時間は：1720244600521ミリ秒が1970年1月1日以降であるため、

new Date(ミリ秒)

new Date(ミリ秒)はミリ秒にゼロ時間を追加して新しい日付オブジェクトを作成します。

Examples:

01 January 1970 plus 100,000,000,000ミリ秒は:

const d = new Date(100000000000);

01 January 1970 minus 100,000,000,000ミリ秒は:

const d = new Date(-100000000000);

01 January 1970 plus 24時間は:

const d = new Date(24 * 60 * 60 * 1000);
// または
const d = new Date(86400000);

01 January 1970 plus 0ミリ秒は:

const d = new Date(0);

日付のメソッド

日付オブジェクトが作成されると、いくつかのメソッドを使用して操作することができます。

日付メソッドを使用して、日付オブジェクトの年、月、日、時、分、秒、ミリ秒をローカル時間またはUTC（協定世界時またはGMT）時間で取得および設定することができます。

日付メソッドとタイムゾーンについては、次の章で説明します。

日付の表示

JavaScriptは（デフォルトで）toString()メソッドを使用して日付を出力します。これは、タイムゾーンを含む日付の文字列表現です。フォーマットはECMAScript仕様で指定されています:

Sat Jul 06 2024 14:43:20 GMT+0900 (GMT+09:00)

HTMLで日付オブジェクトを表示すると、自動的にtoString()メソッドを使用して文字列に変換されます。

const d = new Date();
d.toString();

toDateString()メソッドは、日付をより読みやすい形式に変換します:

const d = new Date();
d.toDateString();

toUTCString()メソッドは、UTC標準を使用して日付を文字列に変換します:

const d = new Date();
d.toUTCString();

toISOString()メソッドは、ISO標準を使用して日付を文字列に変換します:

const d = new Date();
d.toISOString();

基本的な配列メソッド

Array length

length プロパティは配列の長さ（サイズ）を返します：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let size = fruits.length;

JavaScript Array toString()

toString() メソッドは、配列を（カンマで区切られた）文字列に変換します。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

結果:

Banana,Orange,Apple,Mango

JavaScript Array at()

ES2022 で導入された配列メソッド at()：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);

または、通常の配列のインデックス指定と同じです：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];

at() メソッドは、配列からインデックス指定された要素を返します。

at() メソッドは、[] と同じ結果を返します。

at() メソッドは、2022 年 3 月以降の全てのモダンブラウザでサポートされています：

Chrome 92, Edge 92, Firefox 90, Safari 15.4, Opera 78

注:

多くの言語では、[-1] のような負のインデックスを使ってオブジェクトや配列、文字列の末尾の要素にアクセスできますが、JavaScript ではできません。なぜなら、[] は配列やオブジェクトの両方に対して使われるためです。例えば、obj[-1] は key -1 の値を参照し、オブジェクトの最後のプロパティを参照するわけではありません。

この問題を解決するために、ES2022 で at() メソッドが導入されました。

JavaScript Array join()

join() メソッドは、すべての配列要素を指定したセパレータで連結します。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

結果:

Banana * Orange * Apple * Mango

Popping と Pushing

配列を操作する際に、要素の削除と追加は簡単です。

これがポップとプッシュです。

JavaScript Array pop()

pop() メソッドは、配列から最後の要素を削除します：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();

pop() メソッドは、取り除かれた値を返します：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.pop();

JavaScript Array push()

push() メソッドは、配列に新しい要素を追加します（末尾に）：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");

push() メソッドは、新しい配列の長さを返します：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.push("Kiwi");

Shifting Elements

シフトはポップと同等ですが、最初の要素ではなく最初の要素で動作します。

JavaScript Array shift()

shift() メソッドは、最初の配列要素を削除し、すべての他の要素のインデックスを下げます。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();

shift() メソッドは、削除された値を返します：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.shift();

JavaScript Array unshift()

unshift() メソッドは、新しい要素を配列の先頭に追加し、古い要素を後ろに移動します：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

unshift() メソッドは、新しい配列の長さを返します：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");

要素の変更

配列要素は、インデックス番号を使ってアクセスします：

配列のインデックスは 0 から始まります：

• [0] は最初の配列要素
• [1] は2番目
• [2] は3番目 …

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[0] = "Kiwi";

JavaScript Array length

length プロパティは新しい要素を配列に追加する簡単な方法を提供します：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";

JavaScript Array delete()

注意！

delete() を使うと、配列に未定義の「穴」ができます。

pop() や shift() を代わりに使用してください。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];

配列のマージ（連結）

プログラミング言語では、連結（concatenation）は文字列を末尾から連結することを意味します。

配列の連結は、配列を末尾から連結することを意味します。

JavaScript Array concat()

concat() メソッドは既存の配列をマージ（連結）して新しい配列を作成します：

（二つの配列をマージする例）

const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];

const myChildren = myGirls.concat(myBoys);

注：

concat() メソッドは既存の配列を変更しません。常に新しい配列を返します。

concat() メソッドは任意の数の配列引数を取ることができます。

（三つの配列をマージする例）

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
const arr3 = ["Robin", "Morgan"];
const myChildren = arr1.concat(arr2, arr3);

concat() メソッドは文字列を引数としても取ることができます：

（値を含む配列とマージする例）

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter");

JavaScript Array copyWithin()

copyWithin() メソッドは、配列の要素を他の位置にコピーします：

（0 から index 2 にすべての要素をコピーする例）

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);

（0 から 2 までの要素を index 2 にコピーする例）

const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
fruits.copyWithin(2, 0, 2);

注：

copyWithin() メソッドは既存の値を上書きします。

copyWithin() メソッドは配列に新しいアイテムを追加しません。

copyWithin() メソッドは配列の長さを変更しません。

配列のフラット化

フラット化（Flattening）は配列の次元を低くするプロセスです。

複数次元の配列を一次元の配列に変換する際に便利です。

JavaScript Array flat()

ES2019 で導入された flat() メソッド。

flat() メソッドは指定された深さまでのサブ配列要素を結合した新しい配列を作成します。

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

ブラウザサポート:

JavaScript Array flat() は、2020 年 1 月以降のすべてのモダンブラウザでサポートされています：

Chrome 69, Edge 79, Firefox 62, Safari 12, Opera 56

配列のスプライシングとスライシング

splice() メソッドは新しいアイテムを配列に追加します。

slice() メソッドは配列の一部を取り出します。

JavaScript Array splice()

splice() メソッドは新しいアイテムを配列に追加できます：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

第一パラメータ（2）は新しい要素が追加される位置を定義します。

第二パラメータ（0）は削除される要素の数を定義します。

残りのパラメータ（”Lemon”, “Kiwi”）は追加される新しい要素を定義します。

splice() メソッドは削除されたアイテムが入った配列を返します：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

要素を削除するために splice() を利用する例:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);

JavaScript Array toSpliced()

ES2023 で追加された Array toSpliced() メソッドは、元の配列を変更せずに新しい配列を作成する安全な splice() 方法です。

const months = ["Jan", "Feb", "Mar", "Apr"];
const spliced = months.toSpliced(0, 1);

JavaScript Array slice()

slice() メソッドは配列の一部を新しい配列に取り出します：

配列の要素 1 から取り出す例（”Orange” から）：

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);

注：

slice() メソッドは新しい配列を作成します。

slice() メソッドは元の配列から要素を削除しません。

配列の要素 3 から取り出す例（”Apple” から）：

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(3);

slice() メソッドは slice(1, 3) のように二つの引数を取ることができます。

メソッドは開始引数からの要素を選択し、終了引数まで（含まず）です。

引数が省略されると、最初の例のように、slice() メソッドは残りの配列を取り出します。

自動 toString()

プリミティブな値が期待される場合、JavaScript は自動的に配列をカンマ区切りの文字列に変換します。

これは、配列を出力しようとした場合に常に行われます。

次の二つの例は同じ結果を出力します：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;

注：

すべての JavaScript オブジェクトには toString() メソッドがあります。

配列は複数の値を保持できる特別な変数です：

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

なぜ配列を使用するのか？

アイテムのリスト（例えば、車の名前のリスト）がある場合、単一の変数で車を保持すると以下のようになります：

let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";

しかし、車をループして特定のものを見つけたり、3台ではなく300台の車がある場合はどうでしょうか？

その解決策が配列です！

配列は1つの名前で多くの値を保持でき、インデックス番号を使って値にアクセスできます。

配列の作成

配列リテラルを使用するのが最も簡単な方法です：

const array_name = [item1, item2, ...];      

通常、const キーワードで配列を宣言するのが一般的です。

例

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

スペースや改行は重要ではありません。宣言は複数行にまたがることができます：

例

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

また、配列を作成してから要素を追加することもできます：

例

const cars = [];
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";

JavaScript のキーワード new を使用する

以下の例は、Array も作成し、それに値を割り当てます：

例

const cars = new Array("Saab", "Volvo", "BMW");

上記の2つの例はまったく同じことを行います。

new Array() を使用する必要はありません。

シンプルで可読性があり、実行速度が速いので、配列リテラルの方法を使用するのが良いでしょう。

配列要素へのアクセス

インデックス番号を指定して配列要素にアクセスします：

const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];

配列要素の変更

次のステートメントは cars の最初の要素の値を変更します：

cars[0] = "Opel";

例

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

配列を文字列に変換する

JavaScript のメソッド toString() は配列を文字列に変換します（カンマで区切られた配列の値）。

例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();

結果：

Banana,Orange,Apple,Mango

全体の配列にアクセスする

JavaScript では、配列名を参照することで全体の配列にアクセスできます：

例

const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

配列はオブジェクトです

配列は特別なタイプのオブジェクトです。JavaScript の typeof 演算子は配列に対して “object” を返します。

しかし、JavaScript の配列は配列として最良に説明されます。

この例では、person[0] は John を返します：

配列：

const person = ["John", "Doe", 46];

オブジェクトは名前を使用してその “メンバー” にアクセスします。この例では、person.firstName は John を返します：

オブジェクト：

const person = {firstName:"John", lastName:"Doe", age:46};

配列要素はオブジェクトになることができます

JavaScript の変数はオブジェクトになることができます。配列は特別な種類のオブジェクトです。

そのため、同じ配列内に異なる型の変数を持たせることができます。

配列内にオブジェクトを持つことができます。関数を持つことができます。別の配列を持つことができます：

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

配列のプロパティとメソッド

JavaScript 配列の真の強みは組み込みの配列プロパティとメソッドにあります：

cars.length   // 要素の数を返す
cars.sort()   // 配列をソートする

配列メソッドについては次の章で説明します。

length プロパティ

配列の length プロパティは配列の長さ（配列要素の数）を返します。

例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;

length プロパティは常に最高の配列インデックスよりも 1 大きいです。

最初の配列要素へのアクセス

例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];

最後の配列要素へのアクセス

例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];

配列要素のループ処理

配列をループする方法の1つは、for ループを使用することです：

例

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "
";
for (let i = 0; i < fLen; i++) {
  text += "
" + fruits[i] + "
";
}
text += "
";

また、Array.forEach() 関数を使用することもできます：

例

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let text = "
";
fruits.forEach(myFunction);
text += "
";

function myFunction(value) {
  text += "
" + value + "
";
}

配列要素の追加

配列に新しい要素を追加する最も簡単な方法は push() メソッドを使用することです：

例

const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon");  // 新しい要素（Lemon）を fruits に追加

新しい要素は length プロパティを使用して配列に追加することもできます：

例

const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon";  // "Lemon" を fruits に追加

例

const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon";  // fruits に未定義の「穴」が作成されます

連想配列

多くのプログラミング言語は、名前付きインデックスを持つ配列をサポートしています。

名前付きインデックスを持つ配列は連想配列（またはハッシュ）と呼ばれます。

JavaScript は名前付きインデックスをサポートしません。

JavaScript の配列は常に番号付きインデックスを使用します。

例

const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;    // 3 を返します
person[0];        // "John" を返します

配列とオブジェクトの違い

JavaScript では、配列は番号付きインデックスを使用します。

JavaScript では、オブジェクトは名前付きインデックスを使用します。

配列は番号付きインデックスを使用する特別な種類のオブジェクトです。

いつ配列を使用するか、オブジェクトを使用するか

• JavaScript は連想配列をサポートしません。
• 要素名が文字列（テキスト）である場合はオブジェクトを使用します。
• 要素名が数値である場合は配列を使用します。

JavaScript new Array()

JavaScript には組み込みの配列コンストラクタ new Array() があります。

しかし、代わりに [] を安全に使用することができます。

これらの2つの異なるステートメントは両方とも名前が points の新しい空の配列を作成します：

例

const points = new Array();
const points = [];

これらの2つの異なるステートメントは両方とも6つの数字を含む新しい配列を作成します：

例

const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];

new キーワードは予期しない結果を生むことがあります：

// 要素が3つの配列を作成します：
const points = new Array(40, 100, 1);
// 要素が2つの配列を作成します：
const points = new Array(40, 100);
// 要素が1つの「配列」を作成します ???
const points = new Array(40);  

共通のエラー

次のステートメント：

const points = [40];

と次のステートメント：

const points = new Array(40);
// 要素が1つの「配列」を作成します：
const points = [40];
// 要素が40個の未定義の要素の配列を作成します：
const points = new Array(40);  

配列を認識する方法

よくある質問は「変数が配列かどうかをどうやって知るか？」です。

問題は、JavaScript の typeof 演算子が “object” を返すことです：

const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;

JavaScript の配列がオブジェクトであるために typeof 演算子は object を返します。

解決策 1:

この問題を解決するために ECMAScript 5（JavaScript 2009）では新しいメソッド Array.isArray() が定義されました：

Array.isArray(fruits);

解決策 2:

instanceof 演算子は、指定されたコンストラクタで作成されたオブジェクトであれば true を返します：

const fruits = ["Banana", "Orange", "Apple"];

(fruits instanceof Array);

ネストされた配列とオブジェクト

オブジェクト内の値は配列であり、配列内の値はオブジェクトであることがあります：

例

const myObj = {
  name: "John",
  age: 30,
  cars: [
    {name:"Ford", models:["Fiesta", "Focus", "Mustang"]},
    {name:"BMW", models:["320", "X3", "X5"]},
    {name:"Fiat", models:["500", "Panda"]}
  ]
}

配列内の配列にアクセスするには、各配列に対して for-in ループを使用します：

例

for (let i in myObj.cars) {
  x += "
" + myObj.cars[i].name + "
";
  for (let j in myObj.cars[i].models) {
    x += myObj.cars[i].models[j];
  }
}

以下のプロパティはすべて JavaScript の数値オブジェクトに属します：

JavaScript EPSILON

Number.EPSILON は 1 より大きい最小の浮動小数点数と 1 の差です。

例

let x = Number.EPSILON;

JavaScript MAX_VALUE

Number.MAX_VALUE は JavaScript で表現可能な最大の数を示す定数です。

例

let x = Number.MAX_VALUE;

数値プロパティは変数に対して使用できません。これらはすべて JavaScript の Number オブジェクトに属します。

変数 x.MAX_VALUE のように使用すると、undefined が返されます：

例

let x = 6;
x.MAX_VALUE

JavaScript MIN_VALUE

Number.MIN_VALUE は JavaScript で表現可能な最小の数を示す定数です。

例

let x = Number.MIN_VALUE;

JavaScript MAX_SAFE_INTEGER

Number.MAX_SAFE_INTEGER は JavaScript で表現可能な安全な最大整数です。

Number.MAX_SAFE_INTEGER は (253 – 1) です。

例

let x = Number.MAX_SAFE_INTEGER;

JavaScript MIN_SAFE_INTEGER

Number.MIN_SAFE_INTEGER は JavaScript で表現可能な安全な最小整数です。

Number.MIN_SAFE_INTEGER は -(253 – 1) です。

例

let x = Number.MIN_SAFE_INTEGER;

JavaScript POSITIVE_INFINITY

例

let x = Number.POSITIVE_INFINITY;

POSITIVE_INFINITY はオーバーフロー時に返されます：

let x = 1 / 0;

JavaScript NEGATIVE_INFINITY

例

let x = Number.NEGATIVE_INFINITY;

NEGATIVE_INFINITY はオーバーフロー時に返されます：

let x = -1 / 0;

JavaScript NaN – Not a Number

NaN は「数値でない」ことを示す JavaScript の予約語です。

例

let x = Number.NaN;

非数値の文字列で算術演算を試みると NaN (Not a Number) が返されます：

let x = 100 / "Apple";

これらの数値メソッドはすべての JavaScript 数値で使用できます：

toString() メソッド

toString() メソッドは数値を文字列として返します。

すべての数値メソッドは、リテラル、変数、または式のどれに対しても使用できます：

例

let x = 123;
x.toString();
(123).toString();
(100 + 23).toString();

toExponential() メソッド

toExponential() は数値を丸めて指数表記で返します。

パラメータで小数点以下の桁数を定義します：

例

let x = 9.656;
x.toExponential(2);
x.toExponential(4);
x.toExponential(6);

パラメータはオプションです。指定しない場合、JavaScript は数値を丸めません。

toFixed() メソッド

toFixed() は指定した小数点以下の桁数で数値を文字列として返します：

例

let x = 9.656;
x.toFixed(0);
x.toFixed(2);
x.toFixed(4);
x.toFixed(6);

toFixed(2) はお金の計算に最適です。

toPrecision() メソッド

toPrecision() は指定した桁数で数値を文字列として返します：

例

let x = 9.656;
x.toPrecision();
x.toPrecision(2);
x.toPrecision(4);
x.toPrecision(6);

valueOf() メソッド

valueOf() は数値を数値として返します。

例

let x = 123;
x.valueOf();
(123).valueOf();
(100 + 23).valueOf();

JavaScript では、数値はプリミティブ値（typeof = number）またはオブジェクト（typeof = object）として存在します。

valueOf() メソッドは、JavaScript 内部で Number オブジェクトをプリミティブ値に変換するために使用されます。

コード内で利用する必要はありません。

変数を数値に変換する方法

変数を数値に変換するために使用できる JavaScript のメソッドが3つあります：

Number() メソッド

Number() メソッドは JavaScript の変数を数値に変換するために使用できます：

例

Number(true);
Number(false);
Number("10");
Number("  10");
Number("10  ");
Number(" 10  ");
Number("10.33");
Number("10,33");
Number("10 33");
Number("John");

数値に変換できない場合、NaN（Not a Number）が返されます。

Date 上で使用される Number() メソッド

Number() は日付も数値に変換できます。

例

Number(new Date("1970-01-01"))

Note

Date() メソッドは1970年1月1日からのミリ秒数を返します。

1970-01-02 と 1970-01-01 の間のミリ秒数は 86400000 です：

例

Number(new Date("1970-01-02"))
Number(new Date("2017-09-30"))

parseInt() メソッド

parseInt() は文字列を解析し、整数を返します。スペースは許可されます。最初の数値のみが返されます：

例

parseInt("-10");
parseInt("-10.33");
parseInt("10");
parseInt("10.33");
parseInt("10 20 30");
parseInt("10 years");
parseInt("years 10");

数値に変換できない場合、NaN（Not a Number）が返されます。

parseFloat() メソッド

parseFloat() は文字列を解析し、数値を返します。スペースは許可されます。最初の数値のみが返されます：

例

parseFloat("10");
parseFloat("10.33");
parseFloat("10 20 30");
parseFloat("10 years");
parseFloat("years 10");

数値に変換できない場合、NaN（Not a Number）が返されます。

Number オブジェクトのメソッド

これらのオブジェクトメソッドは Number オブジェクトに属しています：

Number メソッドは変数で使用できません

上記の数値メソッドはすべて JavaScript の Number オブジェクトに属しています。

これらのメソッドは Number.isInteger() のようにアクセスする必要があります。

X.isInteger() のように変数 X を使用すると、エラーが発生します：

TypeError X.isInteger は関数ではありません。

Number.isInteger() メソッド

Number.isInteger() メソッドは引数が整数であれば true を返します。

例

Number.isInteger(10);
Number.isInteger(10.5);

Number.isSafeInteger() メソッド

安全な整数は倍精度数値として正確に表現できる整数です。

Number.isSafeInteger() メソッドは引数が安全な整数であれば true を返します。

例

Number.isSafeInteger(10);
Number.isSafeInteger(12345678901234567890);

安全な整数は -(253 – 1) から +(253 – 1) のすべての整数です。

これは安全です: 9007199254740991。これは安全ではありません: 9007199254740992。

Number.parseFloat() メソッド

Number.parseFloat() は文字列を解析し、数値を返します。

スペースは許可されます。最初の数値のみが返されます：

例

Number.parseFloat("10");
Number.parseFloat("10.33");
Number.parseFloat("10 20 30");
Number.parseFloat("10 years");
Number.parseFloat("years 10");

Note

Number メソッドの Number.parseInt() と Number.parseFloat()

は次のような

Global メソッド parseInt() と parseFloat() と同じです。

その目的はグローバルな機能のモジュール化です（同じ JavaScript コードをブラウザの外で使用しやすくするため）。

Number.parseInt() メソッド

Number.parseInt() は文字列を解析し、整数を返します。

スペースは許可されます。最初の数値のみが返されます：

例

Number.parseInt("-10");
Number.parseInt("-10.33");
Number.parseInt("10");
Number.parseInt("10.33");
Number.parseInt("10 20 30");
Number.parseInt("10 years");
Number.parseInt("years 10");

数値に変換できない場合、NaN（Not a Number）が返されます。

JavaScript の BigInt 変数は、通常の JavaScript 数値では表現できない大きな整数値を格納するために使用されます。

JavaScript 整数の精度

JavaScript の整数は最大で15桁まで正確です：

let x = 999999999999999;
let y = 9999999999999999;

JavaScript ではすべての数値が64ビット浮動小数点形式（IEEE 754 標準）で保存されます。

この標準により、大きな整数は正確に表現できず、四捨五入されます。

そのため、JavaScript は以下の範囲の整数を安全に表現できます：

• 9007199254740991（253-1）までの正の整数
• -9007199254740991（-253-1）までの負の整数

この範囲外の整数値は精度が失われます。

BigInt の作成方法

BigInt を作成するには、整数の末尾に n を追加するか、BigInt() を呼び出します：

例

let x = 9999999999999999;
let y = 9999999999999999n;
let a = 1234567890123456789012345n;
let b = BigInt(1234567890123456789012345);

BigInt: 新しい JavaScript データ型

JavaScript での BigInt の typeof は “bigint” です：

例

let x = BigInt(999999999999999);
let type = typeof x;

BigInt は JavaScript で数値データ型の2番目（Number の後）です。

BigInt を使うことで、JavaScript でサポートされるデータ型の合計数は8つになります：

1. String
2. Number
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object

BigInt 演算子

JavaScript の Number で使用できる演算子はすべて BigInt でも使用できます。

BigInt 乗算の例

let x = 9007199254740995n;
let y = 9007199254740995n;
let z = x * y;

符号なし右シフト（>>>) は BigInt ではできません（固定幅を持たないため）。

BigInt の小数点

BigInt には小数点がありません。

BigInt 除算の例

let x = 5n;
let y = x / 2;
// エラー: BigInt と他の型を混在させることはできません。明示的な変換を使用してください。
let x = 5n;
let y = Number(x) / 2;

BigInt の16進数、8進数、2進数

BigInt は16進数、8進数、または2進数表記で書くこともできます：

BigInt 16進数の例

let hex = 0x20000000000003n;
let oct = 0o400000000000000003n;
let bin = 0b100000000000000000000000000000000000000000000000000011n;

精度の興味深い点

四捨五入はプログラムのセキュリティを危険にさらすことがあります：

MAX_SAFE_INTEGER の例

9007199254740992 === 9007199254740993; // true !!!

ブラウザのサポート

BigInt は2020年9月以降、すべてのブラウザでサポートされています：

• Chrome 67
• Edge 79
• Firefox 68
• Safari 14
• Opera 54

（ブラウザのバージョンの始まりは異なります）

最小および最大の安全整数

ES6 では、Number オブジェクトに max および min プロパティが追加されました：

MAX_SAFE_INTEGER の例

let x = Number.MAX_SAFE_INTEGER;

MIN_SAFE_INTEGER の例

let x = Number.MIN_SAFE_INTEGER;

新しい数値メソッド

ES6 では、Number オブジェクトに 2つの新しいメソッドが追加されました：

The Number.isInteger() メソッド

Number.isInteger() メソッドは、引数が整数であれば true を返します。

Example: isInteger()

Number.isInteger(10);
Number.isInteger(10.5);

The Number.isSafeInteger() メソッド

安全な整数は、倍精度数値として正確に表現できる整数です。

Number.isSafeInteger() メソッドは、引数が安全な整数であれば true を返します。

Example: isSafeInteger()

Number.isSafeInteger(10);
Number.isSafeInteger(12345678901234567890);

安全な整数は、-(253 – 1) から +(253 – 1) までのすべての整数です。