【JavaScript】オブジェクト（プロパティとメソッド） - モノや事柄を表現したデータ

JavaScriptのオブジェクトについて解説します。

検証環境

JavaScript -

macOS

14.1

オブジェクト

オブジェクトは“モノや事柄を表現したデータ”です。

一般的に『オブジェクト指向プログラミング』と呼ぶアプリケーションの設計思想で頻繁に使用します。

オブジェクト指向プログラミングは処理をモデル化し、複数のオブジェクトを組み合わせて１つのプログラムを構築する設計思想です。

この設計思想の理解には様々な開発の知識が必要なため説明は割愛します。

基本構文

{}

オブジェクトを生成する構文です。

オブジェクトも数値などと同様に変数に代入演算子で記憶できます。

サンプル

sample.js

___ih_hl_start
let data = {};
___ih_hl_end

console.log(typeof(data));
console.log(data);

Console

object
{}

１行目の{}がオブジェクトの生成です。

実行結果からオブジェクトはobject型であることが確認できます。

プロパティ

プロパティは“オブジェクトが所有する値（数値や文字列など）”です。

別名で『フィールド』や『属性』とも呼ぶことがあります。

初期化

オブジェクトの生成時にプロパティの初期値を定義できます。

基本構文

{
    プロパティ名１: プロパティ値１,
    プロパティ名２: プロパティ値２,
    プロパティ名３: プロパティ値３
    ...
}

プロパティはプロパティ名とプロパティ値をセットでプロパティ名: プロパティ値のようにコロン（:）で区切って記述します。

また、プロパティが複数存在する場合はカンマで区切ります。

サンプル

sample.js

___ih_hl_start
let person = {
    name: 'TANAKA',
    height: 175
};
___ih_hl_end

console.log(person);

Console

{name: 'TANAKA', height: 175}
  height: 175
  name: "TANAKA"

２〜３行目がプロパティの初期化です。

nameプロパティを'TANAKA'、heightプロパティを175で値を初期化しています。

値の取得

オブジェクトを介してプロパティの値を取得します。

基本構文

変数.プロパティ名

変数とプロパティ名をドット（.）で繋げて記述します。

サンプル

sample.js

let person = {
    name: 'TANAKA',
    height: 175
};

___ih_hl_start
console.log(person.name);
___ih_hl_end

Console

TANAKA

６行目がプロパティの値の取得です。

person変数に記憶したオブジェクトのnameプロパティの値を取得しています。

値の記憶

オブジェクトを介してプロパティの追加や値の更新を行います。

基本構文

変数.プロパティ名 = 値

変数とプロパティ名をドット（.）で繋げて記述し、代入演算子で値を記憶します。

既に同じプロパティ名が存在する場合は値を更新し、存在しない場合はプロパティを追加します。

サンプル

sample.js

let person = {
    name: 'TANAKA',
    height: 175
};

console.log(person);

___ih_hl_start
person.height = 180;
person.age = 24;
___ih_hl_end

console.log(person);

Console

{name: 'TANAKA', height: 175}
  age: 24
  height: 180
  name: "TANAKA"
{name: 'TANAKA', height: 180, age: 24}
  age: 24
  height: 180
  name: "TANAKA"

８〜９行目でプロパティ値の更新を行っています。

８行目はheightプロパティの値の更新、９行目はageプロパティの追加と値の記憶になっています。

プロパティ値の更新前後のconsole.logの出力を比較すると、２つのプロパティに変更があったことが確認できます。

メソッド

メソッドは“オブジェクトが所有する処理のまとまりのこと”です。

関数のように定義し、呼び出すことができます。

初期化

オブジェクトの生成時にメソッドを定義できます。

基本構文

{
    メソッド名１: function( 仮引数１, 仮引数２ ... ) {
        // 処理...
        return 値;
    },
    メソッド名２: function( 仮引数１, 仮引数２ ... ) {
        // 処理...
        return 値;
    }
    ...
}

メソッド名と処理をセットでコロン（:）で区切って記述します。

処理は無名関数の構文と同様で、複数のメソッドが存在する場合はカンマ（,）で区切ります。

サンプル

sample.js

let person = {
    
    ___ih_hl_start
    greeting: function() {
        console.log("Hello World!");
    },
    addition: function( a, b ) {
        let total = a + b;
        console.log( a + " + " + b + " = " + total);
    }
    ___ih_hl_end
    
};

console.log(person);

Console

{greeting: ƒ, addition: ƒ}
  addition: ƒ ( a, b )
  greeting: ƒ ()

３〜９行目がメソッドの初期化です。

greetingメソッドとadditionメソッドを定義しています。

メソッドの呼び出し

オブジェクトを介してメソッドを呼び出します。

基本構文

変数.メソッド名( 実引数１, 実引数２ ... )

変数とメソッド名をドット（.）で繋げ、関数と同様に丸括弧（()）と実引数を記述します。

サンプル

sample.js

let person = {
    
    greeting: function() {
        console.log("Hello World!");
    },
    addition: function( a, b ) {
        let total = a + b;
        console.log( a + " + " + b + " = " + total);
    }
    
};

___ih_hl_start
person.greeting();
person.addition(3, 8);
___ih_hl_end

Console

Hello World!
3 + 8 = 11

１３〜１４行目がメソッドの呼び出しです。

greetingメソッドとadditionメソッドを呼び出しており、実行結果から各処理が正常に実行されたことが確認できます。

メソッドの記憶

オブジェクトを介してメソッドを記憶します。

基本構文

変数.メソッド名 = function( 仮引数１, 仮引数２ ... ) {
    // 処理...
}

変数とメソッド名をドット（.）で繋げて記述し、で値を記憶します。

既に同じメソッド名が存在する場合は更新、存在しない場合は新しくメソッドを追加します。

サンプル

sample.js

let person = {
    
    greeting: function() {
        console.log("Hello World!");
    },
    addition: function( a, b ) {
        let total = a + b;
        console.log( a + " + " + b + " = " + total);
    }
    
};

___ih_hl_start
person.greeting = function() {
    console.log("Hey!");
}
___ih_hl_end

___ih_hl_start
person.subtraction = function( a, b ) {
    let result = a - b;
    console.log( a + " - " + b + " = " + result);
}
___ih_hl_end

person.greeting();
person.subtraction(3, 8);

Console

Hey!
3 - 8 = -5

１３〜１５行目でgreetingメソッドの更新、１７〜２０行目でsubtractionメソッドを追加しています。

実行結果から各メソッドが正常に実行できたことが確認できます。

応用

オブジェクトはプロパティやメソッドを組み合わせて、モノや事柄を表現します。

例えば次のオブジェクトは『人』を表現するオブジェクトです。

Sample

let person = {
    name: "TANAKA",
    age: 24,
    height: 175,
    greeting: function() {
        console.log("Hello World!");
    },
    addition: function( a, b ) {
        let total = a + b;
        console.log( a + " + " + b + " = " + total);
    }
};

console.log(person);
console.log(person.name);
person.greeting();

Console

{name: 'TANAKA', age: 24, height: 175, greeting: ƒ, addition: ƒ}
  addition: ƒ ( a, b )
  age: 24
  greeting: ƒ ()
  height: 175
  name: "TANAKA"
TANAKA
Hello World!

ドット記法とブラケット記法

プロパティにアクセス（値の追加・更新・取得）はドット記法とブラケット記法があります。

Sample

let person = {
    name: 'TANAKA',
    height: 175
};

___ih_hl_start
console.log(person.name);
___ih_hl_end

___ih_hl_start
console.log(person['name']);
___ih_hl_end

Console

TANAKA
TANAKA

６行目のperson.nameはドット記法です。

上記までで解説した記法で、オブジェクトとプロパティをドット（.）で繋げます。

８行目のperson['name']はブラケット記法です。

オブジェクトに['プロパティ名']の形式でプロパティにアクセスしています。

ブラケット記法は連想配列の記法に同様ですが、連想配列はobject型を使ってデータ構造を表現しています。

しかし、オブジェクトと連想配列は使用目的やデータの考え方が異なるため、一般的にはオブジェクトはドット記法、連想配列はブラケット記法でアクセスするように使い分けます。