【JavaScript】JavaScriptのオブジェクトの使い方を学ぼう！！　プロパティのアクセス、mapメソッド、filterメソッドなどの使い方を解説します！

この記事は90%～100％ChatGPTで作られています。

このブログではAffinger5を使用しています。

JavaScriptのオブジェクトについて

JavaScriptには、多くの組み込みオブジェクトがあります。これらのオブジェクトは、様々なタイプのデータを操作するための機能を提供します。
オブジェクトは、名前（キー）と値のペアで構成され、その値には関数も含まれることがあります。これらの関数は、オブジェクトに関連する操作を行うためのもので、メソッドと呼ばれます。

サルモリ

それじゃあ、早速オブジェクトの作り方を見ていこう！

JavaScriptのオブジェクトの作成

JavaScriptでは、オブジェクトリテラル（{}）を使ってオブジェクトを作成します。以下のソースコードは、名前（name）と年齢（age）というプロパティを持つオブジェクトを作成しています。

ソースコード例：オブジェクトの作成

let person = {
  name: "John",
  age: 30
};

console.log(person);

let person = {

age: 30

};

console.log(person);

 出力結果
{ name: 'John', age: 30 }

サルモリ

こうして作られたオブジェクトは、そのプロパティにアクセスしたり、新しいプロパティを追加したりすることができるんだよ！

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

オブジェクトのプロパティにアクセスするには、ドット記法（.）またはブラケット記法（[]）を使用します。新しいプロパティを追加するにも、同様の記法を使用します。

ソースコード例：オブジェクトプロパティへのアクセスと追加

let person = {
  name: "John",
  age: 30
};

console.log(person.name); // ドット記法

console.log(person['age']); // ブラケット記法

person.job = "Engineer"; // 新しいプロパティの追加

console.log(person);

let person = {

age: 30

};

console.log(person.name); // ドット記法

console.log(person['age']); // ブラケット記法

person.job = "Engineer"; // 新しいプロパティの追加

console.log(person);

 出力結果
John
30
{ name: 'John', age: 30, job: 'Engineer' }

サルモリ

見ての通り、新しいプロパティを追加するのは簡単だよね！

JavaScriptのオブジェクトとループ処理

JavaScriptのオブジェクトとループ処理を組み合わせることで、オブジェクトの全てのプロパティを繰り返し処理することができます。この例では、for...inループを使用しています。

ソースコード例：オブジェクトとループ処理

let person = {
  name: "John",
  age: 30,
  job: "Engineer"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}

let person = {

age: 30,

job: "Engineer"

};

for (let key in person) {

console.log(key + ": " + person[key]);

}

 出力結果
name: John
age: 30
job: Engineer

サルモリ

ループを使うことで、オブジェクトの中身を一つずつ見ていくことができるよね！

JavaScriptのオブジェクトと配列のメソッド

JavaScriptの配列は、オブジェクトの特殊なタイプであり、配列に対して操作を行うための組み込みメソッド（map, filterなど）が多数用意されています。
以下の例では、配列のオブジェクトに対してmapメソッドを使用しています。

ソースコード例：配列のオブジェクトとmapメソッド

let people = [
  { name: "John", age: 30, job: "Engineer" },
  { name: "Jane", age: 28, job: "Designer" },
  { name: "Mike", age: 35, job: "Teacher" }
];

let names = people.map(person => person.name);

console.log(names);

let people = [

{ name: "John", age: 30, job: "Engineer" },

{ name: "Jane", age: 28, job: "Designer" },

{ name: "Mike", age: 35, job: "Teacher" }

];

let names = people.map(person => person.name);

console.log(names);

 出力結果
[ 'John', 'Jane', 'Mike' ]

サルモリ

mapメソッドを使うと、配列の全ての要素に対して同じ操作を行うことができるんだよ！

また、配列のfilterメソッドを使用して、特定の条件を満たす要素だけを取り出すこともできます。
この例では、年齢が30歳以上の人物だけを取り出しています。

ソースコード例：配列のオブジェクトとfilterメソッド

let people = [
  { name: "John", age: 30, job: "Engineer" },
  { name: "Jane", age: 28, job: "Designer" },
  { name: "Mike", age: 35, job: "Teacher" }
];

let over30 = people.filter(person => person.age >= 30);

console.log(over30);

let people = [

{ name: "John", age: 30, job: "Engineer" },

{ name: "Jane", age: 28, job: "Designer" },

{ name: "Mike", age: 35, job: "Teacher" }

];

let over30 = people.filter(person => person.age >= 30);

console.log(over30);

 出力結果
[ { name: 'John', age: 30, job: 'Engineer' }, { name: 'Mike', age: 35, job: 'Teacher' } ]

サルモリ

filterメソッドを使えば、特定の条件に一致する要素だけを簡単に抽出できるね！

まとめ

この記事では、JavaScriptのオブジェクトについて初心者向けに解説しました。オブジェクトは、キーと値のペアで構成され、それらをまとめて扱うことができます。
また、ループ処理や配列のメソッド（mapやfilter）と組み合わせることで、さまざまな操作が可能になります。

最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！

サルモリ

最後まで読んでくれてありがとう！！

この記事は90%～100％ChatGPTで作られています。

作り方はこちらをクリック

【JavaScript】JavaScriptのオブジェクトの使い方を学ぼう！！ プロパティのアクセス、mapメソッド、filterメソッドなどの使い方を解説します！

JavaScriptのオブジェクトについて

JavaScriptのオブジェクトの作成

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

JavaScriptのオブジェクトとループ処理

JavaScriptのオブジェクトと配列のメソッド

まとめ

広告ブロックを検出しました。

【JavaScript】JavaScriptのオブジェクトの使い方を学ぼう！！　プロパティのアクセス、mapメソッド、filterメソッドなどの使い方を解説します！