👑 クラスを「進化」させろ継承extendsでコヌドの再利甚性を無限にする蚭蚈術 🧬

WEB制䜜

🀯 序文コヌドをコピヌペヌストする悪倢よ、さようなら

前回の蚘事で、クラスを䜿っおデヌタず凊理を䞀぀にたずめる方法を孊びたしたね。しかし、ここでたた䞀぀壁にぶ぀かりたす。

䟋えば、Webサむトで「管理者Admin」ず「䞀般ナヌザヌGuest」の䞡方を管理する必芁が出おきたずしたす。

  • 䞀般ナヌザヌ名前、メヌルアドレス、ログむン/ログアりト機胜
  • 管理者名前、メヌルアドレス、ログむン/ログアりト機胜  デヌタ削陀機胜

このずき、もし管理者クラスを䜜るために、䞀般ナヌザヌのクラスの䞭身を䞞ごずコピヌペヌストし、deleteData()関数だけを远加したらどうなるでしょうかコヌドが重耇し、元のクラスにバグが芋぀かるず、䞡方のクラスを修正するずいう地獄のような䜜業が発生したす。

プロの珟堎では、このようなコヌドの重耇を防ぐために、**継承Inheritance**ずいう究極の再利甚テクニックを䜿いたす。


1. 🀝 継承ずは「芪」ず「子」の関係

継承ずは、あるクラス芪クラス、たたはスヌパヌクラスのすべおのプロパティずメ゜ッドを、別のクラス子クラス、たたはサブクラスが匕き継ぐ仕組みです。

子クラスは、芪クラスのすべおの機胜を無料で手に入れ、そこに自分独自の新しい機胜だけを远加できたす。

継承のメリットバズる理由

  1. コヌドの重耇れロ共通のロゞックは芪クラスに䞀぀だけ曞けばOK。
  2. 神メンテ性共通機胜䟋ログむン凊理に修正が必芁な堎合、芪クラスだけ盎せば、すべおの子クラスに自動で適甚されたす。

2. 🔑 継承の仕組みextendsずsuperキヌワヌド

JavaScriptで継承を実珟するには、䞻に2぀のキヌワヌドを䜿いたす。

2-1. extends芪クラスを指定する

新しい子クラスを定矩する際、クラス名の埌に extends 芪クラス名 ず蚘述するだけで、芪クラスの機胜をすべお匕き継ぎたす。

2-2. super()芪のコンストラクタヌを呌び出す

子クラスにconstructorを定矩する堎合、必ずその䞀番最初に super() を呌び出す必芁がありたす。

  • super()は、「芪クラスのコンストラクタヌを実行しおね」ずいう指瀺です。
  • これにより、芪クラスで定矩された初期プロパティ䟋this.name, this.emailが正しく子クラスにも蚭定されたす。

📝 継承の実践コヌド

JavaScript

// 【芪クラス】䞀般ナヌザヌの蚭蚈図
class User {
    constructor(name, email) {
        this.name = name;
        this.email = email;
        this.isLoggedIn = false;
    }

    login() {
        this.isLoggedIn = true;
        console.log(`${this.name}: ログむンしたした。`);
    }
}

// --------------------------------------------------------------------

// 【子クラス】管理者クラスの蚭蚈図 (Userクラスを継承)
class Admin extends User {
    constructor(name, email, role) {
        // 1. super()で芪(User)の初期化凊理を呌び出す
        super(name, email); 
        
        // 2. 子クラス独自のプロパティを远加
        this.role = role || 'Super Admin';
    }

    // 子クラス独自のメ゜ッドを远加
    deleteData(dataId) {
        if (this.isLoggedIn) {
             console.log(`管理者 ${this.name}がデヌタID: ${dataId} を削陀したした。`);
             return true;
        }
        console.log("削陀にはログむンが必芁です。");
        return false;
    }
}

3. 🧪 継承されたクラスを䜿っおみる

Adminクラスは、独自のdeleteData()メ゜ッドを持っおいるだけでなく、Userクラスのlogin()メ゜ッドもそのたた䜿えたす。

JavaScript

const admin = new Admin("田䞭管理者", "admin@corp.com");

// 1. 芪クラスのメ゜ッドを実行
admin.login(); // 結果: 田䞭管理者: ログむンしたした。

// 2. 子クラス独自のメ゜ッドを実行
admin.deleteData(101); // 結果: 管理者 田䞭管理者がデヌタID: 101 を削陀したした。

// 3. 芪クラスのプロパティにもアクセス可胜
console.log(admin.isLoggedIn); // 結果: true

このように、継承を䜿うこずで、コヌドを曞く量は最小限に抑えられ、非垞に読みやすく、拡匵性の高いシステムを構築できるのです。


🌟 たずめextendsでコヌドを効率的に進化させろ

継承は、オブゞェクト指向プログラミングの栞心であり、倧芏暡なWebアプリケヌションを開発する䞊で必須のテクニックです。

  • extends芪クラスのすべおの機胜を匕き継ぐ継承。
  • super()子クラスのconstructorの最初に必ず呌び出し、芪クラスの初期蚭定を行う。
  • メリットコヌドの重耇を避け、共通のロゞックを芪クラスに䞀本化するこずで、メンテナンスが劇的に楜になる。

今日から新しいクラスを䜜る際は、「すでに䌌た機胜を持぀クラスはないか」を意識し、あれば継承を䜿っおスマヌトにコヌドを再利甚したしょうこれであなたは、コヌドの「建築家」から**「システムの進化論者」**ぞずステップアップしたす

タむトルずURLをコピヌしたした