JavaScriptクラスの実践パターン｜APIクライアント・シングルトン・ファクトリ

// 従来のプロトタイプベースの実装
function User(name, email) {
    this.name = name;
    this.email = email;
}

User.prototype.getName = function() {
    return this.name;
};

// クラス構文による実装
class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
    }

    getName() {
        return this.name;
    }

    // getter/setterの活用
    get displayName() {
        return `${this.name} <${this.email}>`;
    }

    set displayName(value) {
        [this.name, this.email] = value.split(' ');
    }
}

class UserService {
    // プライベートフィールド（新しい構文）
    #apiKey;
    #baseUrl;

    constructor(apiKey) {
        this.#apiKey = apiKey;
        this.#baseUrl = 'https://api.example.com';
    }

    async fetchUser(userId) {
        const response = await fetch(
            `${this.#baseUrl}/users/${userId}`,
            {
                headers: {
                    'Authorization': `Bearer ${this.#apiKey}`
                }
            }
        );
        return response.json();
    }
}

class APIClient {
    static #instance;
    #retryCount = 3;

    constructor(config = {}) {
        if (APIClient.#instance) {
            return APIClient.#instance;
        }

        this.baseURL = config.baseURL || 'https://api.example.com';
        this.timeout = config.timeout || 5000;
        
        APIClient.#instance = this;
    }

    // シングルトンパターンの実装
    static getInstance(config) {
        if (!APIClient.#instance) {
            new APIClient(config);
        }
        return APIClient.#instance;
    }

    async get(endpoint, options = {}) {
        return this.#request('GET', endpoint, options);
    }

    async post(endpoint, data, options = {}) {
        return this.#request('POST', endpoint, {
            ...options,
            body: JSON.stringify(data)
        });
    }

    // プライベートメソッドでリクエスト処理を実装
    async #request(method, endpoint, options) {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => {
            controller.abort();
        }, this.timeout);

        try {
            const response = await fetch(
                `${this.baseURL}${endpoint}`,
                {
                    method,
                    headers: {
                        'Content-Type': 'application/json',
                        ...options.headers
                    },
                    signal: controller.signal,
                    ...options
                }
            );

            if (!response.ok) {
                throw new APIError(
                    'Request failed',
                    response.status
                );
            }

            return response.json();
        } catch (error) {
            if (error.name === 'AbortError') {
                throw new APIError('Request timeout');
            }
            throw error;
        } finally {
            clearTimeout(timeoutId);
        }
    }
}

// 使用例
const api = APIClient.getInstance({
    baseURL: 'https://api.myapp.com',
    timeout: 10000
});

const user = await api.get('/users/1');

// 基底クラス
class BaseError extends Error {
    constructor(message, statusCode) {
        super(message);
        this.name = this.constructor.name;
        this.statusCode = statusCode;
    }

    toJSON() {
        return {
            name: this.name,
            message: this.message,
            statusCode: this.statusCode
        };
    }
}

// 具体的なエラークラス
class APIError extends BaseError {
    constructor(message, statusCode = 500) {
        super(message, statusCode);
        this.timestamp = new Date();
    }

    logError() {
        console.error(
            `[${this.timestamp.toISOString()}] ${this.message}`
        );
    }
}

class UserList {
    constructor() {
        this.users = [];
        
        // BAD: thisが失われる
        document.getElementById('loadButton')
            .addEventListener('click', function() {
                this.loadUsers();  // thisがundefined
            });

        // GOOD: アロー関数を使用
        document.getElementById('loadButton')
            .addEventListener('click', () => {
                this.loadUsers();  // thisが正しく束縛される
            });
    }

    loadUsers() {
        // ユーザー読み込み処理
    }
}

class EventManager {
    constructor() {
        this.handlers = new Map();
    }

    addEventListener(event, handler) {
        if (!this.handlers.has(event)) {
            this.handlers.set(event, new Set());
        }
        this.handlers.get(event).add(handler);
    }

    removeEventListener(event, handler) {
        const handlers = this.handlers.get(event);
        if (handlers) {
            handlers.delete(handler);
            if (handlers.size === 0) {
                this.handlers.delete(event);
            }
        }
    }

    // クリーンアップメソッドの提供
    destroy() {
        this.handlers.clear();
    }
}

interface APIConfig {
    baseURL: string;
    timeout?: number;
    headers?: Record<string, string>;
}

class APIClient {
    private static instance: APIClient;
    private readonly config: Required<APIConfig>;

    private constructor(config: APIConfig) {
        this.config = {
            timeout: 5000,
            headers: {},
            ...config
        };
    }

    static getInstance(config: APIConfig): APIClient {
        if (!APIClient.instance) {
            APIClient.instance = new APIClient(config);
        }
        return APIClient.instance;
    }
}