スキップしてメイン コンテンツに移動

JavaScript入門 - パート3

JavaScript入門 - パート3

パート3では、JavaScriptのオブジェクトと配列について説明します。

オブジェクト

1. オブジェクトとは

オブジェクトは、関連するデータや機能をまとめるための構造です。プロパティ(データ)とメソッド(関数)を持つことができます。

let person = {
    name: "太郎",
    age: 30,
    greet: function() {
        console.log("こんにちは、" + this.name + "です。");
    }
};

console.log(person.name);  // "太郎"
console.log(person.age);   // 30
person.greet();            // "こんにちは、太郎です。"

2. オブジェクトのプロパティにアクセスする

オブジェクトのプロパティにはドット記法やブラケット記法でアクセスできます。

let car = {
    brand: "トヨタ",
    model: "カローラ",
    year: 2020
};

// ドット記法
console.log(car.brand);  // "トヨタ"

// ブラケット記法
console.log(car["model"]);  // "カローラ"

3. プロパティの追加と削除

オブジェクトにプロパティを追加したり、削除したりできます。

let book = {
    title: "JavaScript入門",
    author: "山田太郎"
};

// プロパティの追加
book.year = 2021;
console.log(book.year);  // 2021

// プロパティの削除
delete book.author;
console.log(book.author);  // undefined

配列

4. 配列とは

配列は、複数の値を一つの変数にまとめて格納できるデータ構造です。値にはインデックスを使ってアクセスします。

let fruits = ["りんご", "バナナ", "オレンジ"];

console.log(fruits[0]);  // "りんご"
console.log(fruits[1]);  // "バナナ"
console.log(fruits[2]);  // "オレンジ"

5. 配列の操作

配列には、要素を追加、削除、操作するための多くのメソッドがあります。

要素の追加

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

// 配列の末尾に追加
fruits.push("オレンジ");
console.log(fruits);  // ["りんご", "バナナ", "オレンジ"]

// 配列の先頭に追加
fruits.unshift("いちご");
console.log(fruits);  // ["いちご", "りんご", "バナナ", "オレンジ"]

要素の削除

let fruits = ["りんご", "バナナ", "オレンジ"];

// 配列の末尾を削除
let lastFruit = fruits.pop();
console.log(lastFruit);  // "オレンジ"
console.log(fruits);     // ["りんご", "バナナ"]

// 配列の先頭を削除
let firstFruit = fruits.shift();
console.log(firstFruit);  // "りんご"
console.log(fruits);      // ["バナナ"]

配列の長さ

let fruits = ["りんご", "バナナ", "オレンジ"];
console.log(fruits.length);  // 3

配列の反復処理

配列の要素を反復処理する方法はいくつかあります。ここではforループとforEachメソッドを紹介します。

let fruits = ["りんご", "バナナ", "オレンジ"];

// forループ
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

// forEachメソッド
fruits.forEach(function(fruit) {
    console.log(fruit);
});

まとめ

パート3では、オブジェクトと配列について学びました。これらはJavaScriptでデータを扱う基本的な方法です。次回は、JavaScriptの高度なトピックについて学びましょう。

コメント