JavaScript オブジェクト/配列/イベント処理/forEach　10日目　2024/10/16（お金持ちまでの道のり）

私事ですが今日の夜に商工会議所で３分間、自分の個人事業計画について発表する機会があります。２０人くらいの参加者が発表して、質疑応答で計９０分くらいのセミナーです。ものすごい貴重で重要な機会だと思うのですが何を話すかまだ決めていません。そもそも事業計画があるわけではなく、その前段階のプログラミング基礎を学んでいる状況です。でも勉強中ですっていう発表をするだけだともったいない気がします。今日の学習を進めながら考えたいと思います。では今日も張り切っていきましょう！

JavaScript オブジェクト/配列/イベント処理/forEach

9. オブジェクトの基礎（ドット＆ブラケット記法）

オブジェクトとは？

JavaScriptにおいて、オブジェクトは複数のデータを1つのまとまりとして管理できるデータ構造です。オブジェクトは**プロパティ（key）と値（value）**のペアで構成されます。

オブジェクトを使うことで、関連するデータを1つの構造で整理し、効率的に扱うことができます。たとえば、ユーザー情報や商品の詳細など、複数のデータを一つにまとめて管理するのに便利です。

オブジェクトの基本的な構造：

オブジェクトは、中括弧 {} を使って作成されます。プロパティ（key）と値（value）はペアで指定し、それぞれのペアは**コロン（:）で区切られます。複数のプロパティはカンマ（,）**で区切ります。
オブジェクトは、複数のプロパティと値をまとめて管理するためのデータ構造を定義するためのものです。

let person = {
  name: "太郎",  // プロパティ "name" の値は "太郎"
  age: 30,       // プロパティ "age" の値は 30
  job: "エンジニア"  // プロパティ "job" の値は "エンジニア"
};

console.log(person);  // { name: '太郎', age: 30, job: 'エンジニア' }

オブジェクトのプロパティにアクセスする方法：

・ドット（.）記法を使う。

基本構文

オブジェクト.プロパティ  // プロパティ（固定された文字列のみ）にアクセスする場合
オブジェクト.メソッド()   // メソッドを呼び出す場合

let person = {
  name: "太郎",  // プロパティ "name" の値は "太郎"
  age: 30,       // プロパティ "age" の値は 30
  job: "エンジニア"  // プロパティ "job" の値は "エンジニア"
};

console.log(person.name);  // "太郎" と表示される

・ブラケット（[]）記法を使う。

基本構文

オブジェクト[プロパティ名]  //プロパティは変数や動的な値も可
オブジェクト["メソッド名"]();
配列[インデックス番号]

console.log(person["age"]);  // 30 と表示される

プロパティの追加や変更：

let person = {
  name: "太郎",  // プロパティ "name" の値は "太郎"
  age: 30,       // プロパティ "age" の値は 30
  job: "エンジニア"  // プロパティ "job" の値は "エンジニア"
};

// オブジェクトが定義された後に、新しいプロパティを追加
person.country = "日本";  // 新しいプロパティ "country" を追加

// プロパティ "country" が追加されたオブジェクト全体を確認
console.log(person);  
// 出力結果: { name: '太郎', age: 30, job: 'エンジニア', country: '日本' }

// "country" プロパティだけを表示
console.log(person.country);  // "日本" と表示される

let person = {
  name: "太郎",  // プロパティ "name" の値は "太郎"
  age: 30,       // プロパティ "age" の値は 30
  job: "エンジニア"  // プロパティ "job" の値は "エンジニア"
};

person.age = 31;  // "age" プロパティの値を変更
console.log(person.age);  // 31 と表示される

10. 配列の基礎

配列（Array）とは？

配列は、複数の値を1つの変数にまとめて管理できるデータ構造です。配列の各要素には**インデックス番号（0から始まる番号）が割り当てられており、順番にアクセスすることができます。JavaScriptでは、配列は[]（角括弧）**を使って作成します。

配列の基本的な作成方法：

let fruits = ["りんご", "バナナ", "みかん"];

配列の要素にアクセスする方法：

配列の要素にアクセスするには、インデックス番号を使います。

let fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits[0]);  // "りんご" と表示される
console.log(fruits[1]);  // "バナナ" と表示される
console.log(fruits[2]);  // "みかん" と表示される

配列の長さ（要素の数）を確認する：

配列の長さを取得するには、length プロパティを使います。

let fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits.length);  // 3 と表示される（要素の数）

let text = "こんにちは";
console.log(text.length);  // 5 と表示される（文字数の数）

配列に要素を追加する：

push() メソッドを使って、配列に要素を追加することができます。

let fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits.length);

fruits.push("ぶどう");  // 配列に "ぶどう" を追加
console.log(fruits.length);  // 4 と表示される（要素の数）

push()メソッドを使わず下記のようにしても結果は同じです。

let fruits = ["りんご", "バナナ", "みかん", "ぶどう"];
console.log(fruits.length);  // 4 と表示される（要素の数）

配列の要素を削除する：

①配列の最後の要素を削除するには、pop() メソッドを使います。

fruits.pop();  // 最後の要素 "ぶどう" を削除
console.log(fruits);  // ["りんご", "バナナ", "みかん"] と表示される

②要素を選んで削除するには、splice() メソッドを使います。

let fruits = ["りんご", "バナナ", "みかん", "ぶどう"];
fruits.splice(2, 1);  // インデックス2の "みかん" を削除
console.log(fruits);  // ["りんご", "バナナ", "ぶどう"] と表示される

fruits.splice(2, 2);  // インデックス2から2つの要素（"みかん" と "ぶどう"）を削除
console.log(fruits);  // ["りんご", "バナナ"] と表示される

11. イベント処理（ユーザーが操作したときの反応）

イベント処理とは？

イベント処理とは、ユーザーがWebページで操作を行ったときに発生する反応を指します。イベントは、たとえばボタンをクリックしたり、キーボードのキーを押したりすることによって発生します。それに応じて特定の処理（関数）を実行する仕組みがイベント処理です。

よく使われるイベントの例：

イベントリスナーとは？

イベントリスナーは、特定のイベントが発生したときに実行する関数（処理）を登録するためのものです。イベントが発生すると、このリスナーに登録された関数が自動的に実行されます。

基本的な構文：

element.addEventListener("イベント名", 関数);

クリックイベントの例：

<button id="myButton">クリックしてね</button>

<script>
  let button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    alert("ボタンがクリックされました！");
  });
</script>

よく使われるイベントの種類：

12. 繰り返し処理の追加学習（forEach など）

forEach と for ループ、 while ループは繰り返し処理という点では似ていますが用途が異なります。forEach は配列専用のメソッドで、配列に対して使うと非常に便利です。配列のすべての要素を順番に処理する際に特化しています。for ループや**while ループ**は、より汎用的な繰り返し処理です。配列に限らず、様々な場面で条件を使って繰り返し処理を行えます。forEach にできて、for ループや while ループにできないことは基本的にはありません。

forEach メソッドとは？

forEach は、配列の各要素に対して1回ずつ指定された処理を実行するためのメソッドです。配列のすべての要素にアクセスし、同じ処理を繰り返すときに便利です。

基本的な構文：

array.forEach(function(要素, インデックス, 配列) { 　//array はただの仮の名前
  // 処理内容
});

例：配列の要素を表示する forEach

let fruits = ["りんご", "バナナ", "みかん"];

fruits.forEach(function(fruit) {
  console.log(fruit);
});

forEach の特徴（便利な点）：

本日の感想

ここまで４時間半くらい。少しずつ学習スピードが上がってきたような気がします。これから余った時間でセミナーの発表準備をします。