CodeGym /コース /Frontend SELF JA /OOPの実用的な例

OOPの実用的な例

Frontend SELF JA
レベル 40 , レッスン 5
使用可能

12.1 ウェブアプリケーションでのユーザー管理

JavaScriptのオブジェクト指向プログラミング(OOP)は、複雑でスケーラブルで簡単に維持できるアプリケーションを作成できるんだ。クラスや継承、カプセル化、ポリモーフィズムを含む、JavaScriptでのOOPの実用例をいくつか見てみよう。

ユーザー管理のためのウェブアプリケーションを開発しているとしよう。UserAdminGuestのような異なるタイプのユーザーのクラスを作って、継承を使って特化したクラスを作ることができる。

説明:

  • Userクラスはloginlogoutメソッドを含んでいる
  • AdminクラスはUserを継承し、deleteUserメソッドを追加している
  • GuestクラスはUserを継承し、requestAccessメソッドを追加している
  • AdminGuestクラスのインスタンスは、自分のクラスと基底クラスのメソッドを使っている

コード:

JavaScript
    
      class User {
        constructor(username, email) {
          this.username = username;
          this.email = email;
        }

        login() {
          console.log(`${this.username} がログインしました。`);
        }

        logout() {
          console.log(`${this.username} がログアウトしました。`);
        }
      }

      class Admin extends User {
        constructor(username, email) {
          super(username, email);
          this.role = 'admin';
        }

        deleteUser(user) {
          console.log(`${this.username} がユーザー ${user.username} を削除しました。`);
        }
      }

      class Guest extends User {
        constructor(username, email) {
          super(username, email);
          this.role = 'guest';
        }

        requestAccess() {
          console.log(`${this.username} がアクセスを求めました。`);
        }
      }

      const admin = new Admin('adminUser', 'admin@example.com');
      const guest = new Guest('guestUser', 'guest@example.com');

      admin.login(); // "adminUser がログインしました。"
      admin.deleteUser(guest); // "adminUser がユーザー guestUser を削除しました。"
      admin.logout(); // "adminUser がログアウトしました。"

      guest.login(); // "guestUser がログインしました。"
      guest.requestAccess(); // "guestUser がアクセスを求めました。"
      guest.logout(); // "guestUser がログアウトしました。"
    
  

12.2 オンラインストアの商品管理

この例では、ProductElectronicsClothingなど、オンラインストアのさまざまなタイプの商品を表すクラスを作るよ。calculateDiscountメソッドのポリモーフィズムも実装する。

説明:

  • ProductクラスはcalculateDiscountメソッドを持っていて、デフォルトで10%の割引を計算する
  • ElectronicsクラスはcalculateDiscountメソッドをオーバーライドし、電子機器に20%の割引を提供する
  • ClothingクラスはcalculateDiscountメソッドをオーバーライドし、衣類に15%の割引を提供する
  • ElectronicsClothingクラスのインスタンスは、自分のcalculateDiscountメソッドを使って割引を計算する

コード:

JavaScript
    
      class Product {
        constructor(name, price) {
          this.name = name;
          this.price = price;
        }

        calculateDiscount() {
          return this.price * 0.1; // デフォルト10%割引
        }

        display() {
          console.log(`${this.name} - $${this.price.toFixed(2)}`);
        }
      }

      class Electronics extends Product {
        constructor(name, price, brand) {
          super(name, price);
          this.brand = brand;
        }

        calculateDiscount() {
          return this.price * 0.2; // 電子機器に対して20%割引
        }
      }

      class Clothing extends Product {
        constructor(name, price, size) {
          super(name, price);
          this.size = size;
        }

        calculateDiscount() {
          return this.price * 0.15; // 衣類に対して15%割引
        }
      }

      const laptop = new Electronics('Laptop', 1000, 'BrandX');
      const tshirt = new Clothing('T-Shirt', 20, 'M');

      laptop.display(); // "Laptop - $1000.00"
      console.log(`Discount: $${laptop.calculateDiscount().toFixed(2)}`); // "Discount: $200.00"

      tshirt.display(); // "T-Shirt - $20.00"
      console.log(`Discount: $${tshirt.calculateDiscount().toFixed(2)}`); // "Discount: $3.00"
    
  

12.3: ライブラリ管理

この例では、BookMagazineLibraryなど、ライブラリを管理するためのクラスを作成するよ。そして、ライブラリにアイテムを追加したり削除したりするためのメソッドを実装する。

説明:

  • BookMagazineクラスはLibraryItemクラスを継承し、displayメソッドをオーバーライドする
  • Libraryクラスはライブラリアイテムのコレクションを管理し、addItemremoveItemdisplayItemsメソッドを提供する
  • BookMagazineクラスのインスタンスはライブラリに追加され、削除され、それらの情報はdisplayメソッドを使用して表示される

コード:

JavaScript
    
      class LibraryItem {
        constructor(title, year) {
          this.title = title;
          this.year = year;
        }

        display() {
          console.log(`${this.title} (${this.year})`);
        }
      }

      class Book extends LibraryItem {
        constructor(title, year, author) {
          super(title, year);
          this.author = author;
        }

        display() {
          console.log(`${this.title} by ${this.author} (${this.year})`);
        }
      }

      class Magazine extends LibraryItem {
        constructor(title, year, issueNumber) {
          super(title, year);
          this.issueNumber = issueNumber;
        }

        display() {
          console.log(`${this.title} - Issue ${this.issueNumber} (${this.year})`);
        }
      }

      class Library {
        constructor() {
          this.items = [];
        }

        addItem(item) {
          this.items.push(item);
          console.log(`Added: ${item.title}`);
        }

        removeItem(title) {
          this.items = this.items.filter(item => item.title !== title);
          console.log(`Removed: ${title}`);
        }

        displayItems() {
          this.items.forEach(item => item.display());
        }
      }

      const library = new Library();

      const book = new Book('JavaScript: The Good Parts', 2008, 'Douglas Crockford');
      const magazine = new Magazine('JavaScript Weekly', 2021, 450);

      library.addItem(book); // "Added: JavaScript: The Good Parts"
      library.addItem(magazine); // "Added: JavaScript Weekly"

      library.displayItems();
      // "JavaScript: The Good Parts by Douglas Crockford (2008)"
      // "JavaScript Weekly - Issue 450 (2021)"

      library.removeItem('JavaScript Weekly'); // "Removed: JavaScript Weekly"
      library.displayItems(); // "JavaScript: The Good Parts by Douglas Crockford (2008)"
    
  
1
アンケート/クイズ
継承とポリモーフィズム、レベル 40、レッスン 5
使用不可
継承とポリモーフィズム
継承とポリモーフィズム
コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION