JavaScriptクラスでブラウザAPIを操作する方法を徹底解説

JavaScriptは、クライアントサイドのウェブ開発において非常に強力なプログラミング言語です。その中でも、JavaScriptのクラスを使ってブラウザAPIを操作する方法は、コードの再利用性や管理のしやすさを向上させるために重要です。クラスを使用することで、オブジェクト指向プログラミングの概念を取り入れ、複雑な操作をシンプルかつ効率的に行うことができます。

本記事では、JavaScriptのクラスを活用してブラウザAPIを操作する方法を詳細に解説します。基本的なクラスの構文から始め、DOM操作、イベントハンドリング、Fetch APIによるデータ取得、Local Storageの操作、アニメーション制御、エラーハンドリングまで幅広くカバーします。さらに、実践的な応用例としてToDoアプリの作成方法を紹介し、学んだ内容を実際に使ってみる機会を提供します。これにより、JavaScriptクラスを駆使してブラウザAPIを効果的に操作するための知識を深めることができます。

JavaScriptクラスの基本概念
ブラウザAPIとは
1. ブラウザAPIの種類
2. ブラウザAPIの重要性
クラスを使ったDOM操作
クラスを使ったイベントハンドリング
Fetch APIとクラスの活用
Local Storageとクラス
クラスを使ったアニメーション操作
クラスを用いたエラーハンドリング
応用例：ToDoアプリの作成
演習問題
まとめ

JavaScriptクラスの基本概念

JavaScriptのクラスは、オブジェクト指向プログラミングをサポートするための構文です。ES6（ECMAScript 2015）で導入され、コードの再利用性や可読性を向上させるための強力なツールです。

クラスの定義

JavaScriptクラスは、classキーワードを使用して定義されます。以下に基本的なクラスの例を示します。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const person1 = new Person('Alice', 30);
person1.greet(); // Hello, my name is Alice and I am 30 years old.

クラスの構成要素

コンストラクタ: クラスのインスタンスを初期化するための特別なメソッドです。constructorメソッド内で、クラスのプロパティを定義します。
メソッド: クラスの動作を定義する関数です。上記の例では、greetメソッドが含まれています。

クラスの継承

JavaScriptクラスは継承をサポートしており、既存のクラスを基に新しいクラスを作成することができます。extendsキーワードを使用して継承を行います。

class Employee extends Person {
    constructor(name, age, jobTitle) {
        super(name, age);
        this.jobTitle = jobTitle;
    }

    work() {
        console.log(`${this.name} is working as a ${this.jobTitle}.`);
    }
}

const employee1 = new Employee('Bob', 25, 'Developer');
employee1.greet(); // Hello, my name is Bob and I am 25 years old.
employee1.work();  // Bob is working as a Developer.

クラスの利点

再利用性: 一度定義したクラスを複数の場所で使い回すことができます。
可読性: クラスは関連するデータとメソッドをまとめるため、コードの可読性が向上します。
保守性: クラスを使用することで、コードの変更や拡張が容易になります。

JavaScriptのクラスを理解することで、より複雑なプログラムを効率的に構築できるようになります。次に、ブラウザAPIの基本概念とその操作方法について学びましょう。

ブラウザAPIとは

ブラウザAPI（Application Programming Interface）は、ウェブブラウザが提供する機能やサービスにアクセスするためのインターフェースです。これらのAPIを利用することで、JavaScriptを使用して様々なブラウザ機能を操作できます。

ブラウザAPIの種類

ブラウザAPIには多くの種類があり、それぞれが異なる機能を提供します。以下に主なブラウザAPIをいくつか紹介します。

DOM API

Document Object Model（DOM）APIは、HTMLやXML文書を操作するためのインターフェースです。DOM APIを使うことで、ページの内容や構造を動的に変更できます。

document.getElementById('example').textContent = 'Hello, World!';

Fetch API

Fetch APIは、ネットワークリクエストを行い、サーバーからデータを取得するためのインターフェースです。XHR（XMLHttpRequest）の代替として使用され、よりシンプルな構文を提供します。

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

Local Storage API

Local Storage APIは、ブラウザにデータを保存するためのインターフェースです。クライアントサイドで永続的にデータを保存するために使用されます。

localStorage.setItem('username', 'Alice');
const username = localStorage.getItem('username');

Canvas API

Canvas APIは、HTML5のキャンバス要素を使用して、2Dグラフィックスを描画するためのインターフェースです。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

ブラウザAPIの重要性

ブラウザAPIは、ウェブアプリケーションの機能を大幅に拡張するために不可欠です。これらのAPIを使用することで、以下のような操作が可能になります。

動的なコンテンツの操作: ページの内容をリアルタイムで更新する。
ユーザーインタラクションの向上: フォームの入力検証やアニメーションの実装。
データの取得と保存: 外部データのフェッチやクライアントサイドのデータ保存。

次のセクションでは、JavaScriptのクラスを使用してDOM操作を行う方法について詳しく解説します。クラスを利用することで、これらのブラウザAPIをより効率的に扱えるようになります。

クラスを使ったDOM操作

JavaScriptクラスを使用してDOM（Document Object Model）操作を行うと、コードの再利用性や可読性が向上します。ここでは、クラスを使ってDOMを操作する方法を具体例とともに紹介します。

DOM操作の基本

DOM操作とは、HTMLやXML文書の内容や構造を動的に変更することです。これには、要素の追加、削除、変更、イベントの設定などが含まれます。

クラスの定義と初期化

まず、DOM操作を行うためのクラスを定義します。このクラスでは、要素の選択やイベントの設定などの基本操作をメソッドとして提供します。

class DOMManipulator {
    constructor(elementId) {
        this.element = document.getElementById(elementId);
    }

    setText(content) {
        this.element.textContent = content;
    }

    addClass(className) {
        this.element.classList.add(className);
    }

    removeClass(className) {
        this.element.classList.remove(className);
    }

    addEvent(eventType, callback) {
        this.element.addEventListener(eventType, callback);
    }
}

// インスタンスの作成
const manipulator = new DOMManipulator('example');

具体例: DOM操作の実装

以下の例では、クラスを使ってDOM操作を実際に行います。

テキストの変更

setTextメソッドを使って、指定した要素のテキストを変更します。

manipulator.setText('Hello, World!');

このコードを実行すると、IDがexampleの要素のテキストが「Hello, World!」に変更されます。

クラスの追加と削除

addClassとremoveClassメソッドを使って、要素にクラスを追加したり削除したりします。

manipulator.addClass('highlight');
manipulator.removeClass('highlight');

これにより、要素にhighlightクラスが追加され、次に削除されます。

イベントの設定

addEventメソッドを使って、要素にイベントリスナーを設定します。

manipulator.addEvent('click', () => {
    alert('Element clicked!');
});

このコードは、要素がクリックされたときにアラートを表示するイベントリスナーを追加します。

クラスを使ったDOM操作の利点

再利用性: クラスを使うことで、同じDOM操作を複数の場所で簡単に再利用できます。
可読性: クラス内に操作をまとめることで、コードの構造が明確になり、可読性が向上します。
保守性: クラスに変更を加えるだけで、関連するすべてのDOM操作に影響を与えることができ、保守が容易になります。

次のセクションでは、クラスを使ったイベントハンドリングについて詳しく解説します。イベントハンドリングもクラスを利用することで効率的に管理できます。

クラスを使ったイベントハンドリング

JavaScriptクラスを使用してイベントハンドリングを行うと、イベントリスナーの管理が容易になり、コードの可読性と保守性が向上します。このセクションでは、クラスを使ったイベントハンドリングの具体的な方法を解説します。

イベントハンドリングの基本

イベントハンドリングとは、ユーザーの操作（クリック、入力、マウス移動など）に対して特定の処理を実行することです。クラスを使ってこれらのイベントを管理することで、コードの整理がしやすくなります。

クラス内でのイベント設定

クラス内にイベントリスナーを設定するメソッドを追加します。このメソッドを使って、特定のイベントに対する処理を定義します。

class EventManager {
    constructor(elementId) {
        this.element = document.getElementById(elementId);
    }

    addEvent(eventType, callback) {
        this.element.addEventListener(eventType, callback);
    }

    removeEvent(eventType, callback) {
        this.element.removeEventListener(eventType, callback);
    }
}

// インスタンスの作成
const manager = new EventManager('button');

イベントの追加

addEventメソッドを使って、要素にクリックイベントリスナーを追加します。

manager.addEvent('click', () => {
    alert('Button clicked!');
});

このコードは、IDがbuttonの要素がクリックされたときにアラートを表示します。

イベントリスナーの管理

クラスを使うと、複数のイベントリスナーを効率的に管理できます。たとえば、以下のように、クリックイベントとマウスオーバーイベントを同じクラスで管理します。

class ExtendedEventManager extends EventManager {
    addClickListener(callback) {
        this.addEvent('click', callback);
    }

    addMouseOverListener(callback) {
        this.addEvent('mouseover', callback);
    }
}

// 新しいインスタンスの作成
const extendedManager = new ExtendedEventManager('button');

// イベントリスナーの追加
extendedManager.addClickListener(() => {
    console.log('Button clicked!');
});

extendedManager.addMouseOverListener(() => {
    console.log('Mouse over button!');
});

このコードにより、button要素に対するクリックイベントとマウスオーバーイベントを追加し、それぞれのイベント時にコンソールにメッセージを出力します。

クラスを使ったイベントハンドリングの利点

コードの整理: イベントハンドリングをクラス内にまとめることで、コードの整理がしやすくなります。
再利用性: 同じイベントハンドリングのロジックを複数の場所で簡単に再利用できます。
保守性: イベントリスナーの追加、削除、変更をクラス内で管理することで、コードの保守が容易になります。

次のセクションでは、Fetch APIとクラスを組み合わせて、データ取得を効率的に管理する方法について解説します。これにより、ネットワークリクエストの処理をクラスで一元管理できるようになります。

Fetch APIとクラスの活用

Fetch APIは、ネットワークリクエストを行い、サーバーからデータを取得するためのインターフェースです。JavaScriptのクラスを使ってFetch APIを操作することで、データ取得のロジックを整理し、再利用可能なコードを作成することができます。このセクションでは、Fetch APIをクラスで管理する方法を解説します。

Fetch APIの基本

Fetch APIは、ネットワークリクエストを行うためのシンプルで強力な手段を提供します。基本的な使用例を以下に示します。

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

このコードは、指定されたURLからデータを取得し、取得したデータをコンソールに出力します。

クラスを使ったFetch APIの管理

Fetch APIの操作をクラスで管理することで、コードの再利用性と保守性が向上します。以下に、Fetch APIを利用するクラスの例を示します。

class DataFetcher {
    constructor(baseUrl) {
        this.baseUrl = baseUrl;
    }

    async fetchData(endpoint) {
        try {
            const response = await fetch(`${this.baseUrl}${endpoint}`);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const data = await response.json();
            return data;
        } catch (error) {
            console.error('Error fetching data:', error);
            throw error;
        }
    }

    async postData(endpoint, payload) {
        try {
            const response = await fetch(`${this.baseUrl}${endpoint}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(payload),
            });
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const data = await response.json();
            return data;
        } catch (error) {
            console.error('Error posting data:', error);
            throw error;
        }
    }
}

// インスタンスの作成
const fetcher = new DataFetcher('https://api.example.com');

// データの取得
fetcher.fetchData('/data')
    .then(data => console.log(data))
    .catch(error => console.error(error));

// データの送信
fetcher.postData('/data', { key: 'value' })
    .then(data => console.log(data))
    .catch(error => console.error(error));

クラスを使ったFetch APIの利点

再利用性: 一度定義したクラスを複数の場所で使い回すことができ、同じロジックを何度も書く必要がなくなります。
可読性: ネットワークリクエストのロジックをクラスにまとめることで、コードが明確になり、可読性が向上します。
保守性: クラス内にネットワークリクエストの処理を集約することで、変更や拡張が容易になります。

次のセクションでは、Local Storageをクラスで操作する方法について詳しく解説します。これにより、クライアントサイドでのデータ保存と管理を効率的に行うことができます。

Local Storageとクラス

Local Storage APIは、ブラウザにデータを保存するためのインターフェースであり、クライアントサイドで永続的にデータを保持するのに便利です。JavaScriptのクラスを使用してLocal Storageを操作することで、データ保存のロジックを整理し、再利用可能なコードを作成できます。このセクションでは、Local Storageをクラスで管理する方法を解説します。

Local Storage APIの基本

Local Storage APIは、キーとバリューのペアを保存するために使用されます。以下に基本的な使用例を示します。

// データの保存
localStorage.setItem('username', 'Alice');

// データの取得
const username = localStorage.getItem('username');
console.log(username); // Alice

// データの削除
localStorage.removeItem('username');

// 全データのクリア
localStorage.clear();

クラスを使ったLocal Storageの管理

Local Storageの操作をクラスで管理することで、コードの再利用性と保守性が向上します。以下に、Local Storageを利用するクラスの例を示します。

class StorageManager {
    constructor(storageKey) {
        this.storageKey = storageKey;
    }

    saveData(data) {
        localStorage.setItem(this.storageKey, JSON.stringify(data));
    }

    loadData() {
        const data = localStorage.getItem(this.storageKey);
        return data ? JSON.parse(data) : null;
    }

    removeData() {
        localStorage.removeItem(this.storageKey);
    }

    clearAllData() {
        localStorage.clear();
    }
}

// インスタンスの作成
const userManager = new StorageManager('user');

// データの保存
userManager.saveData({ name: 'Alice', age: 30 });

// データの取得
const user = userManager.loadData();
console.log(user); // { name: 'Alice', age: 30 }

// データの削除
userManager.removeData();

クラスを使ったLocal Storageの利点

再利用性: 一度定義したクラスを複数の場所で使い回すことができ、同じロジックを何度も書く必要がなくなります。
可読性: Local Storageの操作をクラスにまとめることで、コードが明確になり、可読性が向上します。
保守性: クラス内にLocal Storageの処理を集約することで、変更や拡張が容易になります。

実践例: ユーザー設定の管理

ユーザー設定を保存するために、クラスを使ったLocal Storage管理の実践例を示します。

class UserSettings {
    constructor() {
        this.storageManager = new StorageManager('userSettings');
    }

    saveSettings(settings) {
        this.storageManager.saveData(settings);
    }

    loadSettings() {
        return this.storageManager.loadData();
    }

    clearSettings() {
        this.storageManager.removeData();
    }
}

// インスタンスの作成
const settings = new UserSettings();

// 設定の保存
settings.saveSettings({ theme: 'dark', notifications: true });

// 設定の読み込み
const userSettings = settings.loadSettings();
console.log(userSettings); // { theme: 'dark', notifications: true }

// 設定のクリア
settings.clearSettings();

このコードにより、ユーザー設定をLocal Storageに保存し、必要に応じて読み込んだり削除したりすることができます。

次のセクションでは、クラスを使ってブラウザAPIを操作し、アニメーションを管理する方法について解説します。これにより、ウェブページの動的な演出を効率的に実装できます。

クラスを使ったアニメーション操作

ブラウザAPIを利用してアニメーションを操作する方法を学ぶと、ウェブページに動的で視覚的に魅力的な効果を追加できます。JavaScriptクラスを使ってアニメーションを管理することで、コードの整理がしやすくなり、再利用性が向上します。このセクションでは、クラスを使ったアニメーション操作の方法を解説します。

アニメーションの基本

ブラウザでアニメーションを作成するための基本的な方法には、CSSアニメーションとJavaScriptを使用したアニメーションがあります。ここでは、JavaScriptを使ったアニメーションの管理方法を紹介します。

基本的なアニメーションの実装

requestAnimationFrameを使ってアニメーションを実装するのが一般的です。このメソッドは、ブラウザのリフレッシュレートに合わせて最適なタイミングで描画を行います。

function animate() {
    let start = null;
    const element = document.getElementById('box');

    function step(timestamp) {
        if (!start) start = timestamp;
        const progress = timestamp - start;
        element.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;
        if (progress < 2000) {
            requestAnimationFrame(step);
        }
    }

    requestAnimationFrame(step);
}

animate();

クラスを使ったアニメーション管理

アニメーションのロジックをクラスにまとめると、再利用が容易になり、複雑なアニメーションも管理しやすくなります。

class Animator {
    constructor(elementId) {
        this.element = document.getElementById(elementId);
        this.start = null;
    }

    animate(duration, transformFunction) {
        const step = (timestamp) => {
            if (!this.start) this.start = timestamp;
            const progress = timestamp - this.start;
            this.element.style.transform = transformFunction(progress);
            if (progress < duration) {
                requestAnimationFrame(step);
            } else {
                this.start = null; // Reset for next animation
            }
        };
        requestAnimationFrame(step);
    }

    moveRight(duration) {
        this.animate(duration, (progress) => `translateX(${Math.min(progress / 10, 200)}px)`);
    }

    moveDown(duration) {
        this.animate(duration, (progress) => `translateY(${Math.min(progress / 10, 200)}px)`);
    }
}

// インスタンスの作成
const animator = new Animator('box');

// アニメーションの実行
animator.moveRight(2000);

クラスを使ったアニメーション操作の利点

再利用性: 一度定義したアニメーションロジックを複数の場所で使い回すことができます。
可読性: アニメーションのロジックをクラスにまとめることで、コードが明確になり、可読性が向上します。
保守性: クラス内にアニメーションの処理を集約することで、変更や拡張が容易になります。

実践例: フェードインアニメーション

次に、要素のフェードインアニメーションをクラスで管理する実践例を紹介します。

class FadeAnimator extends Animator {
    fadeIn(duration) {
        this.element.style.opacity = 0;
        this.animate(duration, (progress) => {
            const opacity = Math.min(progress / duration, 1);
            this.element.style.opacity = opacity;
            return '';
        });
    }
}

// インスタンスの作成
const fadeAnimator = new FadeAnimator('box');

// フェードインアニメーションの実行
fadeAnimator.fadeIn(2000);

このコードにより、指定された要素が2秒間でフェードインするアニメーションを実行できます。

次のセクションでは、クラスを使ったエラーハンドリングについて詳しく解説します。ブラウザAPI操作時のエラーハンドリングをクラスで行うことで、コードの安定性と保守性が向上します。

クラスを用いたエラーハンドリング

ブラウザAPIを操作する際には、エラーが発生することがあります。これらのエラーを適切に処理することで、アプリケーションの安定性とユーザーエクスペリエンスを向上させることができます。JavaScriptクラスを使用してエラーハンドリングを行うことで、エラーロジックを整理し、再利用可能なコードを作成することができます。このセクションでは、クラスを用いたエラーハンドリングの方法を解説します。

エラーハンドリングの基本

JavaScriptでは、try...catch構文を使用してエラーハンドリングを行います。基本的な例を以下に示します。

try {
    // エラーが発生する可能性のあるコード
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
} catch (error) {
    // エラーハンドリング
    console.error('Error fetching data:', error);
}

このコードは、fetchリクエストが失敗した場合にエラーメッセージをコンソールに出力します。

クラスを使ったエラーハンドリング

エラーハンドリングをクラスにまとめることで、コードの再利用性と保守性を向上させることができます。以下に、エラーハンドリングを行うクラスの例を示します。

class ErrorHandler {
    static handle(error) {
        console.error('An error occurred:', error);
        // 必要に応じてエラーメッセージをユーザーに表示する処理を追加
    }
}

class DataFetcher {
    constructor(baseUrl) {
        this.baseUrl = baseUrl;
    }

    async fetchData(endpoint) {
        try {
            const response = await fetch(`${this.baseUrl}${endpoint}`);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const data = await response.json();
            return data;
        } catch (error) {
            ErrorHandler.handle(error);
            throw error;
        }
    }

    async postData(endpoint, payload) {
        try {
            const response = await fetch(`${this.baseUrl}${endpoint}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(payload),
            });
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const data = await response.json();
            return data;
        } catch (error) {
            ErrorHandler.handle(error);
            throw error;
        }
    }
}

// インスタンスの作成
const fetcher = new DataFetcher('https://api.example.com');

// データの取得
fetcher.fetchData('/data')
    .then(data => console.log(data))
    .catch(error => console.error('Fetch error:', error));

// データの送信
fetcher.postData('/data', { key: 'value' })
    .then(data => console.log(data))
    .catch(error => console.error('Post error:', error));

クラスを使ったエラーハンドリングの利点

一貫性: エラーハンドリングのロジックを一箇所にまとめることで、一貫性のあるエラーメッセージを提供できます。
再利用性: エラーハンドリングのロジックを複数の場所で使い回すことができ、同じロジックを何度も書く必要がなくなります。
可読性: エラーハンドリングをクラスにまとめることで、コードが明確になり、可読性が向上します。
保守性: クラス内にエラーハンドリングの処理を集約することで、変更や拡張が容易になります。

実践例: ユーザーインターフェースへのエラーメッセージ表示

エラーが発生した際に、ユーザーにエラーメッセージを表示するクラスを作成します。

class UIErrorHandler {
    static displayError(message) {
        const errorElement = document.getElementById('error-message');
        errorElement.textContent = message;
        errorElement.style.display = 'block';
    }

    static hideError() {
        const errorElement = document.getElementById('error-message');
        errorElement.style.display = 'none';
    }
}

class EnhancedDataFetcher extends DataFetcher {
    async fetchData(endpoint) {
        try {
            UIErrorHandler.hideError();
            const data = await super.fetchData(endpoint);
            return data;
        } catch (error) {
            UIErrorHandler.displayError('Failed to fetch data. Please try again later.');
            throw error;
        }
    }

    async postData(endpoint, payload) {
        try {
            UIErrorHandler.hideError();
            const data = await super.postData(endpoint, payload);
            return data;
        } catch (error) {
            UIErrorHandler.displayError('Failed to send data. Please try again later.');
            throw error;
        }
    }
}

// インスタンスの作成
const enhancedFetcher = new EnhancedDataFetcher('https://api.example.com');

// エラーメッセージ表示用の要素を追加
document.body.innerHTML += '<div id="error-message" style="display:none;color:red;"></div>';

// データの取得
enhancedFetcher.fetchData('/data')
    .then(data => console.log(data))
    .catch(error => console.error('Fetch error:', error));

// データの送信
enhancedFetcher.postData('/data', { key: 'value' })
    .then(data => console.log(data))
    .catch(error => console.error('Post error:', error));

このコードは、エラーが発生した際にユーザーインターフェースにエラーメッセージを表示し、エラーが解消された後はメッセージを非表示にします。

次のセクションでは、クラスとブラウザAPIを組み合わせた具体的な応用例として、ToDoアプリの作成方法を紹介します。これにより、実践的なスキルを身につけることができます。

応用例：ToDoアプリの作成

JavaScriptのクラスとブラウザAPIを組み合わせて、シンプルなToDoアプリを作成します。このアプリでは、タスクの追加、削除、完了の管理を行います。ここで学ぶ内容は、実践的なプロジェクトで役立つスキルを提供します。

ToDoアプリの構成

ToDoアプリは、以下の機能を持ちます。

タスクの追加
タスクの削除
タスクの完了状態の切り替え
Local Storageを使用したタスクの保存と読み込み

HTMLの準備

まず、基本的なHTMLを用意します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo App</title>
    <style>
        .completed {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <h1>ToDo App</h1>
    <input type="text" id="task-input" placeholder="New Task">
    <button id="add-task-button">Add Task</button>
    <ul id="task-list"></ul>
    <div id="error-message" style="display:none;color:red;"></div>
    <script src="app.js"></script>
</body>
</html>

JavaScriptクラスの定義

次に、ToDoアプリのロジックを管理するクラスを定義します。

class Task {
    constructor(id, content, completed = false) {
        this.id = id;
        this.content = content;
        this.completed = completed;
    }
}

class TaskManager {
    constructor() {
        this.tasks = this.loadTasks();
    }

    addTask(content) {
        const id = Date.now().toString();
        const task = new Task(id, content);
        this.tasks.push(task);
        this.saveTasks();
        return task;
    }

    removeTask(id) {
        this.tasks = this.tasks.filter(task => task.id !== id);
        this.saveTasks();
    }

    toggleTaskCompletion(id) {
        const task = this.tasks.find(task => task.id === id);
        if (task) {
            task.completed = !task.completed;
            this.saveTasks();
        }
    }

    saveTasks() {
        localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }

    loadTasks() {
        const tasks = localStorage.getItem('tasks');
        return tasks ? JSON.parse(tasks) : [];
    }
}

UI操作の実装

次に、UIとTaskManagerクラスを連携させるコードを追加します。

document.addEventListener('DOMContentLoaded', () => {
    const taskManager = new TaskManager();
    const taskListElement = document.getElementById('task-list');
    const taskInputElement = document.getElementById('task-input');
    const addTaskButton = document.getElementById('add-task-button');
    const errorMessageElement = document.getElementById('error-message');

    function renderTasks() {
        taskListElement.innerHTML = '';
        taskManager.tasks.forEach(task => {
            const taskElement = document.createElement('li');
            taskElement.textContent = task.content;
            taskElement.dataset.id = task.id;
            if (task.completed) {
                taskElement.classList.add('completed');
            }
            taskElement.addEventListener('click', () => {
                taskManager.toggleTaskCompletion(task.id);
                renderTasks();
            });
            const deleteButton = document.createElement('button');
            deleteButton.textContent = 'Delete';
            deleteButton.addEventListener('click', (event) => {
                event.stopPropagation();
                taskManager.removeTask(task.id);
                renderTasks();
            });
            taskElement.appendChild(deleteButton);
            taskListElement.appendChild(taskElement);
        });
    }

    addTaskButton.addEventListener('click', () => {
        const taskContent = taskInputElement.value.trim();
        if (taskContent === '') {
            errorMessageElement.textContent = 'Task content cannot be empty!';
            errorMessageElement.style.display = 'block';
            return;
        }
        errorMessageElement.style.display = 'none';
        const newTask = taskManager.addTask(taskContent);
        renderTasks();
        taskInputElement.value = '';
    });

    renderTasks();
});

クラスを使ったToDoアプリの利点

構造の整理: クラスを使用することで、データの管理とUIの操作が明確に分離され、コードの構造が整理されます。
再利用性: タスク管理のロジックをクラスにまとめることで、他のプロジェクトでも再利用可能になります。
保守性: クラス内にロジックを集約することで、コードの変更や機能追加が容易になります。

この例では、JavaScriptのクラスとブラウザAPIを使用して、シンプルで拡張可能なToDoアプリを作成しました。次のセクションでは、理解を深めるための演習問題を提供します。これにより、実際に手を動かして学んだ内容を確認できます。

演習問題

ここでは、ToDoアプリの作成で学んだ内容を実際に試してみるための演習問題を提供します。これらの問題を通じて、JavaScriptのクラスやブラウザAPIの操作に対する理解を深めることができます。

演習問題 1: タスクの編集機能の追加

タスクの内容を編集できる機能を追加してください。タスクリストの各項目に「編集」ボタンを追加し、それをクリックするとタスクの内容を変更できるようにします。

ヒント

各タスク項目に「編集」ボタンを追加します。
「編集」ボタンがクリックされたときに、タスクの内容を入力するためのテキストフィールドを表示します。
新しい内容を入力して「保存」ボタンをクリックすると、タスクの内容が更新されるようにします。

演習問題 2: タスクの優先度設定

タスクに優先度を設定する機能を追加してください。各タスクに「高」「中」「低」の優先度を設定できるようにします。

ヒント

タスクのクラスに優先度のプロパティを追加します。
新しいタスクを追加するときに、優先度を選択できるドロップダウンメニューを追加します。
タスクリストに優先度を表示し、優先度に応じてタスクの表示スタイルを変更します（例：高優先度は赤、中優先度は黄色、低優先度は緑）。

演習問題 3: タスクのフィルタリング機能の追加

特定の条件に基づいてタスクをフィルタリングする機能を追加してください。例えば、未完了のタスクのみを表示する、特定の優先度のタスクのみを表示するなど。

ヒント

フィルタリング条件を選択するためのUI要素（例：ドロップダウンメニュー、チェックボックス）を追加します。
フィルタリング条件に基づいてタスクを表示するためのメソッドを追加します。
フィルタリング条件が変更されたときに、タスクリストを再描画します。

演習問題 4: タスクの完了状態の保存

タスクの完了状態をLocal Storageに保存する機能を追加してください。ページを再読み込みした後でも、タスクの完了状態が保持されるようにします。

ヒント

タスクの完了状態が変更されたときに、Local Storageにタスクの状態を保存します。
ページを再読み込みしたときに、Local Storageからタスクの状態を読み込み、表示を更新します。

演習問題 5: ダークモードの実装

アプリ全体にダークモードを追加してください。ダークモードとライトモードを切り替えるためのボタンを作成し、ユーザーが選択したモードをLocal Storageに保存します。

ヒント

ダークモード用のCSSスタイルを定義します。
ダークモードとライトモードを切り替えるためのボタンを追加します。
ユーザーが選択したモードをLocal Storageに保存し、ページの読み込み時に適用します。

演習問題のまとめ

これらの演習問題を通じて、JavaScriptのクラスやブラウザAPIの操作に関するスキルを実践的に学ぶことができます。各問題に挑戦し、コードを書いて動作を確認することで、理解を深めることができるでしょう。

次のセクションでは、これまで学んだ内容を総括し、今後の学習の指針を提供します。

まとめ

本記事では、JavaScriptのクラスを使ったブラウザAPIの操作方法について詳しく解説しました。基本的なクラスの構文から始まり、DOM操作、イベントハンドリング、Fetch APIによるデータ取得、Local Storageの操作、アニメーション制御、エラーハンドリング、そして具体的な応用例としてToDoアプリの作成方法を紹介しました。

クラスを使うことで、コードの再利用性、可読性、保守性が大幅に向上し、複雑なアプリケーションの管理が容易になります。特に、ToDoアプリの作成を通じて、クラスの利点を実感できたことでしょう。

今後の学習では、さらに複雑なプロジェクトに挑戦し、JavaScriptとブラウザAPIの知識を深めることをお勧めします。また、この記事の演習問題に取り組むことで、実践的なスキルを磨くことができます。

この記事が、JavaScriptクラスとブラウザAPIの効果的な利用方法を理解し、実際の開発に活用するための助けとなれば幸いです。