JavaScript入門 - パート4

パート4では、JavaScriptの高度なトピックについて学びます。これには、関数の応用、クロージャ、そしてDOM操作が含まれます。

関数の応用

1. コールバック関数

コールバック関数は、他の関数の引数として渡され、後で実行される関数です。

function greet(name, callback) {
    console.log("こんにちは、" + name + "!");
    callback();
}

function sayGoodbye() {
    console.log("さようなら！");
}

greet("太郎", sayGoodbye);

2. 高階関数

高階関数は、他の関数を引数として受け取るか、関数を返す関数です。

function multiplyByTwo(x) {
    return x * 2;
}

function operateOnArray(arr, func) {
    let result = [];
    for (let i = 0; i < arr.length; i++) {
        result.push(func(arr[i]));
    }
    return result;
}

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = operateOnArray(numbers, multiplyByTwo);
console.log(doubledNumbers);  // [2, 4, 6, 8, 10]

クロージャ

クロージャは、外部関数から内部関数を返す関数であり、内部関数は外部関数の変数やパラメータにアクセスできます。

function counter() {
    let count = 0;
    return function() {
        count++;
        console.log(count);
    };
}

let increment = counter();
increment();  // 1
increment();  // 2
increment();  // 3

DOM操作

DOM（Document Object Model）は、HTML文書の構造化された表現であり、JavaScriptを使って操作することができます。

3. 要素の取得

let heading = document.getElementById("main-heading");
console.log(heading.textContent);

4. 要素の変更

let paragraph = document.getElementById("main-paragraph");
paragraph.textContent = "新しいテキスト";

5. イベントの追加

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

まとめ

パート4では、JavaScriptの高度なトピックについて学びました。関数の応用、クロージャ、そしてDOM操作は、より高度なウェブ開発に不可欠な概念です。これらを理解することで、より動的でインタラクティブなウェブページを作成できるようになります。