Javascript オブジェクト＆配列の応用　11日目　2024/10/17（お金持ちまでの道のり）

本日はJavascript オフジェクト＆配列の応用です。そして今日から復習も開始。朝起きたら３日分くらいの記事を軽く読むようにします。HPに応用できるコードをもっと見つけたい！

Javascript オブジェクト＆配列の応用

13. オブジェクトの基礎の復習～応用

オブジェクトとは？

オブジェクトは、プロパティ（値）とメソッド（関数）を持つデータの集まりです。オブジェクトを使うことで、複数の関連データを1つにまとめ、扱いやすくすることができます。
※データ（プロパティ）、動作（メソッド）

let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

プロパティのアクセス

ドット表記（dot notation）

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

console.log(person.name); // "John"
console.log(person.age); // 30

ブラケット表記（bracket notation）

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

console.log(person["full name"]); // "John Doe"

// 変数を使ってプロパティ名を指定する
let propertyName = "age";
console.log(person[propertyName]); // 30

メソッドの呼び出し

オブジェクト内のメソッドは、他のプロパティやメソッドにアクセスして動作を行うことができます。thisキーワードを使って、オブジェクト内のプロパティにアクセスします。

thisキーワード

let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // "Hello, my name is John"

thisがオブジェクトによって変わる

let person1 = {
  name: "John",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

let person2 = {
  name: "Jane",
  greet: person1.greet // 同じメソッドをperson2にも使用
};

person1.greet(); // "Hello, my name is John"
person2.greet(); // "Hello, my name is Jane"

このコードにageを加えた場合

let person1 = {
  name: "John",
  age: 20,
  greet1: function() {
    console.log("Hello, my name is " + this.name);
  },
  greet2: function() {
    console.log("Hello, I am " + this.age);
  }};

let person2 = {
  name: "Jane",
  age: 35,
  greet1: person1.greet1, // 同じメソッドをperson2にも使用
  greet2: person1.greet2 // 同じメソッドをperson2にも使用
};

person1.greet2(); // "Hello, I am 20"
person2.greet2(); // "Hello, I am 35"

３人になった場合

// person1 の定義
let person1 = {
  name: "John",
  age: 20,
  greet1: function() {
    console.log("Hello, my name is " + this.name);
  },
  greet2: function() {
    console.log("Hello, I am " + this.age);
  }
};

// person2 の定義
let person2 = {
  name: "Jane",
  age: 35,
  greet1: person1.greet1, // person1 の greet1 を共有
  greet2: person1.greet2 // person1 の greet2 を共有
};

// person3 の定義
let person3 = {
  name: "Mike",
  age: 40,
  greet1: person1.greet1, // person1 の greet1 を共有
  greet2: person1.greet2 // person1 の greet2 を共有
};

// 各人の greet メソッドを呼び出す
person1.greet2(); // "Hello, I am 20"
person2.greet2(); // "Hello, I am 35"
person3.greet2(); // "Hello, I am 40"

３人以上の場合は配列の方がいい

// 3人のデータをオブジェクトとして配列にまとめる
let people = [
  {
    name: "John",
    age: 20,
    greet1: function() {
      console.log("Hello, my name is " + this.name);
    },
    greet2: function() {
      console.log("Hello, I am " + this.age);
    }
  },
  {
    name: "Jane",
    age: 35,
    greet1: function() {
      console.log("Hello, my name is " + this.name);
    },
    greet2: function() {
      console.log("Hello, I am " + this.age);
    }
  },
  {
    name: "Mike",
    age: 40,
    greet1: function() {
      console.log("Hello, my name is " + this.name);
    },
    greet2: function() {
      console.log("Hello, I am " + this.age);
    }
  }
];

// forEach で各人の greet2 を呼び出す
people.forEach(function(person) {
  person.greet2();
});

オブジェクトの応用

実際の開発では、オブジェクトを使って複雑なデータ構造を作成したり、複数のデータを簡単に管理できます。たとえば、複数のユーザーを管理する場合は、オブジェクトの配列を使うことがよくあります。

let users = [　//[]内は配列
  { name: "John", age: 30 }, //{}内はオブジェクト
  { name: "Jane", age: 25 },
  { name: "Mike", age: 35 }
];

console.log(users[1].name); // "Jane"

14. 配列の応用（＋基礎の復習）

配列の基本

配列は複数のデータを1つの変数に格納できるデータ構造です。配列の要素には、文字列、数値、オブジェクト、さらには他の配列も含めることができます。

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // "apple"（0番目の要素にアクセス）

配列の操作メソッド

push(): 配列の末尾に要素を追加

fruits.push("orange");
console.log(fruits); // ["apple", "banana", "cherry", "orange"]

pop(): 配列の末尾から要素を削除

fruits.pop();
console.log(fruits); // ["apple", "banana", "cherry"]

shift(): 配列の先頭から要素を削除

fruits.shift();
console.log(fruits); // ["banana", "cherry"]

unshift(): 配列の先頭に要素を追加

fruits.unshift("mango");
console.log(fruits); // ["mango", "banana", "cherry"]

slice(): 配列の一部を取り出す（新しい配列を作成）

// 元の配列を定義
let fruits = ["apple", "banana", "cherry", "orange"];

// slice() メソッドでインデックス 1 から 3 の手前までの要素を取得　つまり１から２まで
let citrus = fruits.slice(1, 3);

// 結果をコンソールに出力
console.log(citrus); // ["banana", "cherry"]

splice(): 配列の要素を削除・追加

let fruits = ["apple", "banana", "cherry", "orange"];

// インデックス1（"banana"）から始めて、2つの要素（"banana"と"cherry"）を削除し、その位置に"kiwi"と"grape"を追加
fruits.splice(1, 2, "kiwi", "grape");

console.log(fruits); // ["apple", "kiwi", "grape", "orange"]

配列とループの組み合わせ

forループ

// 配列を定義
let fruits = ["mango", "kiwi", "grape", "cherry"];

// forループを使って配列のすべての要素を順番に出力
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 出力:
// mango
// kiwi
// grape
// cherry

forEach()メソッド（配列専用のメソッド）

let fruits = ["mango", "kiwi", "grape", "cherry"];

fruits.forEach(function(fruit) {
  console.log(fruit);  // 各要素を1つずつ出力
});
// 出力:
// mango
// kiwi
// grape
// cherry

※forEach(function(…))のようにforEachとfunctionはセット

配列の応用例

let users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Mike", age: 35 }
];

users.forEach(function(user) {
  console.log(user.name + " is " + user.age + " years old.");
});
// 出力:
// "John is 30 years old."
// "Jane is 25 years old."
// "Mike is 35 years old."

配列の高度な応用

map(): 配列を基に新しい配列を作る

let numbers = [1, 2, 3, 4];

let doubled = numbers.map(function(number) {
  return number * 2;
});

console.log(doubled); // [2, 4, 6, 8]

filter(): 条件に合う要素だけを抽出

let users = [
  { name: "John", age: 30 },
  { name: "Jane", age: 25 },
  { name: "Mike", age: 35 }
];

let adults = users.filter(function(user) {
  return user.age >= 30;
});

console.log(adults); // [{name: "John", age: 30}, {name: "Mike", age: 35}]

reduce(): 配列を1つの値にまとめる

let numbers = [1, 2, 3, 4];

let sum = numbers.reduce(function(total, number) {
  return total + number;
}, 0);

console.log(sum); // 10

Javascript オブジェクトと配列の組み合わせ

オブジェクトの例

let 猫 = {
  名前: "タマ",
  年齢: 2,
  色: "黒"
};

配列の例

let 好きな食べ物 = ["りんご", "バナナ", "スイカ"];

配列の中にオブジェクトを入れる場合

let 猫たち = [
  { 名前: "タマ", 年齢: 2, 色: "黒" },
  { 名前: "ミケ", 年齢: 1, 色: "三毛" },
  { 名前: "クロ", 年齢: 3, 色: "黒" }
];

オブジェクトの中に配列を入れる場合

let タマ = {
  名前: "タマ",
  年齢: 2,
  色: "黒",
  好きな食べ物: ["魚", "チキン", "かつお"]
};

脳がオーバーヒートしている感じがします。でも負けない。。。「Javascript オブジェクトと配列の組み合わせ」は12日目からこっちに移動させました。12日目の主な内容がToDoリストアプリを作成することなので。