JavaScript - 多様性

こんにちは、未来のJavaScriptの魔法使いさんたち！今日は、JavaScriptの多様性の世界に興味深い旅を(start)します。その言葉が怖そうに聞こえるかもしれませんが、このレッスンの終わりまでに、あなたはプロのように多様性を操ることができるでしょう！

JavaScriptにおける多様性

基本から始めましょう。多様性は、ギリシャ語から来た派手な言葉で、「多くの形」を意味します。プログラミングでは、オブジェクトが複数の形や行動を取りうる能力を指します。カメレオンが異なる環境に適応するために色を変える 것を思い浮かべてください。

JavaScriptでは、多様性により、異なる種類のオブジェクトを单一のインターフェースで表現することができます。テレビ、DVDプレイヤー、サウンドシステムをすべて同一のボタンで操作できるユニバーサルリモコンのようなものです。

以下にこの概念を説明する簡単な例を示します：

function makeSound(animal) {
console.log(animal.sound());
}

let dog = {
sound: function() {
return "ワンワン！";
}
};

let cat = {
sound: function() {
return "メイメイ！";
}
};

makeSound(dog); // 出力: ワンワン！
makeSound(cat); // 出力: メイメイ！

この例では、makeSound関数は異なる動物オブジェクトと動作します。dogとcatはどちらもsoundメソッドを持っていますが、異なる出力を生成します。これが多様性の作用です！

メソッドのオVERRIDING

多様性の鍵となる側面の1つはメソッドのオVERRIDINGです。これは、子クラスが親クラスで既に定義されているメソッドに対して特定の実装を提供する場合です。

以下に例を示します：

class Animal {
makeSound() {
return "動物は音を立てます";
}
}

class Dog extends Animal {
makeSound() {
return "犬は吠えます";
}
}

class Cat extends Animal {
makeSound() {
return "猫は鳴きます";
}
}

let animal = new Animal();
let dog = new Dog();
let cat = new Cat();

console.log(animal.makeSound()); // 出力: 動物は音を立てます
console.log(dog.makeSound());    // 出力: 犬は吠えます
console.log(cat.makeSound());    // 出力: 猫は鳴きます

ここでは、AnimalクラスにmakeSoundメソッドがあります。DogクラスとCatクラスはAnimalを継承し、それぞれmakeSoundメソッドを自身の実装でオVERRIDEしています。これにより、それぞれの動物は独自の音を発しながらもAnimalの一部 remain できます。

例

多様性の理解を深めるために、さらに多くの例を見てみましょう。

例1: 形の計算機

思い描いてください、形の計算機を構築しています。同じメソッド名で異なる形の面積を計算したいと思います。

class Shape {
calculateArea() {
return 0;
}
}

class Circle extends Shape {
constructor(radius) {
super();
this.radius = radius;
}

calculateArea() {
return Math.PI * this.radius * this.radius;
}
}

class Rectangle extends Shape {
constructor(width, height) {
super();
this.width = width;
this.height = height;
}

calculateArea() {
return this.width * this.height;
}
}

function printArea(shape) {
console.log("面積は: " + shape.calculateArea());
}

let circle = new Circle(5);
let rectangle = new Rectangle(4, 6);

printArea(circle);    // 出力: 面積は: 78.53981633974483
printArea(rectangle); // 出力: 面積は: 24

この例では、基本クラスShapeとその派生クラスCircleとRectangleがあります。各クラスは独自のcalculateAreaメソッドを実装しています。printArea関数はあらゆる形オブジェクトで動作し、多様性を示しています。

例2: 従業員賃金システム

簡単な従業員賃金システムを作成して、さらに多様性を説明します：

class Employee {
constructor(name, salary) {
this.name = name;
this.salary = salary;
}

calculateBonus() {
return this.salary * 0.1;
}
}

class Manager extends Employee {
calculateBonus() {
return this.salary * 0.2;
}
}

class Developer extends Employee {
calculateBonus() {
return this.salary * 0.15;
}
}

function printBonus(employee) {
console.log(`${employee.name}のボーナスは: $${employee.calculateBonus()}`);
}

let john = new Employee("John", 50000);
let jane = new Manager("Jane", 70000);
let bob = new Developer("Bob", 60000);

printBonus(john); // 出力: Johnのボーナスは: $5000
printBonus(jane); // 出力: Janeのボーナスは: $14000
printBonus(bob);  // 出力: Bobのボーナスは: $9000

この例では、異なる従業員タイプが異なるボーナス計算ルールを持っています。printBonus関数はあらゆる従業員オブジェクトで動作し、多様性を示しています。

JavaScriptで多様性を使用する利点

多様性の動作を見てきましたので、なぜそれが素晴らしいのか話しましょう：

コードの再利用性：多様性により、より一般的で再利用可能なコードを書くことができます。私たちのprintAreaとprintBonus関数は、それぞれ形または従業員オブジェクトで動作できます。
柔軟性：新しいオブジェクトタイプを追加する際に既存のコードを変更する必要が少なく、簡単に追加できます。例えば、Triangleクラスを形の計算機に追加しても、printArea関数を修正する必要はありません。
保守性：多様性により、よりきれいで整理されたコードを保守しやすく、拡張も容易です。
抽象化：オブジェクトが何をするかではなく、どのようにするかについて集中できるように抽象化を図ります。

以下に、私たちの例で使用した主要なメソッドをまとめた表を示します：

メソッド	説明
`calculateArea()`	形の面積を計算する
`calculateBonus()`	従業員のボーナスを計算する
`makeSound()`	動物の音を返す
`sound()`	動物の音を返す（オブジェクトリテラルの例）

若いパダワンたち、多様性はあなたのコードボックスの中でスイスアーミーナイフのようです。それは多様で、強力で、あなたのコードをより洗練されたものにします。練習を続け、そして間もなくJavaScriptの達人になるでしょう！

Credits: Image by storyset

前のチュートリアル:

JavaScript - 抽象

次のチュートリアル:

JavaScript - デストラクチャリングアサインメント