JavaScript には一つの数値型しかありません。数値は小数点を伴うか伴わないかで書くことができます。
let x = 3.14; // 小数点ありの数値
let y = 3; // 小数点なしの数値
科学的（指数）表記で特大または特小の数値を書くことができます：
let x = 123e5; // 12300000
let y = 123e-5; // 0.00123
他の多くのプログラミング言語とは異なり、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;
注意: JavaScript は + 演算子を追加と連結の両方に使用します。
数値を追加すると、結果は数値になります：
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 は 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）は、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;
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 の数値はリテラルから生成されるプリミティブ値です：
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)}`;
式の実際の値で置き換える自動化は文字列補間と呼ばれます。
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月以降）：
注意: Template Strings は Internet Explorer ではサポートされていません。
String indexOf()
String lastIndexOf()
String search()
JavaScript String indexOf()indexOf() メソッドは文字列内の指定された文字列の最初の出現位置（インデックス）を返します。見つからない場合は -1 を返します：
let text = "Please locate where 'locate' occurs!";
let index = text.indexOf("locate");
JavaScript はゼロから位置をカウントします。
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/);
注意: indexOf() と search() は引数として同じ値を受け取り、同じ値を返しますが、動作は異なります。
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);
ヒント: 正規表現に g フラグ（グローバル検索）が含まれていない場合、match() は文字列内の最初の一致のみを返します。
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() は ES2020 の機能です。
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() は大文字小文字を区別します。
重要: includes() は ES6 の機能です。
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() は ES6 の機能です。
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() は ES6 の機能です。
endsWith() は Internet Explorer ではサポートされていません。
基本的な文字列メソッドについて説明します。JavaScriptの文字列はプリミティブであり、イミュータブルです。すべての文字列メソッドは元の文字列を変更せず、新しい文字列を生成します。
lengthプロパティは文字列の長さを返します：
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;
文字を抽出するための4つのメソッドがあります：
at() メソッドcharAt() メソッドcharCodeAt() メソッド[]charAt() メソッドcharAt() メソッドは指定したインデックス（位置）の文字を返します：
let text = "HELLO WORLD";
let char = text.charAt(0);
charCodeAt() メソッドcharCodeAt() メソッドは指定したインデックスの文字のUTF-16コードを返します：
let text = "HELLO WORLD";
let char = text.charCodeAt(0);
at() メソッドES2022で追加されたat() メソッドの使用例：
const name = "W3Schools";
let letter = name.at(2);
at() メソッドは指定したインデックス（位置）の文字を返します。
ヒント: at() メソッドは2022年3月以降のすべての現代ブラウザでサポートされています。
[]例：
let text = "HELLO WORLD";
let char = text[0];
プロパティアクセスは予測可能性が少し低い場合があります：
[] はundefined を返し、charAt() は空の文字列を返します。str[0] = "A" はエラーを発生させませんが、機能しません！文字列の一部を抽出するための3つのメソッドがあります：
slice(start, end)substring(start, end)substr(start, length)slice() メソッドslice() メソッドは文字列の一部を抽出して新しい文字列として返します：
let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13);
ヒント: マイナスのパラメータを使用すると、文字列の末尾からの位置を指定できます。
substring() メソッドsubstring() メソッドもslice() と似ていますが、負の値が指定された場合は0として扱います：
let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);
substr() メソッドsubstr() メソッドはslice() と似ていますが、2番目のパラメータは抽出する部分の長さを指定します：
let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);
大文字に変換するには toUpperCase() メソッドを使用します：
let text1 = "Hello World!";
let text2 = text1.toUpperCase();
小文字に変換するには toLowerCase() メソッドを使用します：
let text1 = "Hello World!";
let text2 = text1.toLowerCase();
concat() メソッドは2つ以上の文字列を結合します：
let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);
concat() メソッドはプラス演算子の代わりに使用することもできます。
trim() メソッドは文字列の両端から空白を削除します：
let text1 = " Hello World! ";
let text2 = text1.trim();
trimStart() メソッドは文字列の先頭からの空白を削除します：
let text1 = " Hello World! ";
let text2 = text1.trimStart();
ヒント: trimStart() メソッドは2020年1月以降のすべての現代ブラウザでサポートされています。
trimEnd() メソッドは文字列の末尾からの空白を削除します：
let text1 = " Hello World! ";
let text2 = text1.trimEnd();
ヒント: trimEnd() メソッドは2020年1月以降のすべての現代ブラウザでサポートされています。
ECMAScript 2017には、文字列の先頭および末尾にパディングするためのpadStart() および padEnd() という2つの新しい文字列メソッドが追加されました。
padStart() メソッドpadStart() メソッドは文字列の先頭からパディングします。
let text = "5";
let padded = text.padStart(4, "0");
ヒント: padStart() メソッドは2017年9月以降のすべての現代ブラウザでサポートされています。
padEnd() メソッドpadEnd() メソッドは文字列の末尾からパディングします。
let text = "5";
let padded = text.padEnd(4, "0");
ヒント: padEnd() メソッドは2017年9月以降のすべての現代ブラウザでサポートされています。
repeat() メソッドは指定された回数分、文字列を繰り返して新しい文字列を返します。
let text = "Hello world!";
let result = text.repeat(2);
ヒント: repeat() メソッドは2017年6月以降のすべての現代ブラウザでサポートされています。
replace() メソッドは文字列内の指定された値を別の値に置換します。
let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");
ヒント: replace() メソッドは最初の一致のみを置換します。すべての一致を置換するには正規表現と /g フラグを使用します。
JavaScript 2021では、replaceAll() メソッドが導入されました：
text = text.replaceAll("Cats", "Dogs");
replaceAll() メソッドは正規表現を指定できますが、グローバルフラグ（g）が必要です。さもなければ TypeError がスローされます。
文字列を配列として扱うには、split() メソッドを使用します：
text.split(",") // カンマで分割
text.split(" ") // スペースで分割
text.split("|") // パイプで分割
区切り文字が省略された場合、戻り値の配列には文字列全体がインデックス [0] に含まれます。
text.split("")
文字列はテキストを格納するために使います。
文字列は引用符で囲まれて書かれます。
JavaScriptの文字列は、引用符内に0文字以上の文字が入ります。
let text = "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"';
テンプレート文字列はES6（JavaScript 2016）で導入されました。
テンプレート文字列はバッククォートで囲まれた文字列です（This is a template string）。
テンプレート文字列では、シングルクォートやダブルクォートを文字列内に含めることができます。
let text = `He's often called "Johnny"`;
テンプレート文字列はInternet Explorerではサポートされていません。
文字列の長さを取得するには、組み込みのlengthプロパティを使用します。
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;
JavaScriptでは文字列は引用符で囲まれる必要があるため、以下のような文字列は誤解されます：
let text = "We are the so-called "Vikings" from the north.";
この問題を解決するには、バックスラッシュのエスケープ文字を使用します。
バックスラッシュのエスケープ文字（\）は特殊文字を文字列として扱います：
| コード | 結果 | 説明 |
|---|---|---|
\' |
‘ | シングルクォート |
\" |
“ | ダブルクォート |
\\ |
\ | バックスラッシュ |
let text = "We are the so-called \"Vikings\" from the north.";
let text = 'It\'s alright.';
let text = "The character \\ is called backslash.";
他にもJavaScriptでは6つのエスケープシーケンスが有効です：
| コード | 結果 |
|---|---|
\b |
バックスペース |
\f |
フォームフィード |
\n |
改行 |
\r |
キャリッジリターン |
\t |
水平タブ |
\v |
垂直タブ |
これらの6つのエスケープ文字は、タイプライターやテレタイプ、ファクス機の制御に使用されましたが、HTMLでは意味をなしません。
可読性のために、プログラマーはしばしば長いコード行を避けたいと考えます。
ステートメントを分割する安全な方法は、演算子の後で行うことです：
document.getElementById("demo").innerHTML =
"Hello Dolly!";
文字列を分割する安全な方法は、文字列の追加を使用することです：
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
テンプレート文字列はES6（JavaScript 2016）で導入されました。
テンプレート文字列はバッククォートで囲まれた文字列です（This is a template string）。
テンプレート文字列は複数行の文字列を許可します：
let text =
`The quick
brown fox
jumps over
the lazy dog`;
テンプレート文字列はInternet Explorerではサポートされていません。
通常、JavaScriptの文字列はリテラルから作成される原始値です：
let x = "John";
しかし、文字列はキーワードnewを使ってオブジェクトとしても定義できます：
let y = new String("John");
let x = "John";
let y = new String("John");
文字列オブジェクトを作成しないでください。
newキーワードはコードを複雑にし、実行速度を遅くします。
文字列オブジェクトは予期しない結果を生むことがあります：
==演算子を使用すると、xとyは等しいです：
let x = "John";
let y = new String("John");
しかし、===演算子を使用すると、xとyは等しくありません：
let x = "John";
let y = new String("John");
（x==y）はtrueでしょうか？ falseでしょうか？
let x = new String("John");
let y = new String("John");
（x===y）はtrueでしょうか？ falseでしょうか？
let x = new String("John");
let y = new String("John");
答えはfalseです。2つのJavaScriptオブジェクトを比較すると常にfalseが返されます。
HTMLイベントは、HTML要素に起こる「出来事」です。
HTMLページでJavaScriptを使用すると、JavaScriptはこれらのイベントに「反応」することができます。
HTMLイベントは、ブラウザが行うこともありますし、ユーザーが行うこともあります。
以下はHTMLイベントの例です:
イベントが発生すると、何かしらの動作を行いたい場合があります。
JavaScriptを使うと、イベントが検出されたときにコードを実行することができます。
HTMLでは、JavaScriptコードを含むイベントハンドラ属性をHTML要素に追加することができます。
シングルクォートを使用:
<element event='some JavaScript'>ダブルクォートを使用:
<element event="some JavaScript">次の例では、onclick属性（コード付き）が<button>要素に追加されています:
<button onclick="document.getElementById('demo').innerHTML = Date()">現在時刻は？</button>上記の例では、JavaScriptコードがid=”demo”の要素の内容を変更しています。
次の例では、コードが自分自身の要素の内容を変更しています（this.innerHTMLを使用）:
<button onclick="this.innerHTML = Date()">現在時刻は？</button>JavaScriptコードはしばしば複数行にわたります。イベント属性で関数を呼び出すのが一般的です:
<button onclick="displayDate()">現在時刻は？</button>以下は一般的なHTMLイベントの一部です:
| イベント | 説明 |
|---|---|
| onchange | HTML要素が変更されたとき |
| onclick | ユーザーがHTML要素をクリックしたとき |
| onmouseover | ユーザーがHTML要素にマウスを乗せたとき |
| onmouseout | ユーザーがHTML要素からマウスを離したとき |
| onkeydown | ユーザーがキーボードのキーを押したとき |
| onload | ブラウザがページの読み込みを完了したとき |
このリストはさらに長くなります: W3Schools JavaScript Reference HTML DOM Events。
イベントハンドラは、ユーザーの入力やブラウザのアクションを処理し、検証するために使用することができます:
多くの異なる方法が存在し、JavaScriptをイベントと連携させるために使用できます:
オブジェクトコンストラクタ関数
同じタイプの多くのオブジェクトを作成する必要がある場合があります。
オブジェクトタイプを作成するには、オブジェクトコンストラクタ関数を使用します。
オブジェクトコンストラクタ関数は、通常、最初の文字を大文字にして命名するのが良いとされています。
// Personオブジェクトコンストラクタ関数の定義
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
注意:
コンストラクタ関数内では、thisには値がありません。
新しいオブジェクトが作成されるとき、thisの値はその新しいオブジェクトになります。
これで、new Person()を使用して多くの新しいPersonオブジェクトを作成できます:
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
const mySister = new Person("Anna", "Rally", 18, "green");
const mySelf = new Person("Johnny", "Rally", 22, "green");
プロパティに与えられた値は、コンストラクタによって作成されたすべてのオブジェクトのデフォルト値になります:
// Personオブジェクトコンストラクタ関数の定義
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
作成済みのオブジェクトにプロパティを追加するのは簡単です:
myFather.nationality = "English";
注意:
新しいプロパティはmyFatherに追加されますが、他のPersonオブジェクトには追加されません。
オブジェクトコンストラクタに新しいプロパティを追加することはできません:
Person.nationality = "English";
新しいプロパティを追加するには、コンストラクタ関数のprototypeに追加する必要があります:
Person.prototype.nationality = "English";
コンストラクタ関数にはメソッドを追加することもできます:
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.fullName = function() {
return this.firstName + " " + this.lastName;
};
}
作成済みのオブジェクトにメソッドを追加するのは簡単です:
myMother.changeName = function (name) {
this.lastName = name;
}
注意:
新しいメソッドはmyMotherに追加されますが、他のPersonオブジェクトには追加されません。
オブジェクトコンストラクタ関数に新しいメソッドを追加することはできません。
このコードはTypeErrorを発生させます:
Person.changeName = function (name) {
this.lastName = name;
}
myMother.changeName("Doe");
// TypeError: myMother.changeName is not a function
新しいメソッドを追加するには、コンストラクタ関数のprototypeに行う必要があります:
Person.prototype.changeName = function (name) {
this.lastName = name;
}
myMother.changeName("Doe");
注意:
changeName()関数は名前の値をmyMotherのlastNameプロパティに割り当てます。thisはmyMotherで置換されます。
JavaScriptにはすべてのネイティブオブジェクトの組み込みコンストラクタがあります:
new Object() // 新しいObjectオブジェクト
new Array() // 新しいArrayオブジェクト
new Map() // 新しいMapオブジェクト
new Set() // 新しいSetオブジェクト
new Date() // 新しいDateオブジェクト
new RegExp() // 新しいRegExpオブジェクト
new Function() // 新しいFunctionオブジェクト
注意:
Math()オブジェクトはリストに含まれていません。Mathはグローバルオブジェクトです。Mathにはnewキーワードを使用することはできません。
new Object()の代わりにオブジェクトリテラル{}を使用します。
new Array()の代わりに配列リテラル[]を使用します。
new RegExp()の代わりにパターンリテラル/()/を使用します。
new Function()の代わりに関数式() {}を使用します。
""; // プリミティブ文字列
0; // プリミティブ数値
false; // プリミティブブール値
{}; // オブジェクトオブジェクト
[]; // 配列オブジェクト
/()/ // 正規表現オブジェクト
function(){}; // 関数
JavaScriptオブジェクトを表示する方法はいくつかあります。
JavaScriptオブジェクトを表示すると、[object Object]という出力が表示されます。
// オブジェクトを作成
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
JavaScriptオブジェクトを表示するためのいくつかの解決策は次の通りです:
オブジェクトのプロパティは文字列として表示できます:
// オブジェクトを作成
const person = {
name: "John",
age: 30,
city: "New York"
};
// プロパティを表示
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
オブジェクトのプロパティはループで集めることができます:
// オブジェクトを作成
const person = {
name: "John",
age: 30,
city: "New York"
};
// テキストを構築
let text = "";
for (let x in person) {
text += person[x] + " ";
};
// テキストを表示
document.getElementById("demo").innerHTML = text;
注意:
ループ内ではperson[x]を使用する必要があります。
person.xは動作しません（xはループ変数です）。
Object.values()はプロパティの値から配列を作成します:
// オブジェクトを作成
const person = {
name: "John",
age: 30,
city: "New York"
};
// 配列を作成
const myArray = Object.values(person);
// 配列を表示
document.getElementById("demo").innerHTML = myArray;
Object.entries()はループでオブジェクトを使用することを簡単にします:
const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "
";
}
JavaScriptオブジェクトは、JSONメソッドJSON.stringify()を使用して文字列に変換できます。
JSON.stringify()はJavaScriptに含まれ、すべての主要ブラウザでサポートされています。
注意:
結果はJSON表記で書かれた文字列になります:
{"name":"John","age":50,"city":"New York"}
// オブジェクトを作成
const person = {
name: "John",
age: 30,
city: "New York"
};
// オブジェクトを文字列に変換
let myString = JSON.stringify(person);
// 文字列を表示
document.getElementById("demo").innerHTML = myString;
オブジェクトメソッドはオブジェクト上で実行できるアクションです。
メソッドはプロパティ値として格納された関数定義です。
| プロパティ | 値 |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
| fullName | function() {return this.firstName + ” ” + this.lastName;} |
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プロパティを意味します。オブジェクトメソッドには次の構文でアクセスします:
objectName.methodName()
fullNameプロパティを()付きで呼び出すと、関数として実行されます:
name = person.fullName();
fullNameプロパティを()なしでアクセスすると、関数定義が返されます:
name = person.fullName;
オブジェクトに新しいメソッドを追加するのは簡単です:
person.name = function () {
return this.firstName + " " + this.lastName;
};
この例では、JavaScriptのtoUpperCase()メソッドを使用してテキストを大文字に変換しています:
person.name = function () {
return (this.firstName + " " + this.lastName).toUpperCase();
};
オブジェクトはプロパティの無順なコレクションです。
プロパティはJavaScriptオブジェクトの最も重要な部分です。
プロパティは変更、追加、削除が可能であり、一部は読み取り専用です。
オブジェクトのプロパティにアクセスするための構文は次の通りです:
// objectName.property
let age = person.age;
// objectName["property"]
let age = person["age"];
// objectName[expression]
let age = person[x];
person.firstname + "は" + person.age + "歳です。";
person["firstname"] + "は" + person["age"] + "歳です。";
person["firstname"] + "は" + person["age"] + "歳です。";
既存のオブジェクトに新しいプロパティを追加するには、単にその値を与えます:
person.nationality = "English";
deleteキーワードはオブジェクトからプロパティを削除します:
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
delete person.age;
または
delete person["age"];
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
delete person["age"];
Note:
deleteキーワードはプロパティの値とそのプロパティ自体を削除します。
削除後、プロパティは再度追加されるまで使用できません。
オブジェクト内のプロパティ値は他のオブジェクトにすることができます:
myObj = {
name:"John",
age:30,
myCars: {
car1:"Ford",
car2:"BMW",
car3:"Fiat"
}
}
ドット表記またはブラケット表記を使用してネストされたオブジェクトにアクセスできます:
myObj.myCars.car2;
myObj.myCars["car2"];
myObj["myCars"]["car2"];
let p1 = "myCars";
let p2 = "car2";
myObj[p1][p2];