TOC

JavaScriptのオブジェクトを理解する

前書き

JavaScriptのobjectは、namesまたはkeysとvaluesのコレクションで構成されるdata typeであり、name:value pairsで表されます。 name：valueのペアは、文字列、数値、ブール値など、任意のデータ型を含む可能性のあるpropertiesと、オブジェクト内に含まれる関数であるmethodsで構成できます。

JavaScriptのオブジェクトは、実際のオブジェクトに例えることができるスタンドアロンのエンティティです。 たとえば、本は、タイトル、著者、ページ数、およびジャンルで説明するオブジェクトです。 同様に、車は色、メーカー、モデル、馬力で説明するオブジェクトです。 JavaScriptarraysもオブジェクトの一種です。

オブジェクトは、ほとんどのJavaScriptプログラムの不可欠で基本的な側面です。 たとえば、ユーザーアカウントオブジェクトには、ユーザー名、パスワード、電子メールアドレスなどのデータが含まれる場合があります。 別の一般的な使用例は、名前、価格、出荷情報の重量など、各アイテムのすべての関連情報を含む多数のオブジェクトで構成されるWebショッピングプラットフォームのショッピングカートです。 To Doリストは、オブジェクトで構成される可能性のあるもう1つの一般的なアプリケーションです。

このチュートリアルでは、オブジェクトの作成方法、オブジェクトのプロパティとメソッドとは何か、オブジェクトのプロパティにアクセス、追加、削除、変更、ループする方法を確認します。

オブジェクトを作成する

数値または文字列もデータ型であるのと同様に、オブジェクトはJavaScript data typeです。 データ型として、オブジェクトを変数に含めることができます。

JavaScriptでオブジェクトを作成するには、2つの方法があります。

  • 中括弧を使用するobject literal：{}

  • newキーワードを使用するobject constructor

デモンストレーションの目的で両方のメソッドを使用して、空のオブジェクトの例を作成できます。

まず、オブジェクトリテラル。 

// Initialize object literal with curly brackets
const objectLiteral = {};

オブジェクトリテラルは、中括弧でオブジェクトを初期化します。

次の例では、オブジェクトコンストラクターを使用します。 

// Initialize object constructor with new Object
const objectConstructor = new Object();

同じデータが、new Object()で初期化されるオブジェクトコンストラクターメソッドを使用して作成されました。

これらのアプローチは両方とも空のオブジェクトを作成します。 オブジェクトリテラルの使用は、不整合や予期しない結果の可能性が少ないため、より一般的で推奨される方法です。

変数gimliに含まれるサンプルオブジェクトを作成して、文字を記述することができます。 

// Initialize gimli object
const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "axe",
    greet: function() {
        return `Hi, my name is ${this.name}!`;
    },
};

新しいオブジェクトはgimliで、これには3つのプロパティがあります。 各プロパティは、key:valueペアとも呼ばれるname:valueペアで構成されます。 weaponはプロパティ名の1つであり、文字列であるプロパティ値"axe"にリンクされています。 これには1つのメソッドがあり、メソッド名はgreetで、メソッド値は関数の内容で構成されます。

greet内で、thisキーワードに気付くかもしれません。 オブジェクト内でthisを使用する場合、現在のオブジェクト、この場合はgimliを参照します。

gimliをコンソールに送信すると、オブジェクト全体が出力されます。 

gimli;
Output{name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}

この出力は、使用しているコンソールによって異なるレンダリングになる場合がありますが、オブジェクトに渡されたすべての値が出力に表示されることに注意してください。

次に、JavaScriptオブジェクトのプロパティとメソッドを確認します。

プロパティとメソッド

オブジェクトはpropertiesとmethodsを持つことができます。

プロパティは、オブジェクト内の名前（キー）と値の間の関連付けであり、任意のデータ型を含めることができます。 通常、プロパティはオブジェクトの特性を指します。

メソッドとは、オブジェクトプロパティの値である関数であり、オブジェクトが実行できるタスクです。

オブジェクトのプロパティとメソッドの違いを覚える簡単な方法は、プロパティを名詞、メソッドを動詞と考えることです。 name、race、およびweaponはすべてオブジェクトに関連付けられた名詞であり、プロパティです。 fight()またはtalk()は、メソッド関数定義として使用される可能性のある動詞です。

オブジェクトプロパティへのアクセス

オブジェクトのプロパティにアクセスするには2つの方法があります。

  • ドット表記：.

  • ブラケット表記：[]

元のサンプルオブジェクトgimliをもう一度見てみましょう。 

const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "axe",
    greet: function() {
        return `Hi, my name is ${this.name}!`;
    },
};

weaponのプロパティ値を取得する場合は、オブジェクトの変数名に続けてドット（.）とプロパティまたはメソッド名を入力することにより、オブジェクトのドット表記で取得できます。 

// Retrieve the value of the weapon property
gimli.weapon;
Output"axe"

gimli.weaponは、"axe"であるプロパティ値を出力します。 オブジェクトブラケット表記を使用して同じデータを取得することもできます。 index and access a stringと同様に、角かっこ表記の構文は、プロパティ名を囲む2つの角かっこ（[]）です。 

// Retrieve the value of the weapon property
gimli["weapon"];
Output"axe"

ドット表記とブラケット表記の両方が定期的に使用されます。 ドット表記は高速で読みやすいですが、制限があります。 ブラケット表記法により、変数に格納されているプロパティ名にアクセスできます。オブジェクトのプロパティに特殊文字が含まれている場合は、使用する必要があります。

オブジェクトメソッドを取得するには、オブジェクト変数にアタッチされている通常の関数を呼び出すのとほぼ同じ方法で呼び出します。 

gimli.greet();
Output"Hi, my name is Gimli!"

上記の例では、オブジェクトメソッドgreet()の文字列値が返されることがわかります。

名前と値のペアを追加するか、既存のペアを変更して、オブジェクトのプロパティを変更することができます。

オブジェクトプロパティの追加と変更

オブジェクトに新しいプロパティを追加するには、代入演算子（=）を使用してプロパティに新しい値を割り当てます。

たとえば、数値データ型を新しいageプロパティとしてgimliオブジェクトに追加できます。 ドット表記とブラケット表記の両方を使用して、新しいオブジェクトプロパティを追加できます。 

// Add new age property to gimli
gimli.age = 139;
// Add new age property to gimli
gimli["age"] = 139;

上記のように、ドット表記またはブラケット表記のいずれかを使用して、その値にアクセスできます。 

gimli.age;
Output139

同じプロセスを使用して、オブジェクトにメソッドを追加することもできます。 

// Add new fight method to gimli
gimli.fight = function() {
    return `Gimli attacks with an ${this.weapon}.`;
}

この新しいオブジェクトメソッドを作成したら、上記のように呼び出すことができます。 

gimli.fight();
Output"Gimli attacks with an axe."

同じ方法を使用して、既存のプロパティに新しい値を割り当てることにより、オブジェクトのプロパティを変更できます。 

// Update weapon from axe to battle axe
gimli.weapon = "battle axe";

この時点で、オブジェクトを呼び出すと、追加と変更がすべて表示されます。 

gimli;
Output{name: "Gimli", race: "dwarf", weapon: "battle axe", age: 139, greet: ƒ, fight: ƒ}

割り当て操作により、JavaScriptオブジェクトのプロパティとメソッドを変更できます。

オブジェクトプロパティの削除

オブジェクトからプロパティを削除するには、deleteキーワードを使用します。 deleteは、オブジェクトからプロパティを削除する演算子です。

以下の例では、deleteを使用してgimliからweaponプロパティを削除します。 

// Remove weapon from gimli
delete gimli.weapon;
Outputtrue

delete操作は、プロパティが正常に削除された場合、または存在しないプロパティで使用された場合、trueとして評価されます。

gimliの出力をテストして、成功したかどうかを確認できます。 

gimli;
Output{name: "Gimli", race: "dwarf", age: 139, greet: ƒ, fight: ƒ}

上記の出力では、weaponの名前とそれに関連付けられた値は使用できなくなり、プロパティが正常に削除されたことを示しています。

次のセクションでは、JavaScriptでオブジェクトを反復処理する方法について説明します。

オブジェクトプロパティのループ

JavaScriptには、オブジェクトのプロパティを反復処理するためのforループが組み込まれています。 これは、for...inループとして知られています。

これは、メインオブジェクトの例であるgimliの簡略版です。 

const gimli = {
    name: "Gimli",
    race: "dwarf",
    weapon: "battle axe",
};

for...inを使用して、gimliのすべてのプロパティをトラバースし、それらをコンソールに出力できます。 角かっこ表記を使用すると、プロパティ値を変数（この場合はkey）として取得できます。 

// Iterate through properties of gimli
for (let key in gimli) {
  console.log(gimli[key]);
}
OutputGimli
dwarf
battle axe

for...inループの最初の変数だけを使用して、プロパティ名自体を取得することもできます。 convert the key values to upper caseに文字列メソッドを使用しました。 

// Get keys and values of gimli properties
for (let key in gimli) {
  console.log(key.toUpperCase() + ':', gimli[key]);
}
OutputNAME: Gimli
RACE: dwarf
WEAPON: battle axe

for...inループは、Arrayオブジェクトタイプでのみ使用されるfor...ofループと混同しないでください。 配列の反復処理の詳細については、「https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript#looping-through-an-array[Understanding Arrays in JavaScript]」チュートリアルをご覧ください。

もう1つの便利な列挙メソッドは、Object.keys()メソッドです。これは、オブジェクトのキーの配列を返します。 

// Initialize method on gimli object to return property keys
Object.keys(gimli);
Output["name", "race", "weapon"]

このメソッドを使用すると、オブジェクトのキーまたは名前を配列として操作できるため、JavaScript配列で使用可能なすべてのメソッドを活用できます。

結論

オブジェクトは、JavaScriptプログラミング言語の非常に便利で多機能な機能です。 JavaScriptでコードを記述する主な構成要素の一部であり、関連するデータと機能を整理する実用的な方法です。 To Doリスト、ショッピングカート、ユーザーアカウント、およびWebマップ上の場所はすべて、実際に遭遇する可能性のあるJavaScriptオブジェクトの多くの例の一部です。

このチュートリアルでは、プロパティとメソッドの違い、オブジェクトの作成方法、オブジェクトプロパティの追加、削除、変更、ループの方法を学びました。 JavaScriptオブジェクトの詳細については、Mozilla Developer NetworkのWorking with Objectsについてお読みください。

Related