JavaScriptのプロトタイプチェーンと継承の方法を解説

JavaScriptの世界で重要な概念である「プロトタイプチェーン」と「継承」について、初心者の方にもわかりやすく解説していきます。実践的なコード例を交えながら、基礎から応用まで段階的に学んでいきましょう。

プロトタイプとは何か
1. プロトタイプチェーンの基本
継承の基本的な実装方法
1. プロトタイプを使った継承
クラス構文を使った最新の継承方法
1. クラス構文の基本
2. プロトタイプチェーンの実践的な使い方
  1. メソッドの追加と上書き
プロトタイプチェーンの実用的なパターン
1. 共通機能の実装
プロトタイプチェーンの応用と実践的な使い方
1. プライベートプロパティとカプセル化
2. 実践的な継承パターン
  1. イベント処理の実装例
プロトタイプチェーンのパフォーマンスと注意点
1. メモリ効率の最適化
2. 継承の深さに関する注意点
まとめ

プロトタイプとは何か

JavaScriptは「プロトタイプベース」のプログラミング言語です。これは、オブジェクトが他のオブジェクトから機能を引き継ぐことができる仕組みを持っているということです。

プロトタイプは、簡単に言えば「設計図」のようなものです。新しく作られるオブジェクトに、どのようなメソッド（機能）を持たせるかを決めることができます。

プロトタイプチェーンの基本

プロトタイプチェーンは、オブジェクトのプロパティやメソッドを探す時の「検索経路」のようなものです。以下の簡単な例で見てみましょう：

function Person(name) {
    this.name = name;
}

Person.prototype.greet = function() {
    console.log(`こんにちは、${this.name}です！`);
};

const alice = new Person('アリス');
alice.greet(); // 出力: こんにちは、アリスです！

このコードでは、Personというオブジェクトの設計図（コンストラクタ関数）を作成し、そのprototypeにgreetというメソッドを追加しています。

継承の基本的な実装方法

JavaScriptでの継承には、いくつかの方法があります。まずは基本的な実装方法から見ていきましょう。

プロトタイプを使った継承

function Animal(name) {
    this.name = name;
}

Animal.prototype.makeSound = function() {
    console.log('何かの音を出します');
};

function Dog(name) {
    Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
    console.log(`${this.name}がワンワン！と鳴きました`);
};

const pochi = new Dog('ポチ');
pochi.makeSound(); // 何かの音を出します
pochi.bark(); // ポチがワンワン！と鳴きました

この例では、Animalという基本クラスからDogというクラスを作成しています。これは実際の開発でよく使われるパターンで、共通の機能を持つ基本クラスから、より具体的な機能を持つクラスを作成する際に使用されます。

クラス構文を使った最新の継承方法

ES2015（ES6）以降では、より直感的なclass構文を使って継承を実装できるようになりました。

クラス構文の基本

class Animal {
    constructor(name) {
        this.name = name;
    }

    makeSound() {
        console.log(`${this.name}が何かの音を出します`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }

    bark() {
        console.log(`${this.breed}の${this.name}がワンワン！と鳴きました`);
    }
}

const pochi = new Dog('ポチ', '柴犬');
pochi.makeSound();
pochi.bark();

これは現代のJavaScriptでよく見かける書き方です。特にReactやVueなどのフレームワークを使う際によく使用されます。

プロトタイプチェーンの実践的な使い方

メソッドの追加と上書き

class Vehicle {
    constructor(type) {
        this.type = type;
        this.isRunning = false;
    }

    start() {
        this.isRunning = true;
        console.log(`${this.type}が動き始めました`);
    }

    stop() {
        this.isRunning = false;
        console.log(`${this.type}が停止しました`);
    }
}

class Car extends Vehicle {
    constructor(brand, model) {
        super('自動車');
        this.brand = brand;
        this.model = model;
    }

    // メソッドのオーバーライド
    start() {
        super.start();  // 親クラスのメソッドも実行
        console.log(`${this.brand} ${this.model}のエンジンが始動しました`);
    }

    // 新しいメソッドの追加
    honk() {
        console.log('ビビビッ！');
    }
}

const myCar = new Car('トヨタ', 'プリウス');
myCar.start();
myCar.honk();
myCar.stop();

プロトタイプチェーンの実用的なパターン

共通機能の実装

実際の開発では、複数のクラスで共通の機能を持たせたい場合があります。以下は、ログ機能を持つミックスインの例です：

const LoggerMixin = {
    log(message) {
        console.log(`[${new Date().toISOString()}] ${message}`);
    },
    error(message) {
        console.error(`[ERROR] ${message}`);
    }
};

class UserService {
    constructor() {
        Object.assign(this, LoggerMixin);
    }

    createUser(username) {
        this.log(`新しいユーザー ${username} を作成します`);
        // ユーザー作成のロジック
    }
}

const userService = new UserService();
userService.createUser('山田太郎');

プロトタイプチェーンの応用と実践的な使い方

プライベートプロパティとカプセル化

最新のJavaScriptでは、プライベートプロパティを使ってデータを保護することができます。これは実際の開発でよく使用される重要な機能です。

class BankAccount {
    #balance = 0;  // プライベートプロパティ

    constructor(accountHolder) {
        this.accountHolder = accountHolder;
    }

    deposit(amount) {
        if (amount > 0) {
            this.#balance += amount;
            console.log(`${amount}円を入金しました。残高: ${this.#balance}円`);
        }
    }

    getBalance() {
        return this.#balance;
    }
}

const account = new BankAccount('山田太郎');
account.deposit(10000);
console.log(account.getBalance());
// account.#balance にはアクセスできない

実践的な継承パターン

イベント処理の実装例

Webアプリケーションでよく使用されるイベント処理の実装例を見てみましょう：

class EventEmitter {
    constructor() {
        this.events = {};
    }

    on(eventName, callback) {
        if (!this.events[eventName]) {
            this.events[eventName] = [];
        }
        this.events[eventName].push(callback);
    }

    emit(eventName, data) {
        if (this.events[eventName]) {
            this.events[eventName].forEach(callback => callback(data));
        }
    }
}

class ChatRoom extends EventEmitter {
    constructor() {
        super();
        this.messages = [];
    }

    sendMessage(user, text) {
        const message = {
            user,
            text,
            timestamp: new Date()
        };
        this.messages.push(message);
        this.emit('newMessage', message);
    }
}

const chatRoom = new ChatRoom();
chatRoom.on('newMessage', message => {
    console.log(`${message.user}: ${message.text}`);
});

chatRoom.sendMessage('田中さん', 'こんにちは！');

プロトタイプチェーンのパフォーマンスと注意点

メモリ効率の最適化

プロトタイプチェーンを使用すると、メモリ使用量を効率化できます。以下は実践的な例です：

// 非効率な方法
class BadEmployee {
    constructor(name) {
        this.name = name;
        // メソッドがインスタンスごとに作成される
        this.greet = function() {
            console.log(`こんにちは、${this.name}です`);
        };
    }
}

// 効率的な方法
class GoodEmployee {
    constructor(name) {
        this.name = name;
    }
    // プロトタイプメソッドは全インスタンスで共有される
    greet() {
        console.log(`こんにちは、${this.name}です`);
    }
}