JavaScript オブジェクト
現実世界のオブジェクト
現実世界では、オブジェクトとは家、車、人、動物などの物体のことです。
以下は車のオブジェクトの例です:
| オブジェクト | プロパティ | メソッド |
|---|---|---|
| 車 | car.name = Fiat car.model = 500 car.weight = 850kg car.color = white |
car.start() car.drive() car.brake() car.stop() |
目次
オブジェクトのプロパティ
現実世界の車には重量や色などのプロパティがあります:
car.name = Fiat, car.model = 500, car.weight = 850kg, car.color = white.
カー・オブジェクトも同じプロパティを持っていますが、その値は車ごとに異なります。
オブジェクトのメソッド
現実世界の車にはstartやstopといったメソッドがあります:
car.start(), car.drive(), car.brake(), car.stop().
カー・オブジェクトも同じメソッドを持っていますが、それらのメソッドは異なるタイミングで実行されます。
JavaScript変数
JavaScript変数はデータ値のコンテナです。
次のコードは、変数carに単純な値（Fiat）を割り当てます:
例
let car = "Fiat";
JavaScriptオブジェクト
オブジェクトも変数です。ただし、オブジェクトには多くの値を含めることができます。
次のコードは、オブジェクトcarに多くの値（Fiat、500、white）を割り当てます:
例
const car = {type:"Fiat", model:"500", color:"white"};
Note:
オブジェクトをconstキーワードで宣言するのは一般的な慣習です。constを使用したオブジェクトの詳細については、JS Constの章を参照してください。
JavaScriptオブジェクトの定義方法
オブジェクトリテラルを使用する
オブジェクトリテラルは波括弧{}の内部に名前と値のペアのリストです。
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
Note:
名前と値のペアはキーと値のペアとも呼ばれます。
オブジェクトリテラルはオブジェクト初期化子とも呼ばれます。
JavaScriptオブジェクトの作成
これらの例は、4つのプロパティを持つJavaScriptオブジェクトを作成します:
例
// オブジェクトを作成
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
スペースと改行は重要ではありません。オブジェクト初期化子は複数行にまたがることができます:
// オブジェクトを作成
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
この例では空のJavaScriptオブジェクトを作成し、その後に4つのプロパティを追加します:
// オブジェクトを作成
const person = {};
// プロパティを追加
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
newキーワードを使用する
この例では、new Object()を使用して新しいJavaScriptオブジェクトを作成し、その後に4つのプロパティを追加します:
例
// オブジェクトを作成
const person = new Object();
// プロパティを追加
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
Note:
上記の例はまったく同じ動作をしますが、new Object()を使用する必要はありません。
可読性、シンプリシティ、実行速度のために、オブジェクトリテラルメソッドを使用します。
オブジェクトのプロパティ
JavaScriptオブジェクト内の名前付き値はプロパティと呼ばれます。
| プロパティ | 値 |
|---|---|
| firstName | John |
| lastName | Doe |
| age | 50 |
| eyeColor | blue |
名前と値のペアはPHPの連想配列、Pythonの辞書、Cのハッシュテーブル、Javaのハッシュマップ、RubyとPerlのハッシュに似ています。
オブジェクトプロパティへのアクセス
オブジェクトプロパティには2つの方法でアクセスできます:
- objectName.propertyName
- objectName[“propertyName”]
例
person.lastName;
person["lastName"];
JavaScriptオブジェクトメソッド
メソッドとはオブジェクト上で実行できるアクションです。
メソッドは、プロパティ値として保存された関数定義です。
| プロパティ | 値 |
|---|---|
| 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プロパティを意味します。
JavaScriptでは、オブジェクトがキングです。
オブジェクトを理解すれば、JavaScriptを理解することができます。
オブジェクトはプロパティとメソッドのコンテナです。
- プロパティは名前付きの値です。
- メソッドはプロパティとして保存された関数です。
プロパティはプリミティブ値、関数、または他のオブジェクトであることができます。
JavaScriptでは、ほとんど「すべて」がオブジェクトです。
- オブジェクトはオブジェクトです。
- 数学はオブジェクトです。
- 関数はオブジェクトです。
- 日付はオブジェクトです。
- 配列はオブジェクトです。
- マップはオブジェクトです。
- セットはオブジェクトです。
プリミティブ値を除くすべてのJavaScriptの値はオブジェクトです。
JavaScriptのプリミティブ
プリミティブ値は、プロパティやメソッドを持たない値です。
3.14はプリミティブ値です。
プリミティブデータ型はプリミティブ値を持つデータです。
JavaScriptでは7種類のプリミティブデータ型が定義されています:
- string
- number
- boolean
- null
- undefined
- symbol
- bigint
不変性
プリミティブ値は不変です（ハードコードされており、変更することができません）。
x = 3.14の場合、xの値を変更することはできますが、3.14の値を変更することはできません。
| 値 | 型 | 詳細 |
|---|---|---|
| “Hello” | string | “Hello”は常に”Hello”です。 |
| 3.14 | number | 3.14は常に3.14です。 |
| true | boolean | trueは常にtrueです。 |
| false | boolean | falseは常にfalseです。 |
| null | null (object) | nullは常にnullです。 |
| undefined | undefined | undefinedは常にundefinedです。 |
JavaScriptオブジェクトは可変です
オブジェクトは可変です。参照によってアドレス指定され、値ではなく参照されます。
personがオブジェクトである場合、次のステートメントはpersonのコピーを作成しません:
const x = person;
xオブジェクトはpersonのコピーではありません。xオブジェクトはpersonそのものです。
xに対する変更は、personにも影響します:
例
// オブジェクトを作成
const person = {
firstName:"John",
lastName:"Doe",
age:50, eyeColor:"blue"
}
// コピーを作成
const x = person;
// 両方で年齢を変更
x.age = 10;
Note:
後の章でオブジェクトについてさらに詳しく学びます。