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) までのすべての整数です。

JavaScript の数値型

JavaScript には一つの数値型しかありません。数値は小数点を伴うか伴わないかで書くことができます。

let x = 3.14;    // 小数点ありの数値
let y = 3;       // 小数点なしの数値

特大または特小の数値

科学的（指数）表記で特大または特小の数値を書くことができます：

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

JavaScript 数値は常に64ビット浮動小数点

他の多くのプログラミング言語とは異なり、JavaScript は整数、短整数、長整数、浮動小数点など、異なるタイプの数値を定義しません。

JavaScript の数値は常に国際的な IEEE 754 標準に従った倍精度浮動小数点数として保存されます。

このフォーマットでは、数値（分数）はビット 0 から 51 までに、指数はビット 52 から 62 までに、符号はビット 63 に保存されます：

整数の精度

整数（ピリオドや指数表記のない数値）は、15桁まで正確です。

let x = 999999999999999;   // x は 999999999999999 になります
let y = 9999999999999999;  // y は 10000000000000000 になります

浮動小数点の精度

浮動小数点演算は常に100%正確ではありません：

let x = 0.2 + 0.1;

上記の問題を解決するために、乗算と除算が役立ちます：

let x = (0.2 * 10 + 0.1 * 10) / 10;

数値と文字列の追加

数値を追加すると、結果は数値になります：

let x = 10;
let y = 20;
let z = x + y;

文字列を追加すると、結果は文字列の連結になります：

let x = "10";
let y = "20";
let z = x + y;

数値と文字列を追加すると、結果は文字列の連結になります：

let x = 10;
let y = "20";
let z = x + y;

文字列と数値を追加すると、結果は文字列の連結になります：

let x = "10";
let y = 20;
let z = x + y;

以下の結果が30になると期待するのは一般的な間違いです：

let x = 10;
let y = 20;
let z = "The result is: " + x + y;

以下の結果が102030になると期待するのは一般的な間違いです：

let x = 10;
let y = 20;
let z = "30";
let result = x + y + z;

JavaScript インタープリターは左から右に作業を行います。

最初に x と y が数値であるため、10 + 20 が追加されます。

次に z が文字列であるため、30 + “30” が連結されます。

数値文字列

JavaScript の文字列には数値の内容が含まれることがあります：

let x = 100;         // x は数値です
let y = "100";       // y は文字列です

JavaScript は、すべての数値演算において文字列を数値に変換しようとします：

これは動作します：

let x = "100";
let y = "10";
let z = x / y;

これも動作します：

let x = "100";
let y = "10";
let z = x * y;

そしてこれも動作します：

let x = "100";
let y = "10";
let z = x - y;

しかし、これは動作しません：

let x = "100";
let y = "10";
let z = x + y;

最後の例では JavaScript は + 演算子を使用して文字列を連結します。

NaN – Not a Number

NaN は JavaScript の予約語であり、数値が正当な数値ではないことを示します。

非数値の文字列で算術演算を試みると、NaN（Not a Number）になります：

let x = 100 / "Apple";

ただし、文字列が数値であれば、結果は数値になります：

let x = 100 / "10";

値が NaN であるかどうかを知るために、グローバル JavaScript 関数 isNaN() を使用できます：

let x = 100 / "Apple";
isNaN(x);

NaN に注意してください。NaN を数学的な操作で使用すると、結果も NaN になります：

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

または、NaN5 のような連結になる可能性があります：

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

NaN は数値です: typeof NaN は number を返します：

typeof NaN;

Infinity

Infinity（または -Infinity）は、JavaScript が最大の可能な数を超えて計算した場合に返す値です。

let myNumber = 2;
// 無限に実行
while (myNumber != Infinity) {
  myNumber = myNumber * myNumber;
}

0（ゼロ）での除算も Infinity を生成します：

let x =  2 / 0;
let y = -2 / 0;

Infinity は数値です: typeof Infinity は number を返します。

typeof Infinity;

16進数

JavaScript は、16進数で数値定数を解釈します。これには 0x が先行する必要があります。

let x = 0xFF;

0 の先頭にゼロを付けて数値を書くことは絶対にしません（例：07のように）。

一部の JavaScript のバージョンでは、先頭にゼロを付けることで 8進数として数値を解釈します。

デフォルトでは JavaScript は数値を 10進数の小数点表示として表示します。

ただし、toString() メソッドを使用して、2進数から36進数までの数値を出力することができます。

16進数は基数16です。10進数は基数10です。8進数は基数8です。2進数は基数2です。

let myNumber = 32;
myNumber.toString(32);
myNumber.toString(16);
myNumber.toString(12);
myNumber.toString(10);
myNumber.toString(8);
myNumber.toString(2);

JavaScript 数値をオブジェクトとして

通常、JavaScript の数値はリテラルから生成されるプリミティブ値です：

let x = 123;

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

let y = new Number(123);

例

let x = 123;
let y = new Number(123);

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

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

Number オブジェクトは予期しない結果を生じることがあります：

== 演算子を使用すると、x と y は等しいです：

let x = 500;
let y = new Number(500);

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

let x = 500;
let y = new Number(500);

(x==y) は true または false ですか？

let x = new Number(500);
let y = new Number(500);

(x===y) は true または false ですか？

let x = new Number(500);
let y = new Number(500);

2つの JavaScript オブジェクトを比較すると、常に false が返されます。

バックティックの構文

Template Strings は文字列を定義するために引用符（””）の代わりにバックティック（“）を使用します：

let text = `Hello World!`;

文字列内の引用符

Template Strings では、文字列内にシングルクォートやダブルクォートを両方使用することができます：

let text = `He's often called "Johnny"`;

複数行の文字列

Template Strings では、複数行の文字列を作成できます：

let text =
`The quick
brown fox
jumps over
the lazy dog`;

変数の挿入

Template Strings は変数や式を文字列に簡単に挿入する方法を提供します。

この方法は文字列補間と呼ばれます。

構文は以下の通りです：

${...}

変数の置換

Template Strings では、文字列内で変数を使用できます：

let firstName = "John";
let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`;

変数の実際の値で置き換える自動化は文字列補間と呼ばれます。

式の置換

Template Strings では、文字列内で式を使用できます：

let price = 10;
let VAT = 0.25;

let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

式の実際の値で置き換える自動化は文字列補間と呼ばれます。

HTML テンプレート

Template Strings を使用して、HTML テンプレートを簡単に生成することができます：

let header = "Template Strings";
let tags = ["template strings", "javascript", "es6"];

let html = `
${header}
`;
for (const x of tags) {
  html += `
${x}
`;
}

html += `
`;

ブラウザサポート

Template Strings は ES6 の機能（JavaScript 2015）です。

ES6 は以下の全てのモダンブラウザで完全にサポートされています（2017年6月以降）：

• Chrome 51
• Edge 15
• Firefox 54
• Safari 10
• Opera 38

文字列検索メソッド

String indexOf()

String lastIndexOf()

String search()

JavaScript String indexOf()

indexOf() メソッドは文字列内の指定された文字列の最初の出現位置（インデックス）を返します。見つからない場合は -1 を返します：

let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");

JavaScript String lastIndexOf()

lastIndexOf() メソッドは文字列内の指定されたテキストの最後の出現位置のインデックスを返します：

let text = "Please locate where 'locate' occurs!";
let index = text.lastIndexOf("locate");

indexOf() と lastIndexOf() は、テキストが見つからない場合はどちらも -1 を返します。

indexOf() と lastIndexOf() の違い

indexOf() と lastIndexOf() にはいくつかの違いがあります：

• search() メソッドは、開始位置を指定する二番目の引数を取れません。
• indexOf() メソッドは、強力な検索値（正規表現）を取ることができません。

JavaScript String search()

search() メソッドは文字列を検索し、その文字列（または正規表現）が見つかった位置を返します：

let text = "Please locate where 'locate' occurs!";
text.search("locate");

let text = "Please locate where 'locate' occurs!";
text.search(/locate/);

JavaScript String match()

match() メソッドは、文字列（または正規表現）に一致する結果を含む配列を返します：

let text = "The rain in SPAIN stays mainly in the plain";
text.match("ain");

let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/);

let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/g);

let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/gi);

JavaScript String matchAll()

matchAll() メソッドは、文字列（または正規表現）に一致する結果を含むイテレータを返します：

const iterator = text.matchAll("Cats");

パラメータが正規表現の場合、グローバルフラグ（g）が設定されている必要があります。そうでない場合は TypeError が発生します：

const iterator = text.matchAll(/Cats/g);

大文字小文字を区別しない検索を行いたい場合は、無視フラグ（i）を設定する必要があります：

const iterator = text.matchAll(/Cats/gi);

matchAll() は Internet Explorer では動作しません。

JavaScript String includes()

includes() メソッドは文字列が指定された値を含む場合に true を返します：

let text = "Hello world, welcome to the universe.";
text.includes("world");

指定された位置からの検索を開始することもできます：

let text = "Hello world, welcome to the universe.";
text.includes("world", 12);

includes() は Internet Explorer ではサポートされていません。

JavaScript String startsWith()

startsWith() メソッドは文字列が指定された値で始まる場合に true を返します：

let text = "Hello world, welcome to the universe.";
text.startsWith("Hello");

let text = "Hello world, welcome to the universe.";
text.startsWith("world");

開始位置を指定することもできます：

let text = "Hello world, welcome to the universe.";
text.startsWith("world", 5);

let text = "Hello world, welcome to the universe.";
text.startsWith("world", 6);

startsWith() は Internet Explorer ではサポートされていません。

JavaScript String endsWith()

endsWith() メソッドは文字列が指定された値で終わる場合に true を返します：

let text = "John Doe";
text.endsWith("Doe");

開始位置を指定することもできます：

let text = "Hello world, welcome to the universe.";
text.endsWith("world", 11);

endsWith() は Internet Explorer ではサポートされていません。