前書き

JavaScriptの*オブジェクト*は、https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript [data type]であり、* names または keys のコレクションで構成され、 *値名前:値のペア*で表されます。 name:valueのペアは、文字列、数値、ブール値などの任意のデータ型を含む properties と、オブジェクト内に含まれる関数である methodsで構成できます。

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

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

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

オブジェクトを作成する

オブジェクトはhttps://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript[JavaScriptデータ型]です。数字または文字列もデータ型です。 データ型として、オブジェクトを変数に含めることができます。

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

  • 中括弧を使用する*オブジェクトリテラル*: + {} +

  • `+ new +`キーワードを使用する*オブジェクトコンストラクター*

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

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

// 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}!`;
   },
};

新しいオブジェクトは3つのプロパティを持つ + gimli +`です。 各プロパティは* name:value ペアで構成され、 key:value *ペアとも呼ばれます。 `+ weapon +`はプロパティ名の1つで、プロパティ値 `+" axe "+(文字列)にリンクされています。 メソッド名は `+ greet +`で、メソッド値は関数のコンテンツで構成されます。

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

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

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

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

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

プロパティとメソッド

オブジェクトには* properties および methods *を含めることができます。

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

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

オブジェクトのプロパティとメソッドの違いを覚える簡単な方法は、プロパティを名詞、メソッドを動詞と考えることです。 「+ name of」、「+ race」、および「+ weapons」はすべてオブジェクトに関連付けられた名詞であり、プロパティです。 `+ 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 "+`です。 オブジェクトブラケット表記を使用して同じデータを取得することもできます。 https://www.digitalocean.com/community/tutorials/how-to-index-split-and-manipulate-strings-in-javascript [文字列にインデックスを付けてアクセスする]と同様に、ブラケット表記の構文はプロパティ名を囲む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`ループの最初の変数だけを使用して、プロパティ名自体を取得することもできます。 キー値を大文字に変換

// 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]」チュートリアルをご覧ください。

別の便利な列挙メソッドは、オブジェクトのキーの配列を返す `+ 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のhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects[Working with Objects]をご覧ください。