多態性をReactで説明してみる（頑張る）

「多態性（ポリモーフィズム）」 と聞いて思い浮かぶ言葉が
ふわふわっとした内容なので、
叩き込ませよう🗿と思ったのが　今回記事を書いた動機です。

多態性　とは？

ｶﾞｰｰｰｯと並ぶ処理の中で、関数を呼び出すとき。
たとえば「A」という関数を呼び出す処理を書いた時に、
処理によっては異なる動作をするようなことを指します。

const ramen = obj.cook(); // 処理によって出てくるラーメンが変わるよ！

以下の記事がすごく分かりやすいため、ご参照くださいませ🤗
https://engineer-life.dev/polymorphism/

これ、自分で考えてみたときに
「なんとなく分かるけど、なんでそれができるのか分からない」となり
理解度危うし　となったため・・・

習うより慣れよ　ということで
Reactを使いつつ多態性を学んでいきます🥸

Reactってなに？

前入門編的な記事を書いたよ！
アプリの作り方などは↓を見てみてねん👍
https://zenn.dev/collabostyle/articles/55d04888b8d805

書いてみる

先の例えでは、こんなサンプルを書きました。

const ramen = obj.cook(); // 処理によって出てくるラーメンが変わるよ！

ラーメン好きですか？
わたしは昨日の昼にラーメンを食べましたが、
今日の晩御飯もラーメンを選択するぐらい好きです🍜🍜🍜

安いし、さっと食べられるし、家でも店でも食べられるので
結構頻繁にラーメンを食しています。

そんなラーメンですが、「ラーメン」といっても色んな味がありますよね？
醤油、塩、味噌、とんこつ、派生してとんこつ醤油、、、

挙げだしたらキリがなさそうなぐらい実は種類豊富なラーメンですが、
どれもこれも総じて言えるのは「ラーメンなんだよ」ってことです。

スープ作って、麺ゆでて、盛り付けて食べるのはどのラーメンでも同じなのです。
※もっと細かい行程あるかもですが、スープから作ったことはないのでｺﾞﾒﾝﾅｻｲ

なので、醤油・塩・味噌ラーメンでも
実際やることは「スープ作る」「麺ゆでる」「盛り付ける」のは同じです。

でも、お客さんはどのラーメンを注文するのか分かりません。

if(order === '塩ラーメン') {
   // 塩ラーメン作る処理
} else if(order === '醤油ラーメン') {
   // 醤油ラーメン作る処理
} else if(order === '味噌ラーメン') {
   // 味噌ラーメン作る処理
}

こうやって書いてたら
めっちゃ冗長ですよね🫥

1つの処理で完結したくないですか？
これを多態性で実現していきましょう☆

インターフェイスをつくるよ

export interface RamenInterface {
    cook(): string;
}

すごい雑だと思うのですが
こんな感じにインターフェースを作ります。

今回は多態性を学ぶことをメインにしているため、
調理したら作ったラーメンの名前を返却するようにしました。

（たぶん真面目にラーメンを作るならこんな感じになると思います↓）

export interface RamenInterface {
    makeSoup(): Soup;          // スープを作る
    boilNoodles(): Noodles;    // 麺をゆでる
    serve(): Ramen;            // 盛り付ける
}

これを実装したクラスを、各ラーメンごとに作っていきます。

sauce.ts

import { RamenInterface } from "../../interfaces/ramen";

export class Sauce implements RamenInterface {
    cook(): string {
        return '醤油ラーメン';
    }
}

呼び出すよ

作ったらいよいよ多態性で呼び出しましょう！
まずは配列に各ラーメンのクラスを定義します。

const ramens = [new Sauce(), new Salt(), new Miso()];

そうしたらfor文を書きます。

const ramens = [new Sauce(), new Salt(), new Miso()];
for(let i = 0; i < ramens.length; i++) {
    // ここにポリモーフィズムだよ！
}

この中で関数を呼び出すと・・・？

const ramens = [new Sauce(), new Salt(), new Miso()];
for(let i = 0; i < ramens.length; i++) {
    const ramenObj = ramens[i];
    const ramen = ramenObj.cook();
}

はい。関数の呼び出しは1つなのですが
ループが回るごとに「醤油ラーメン」「塩ラーメン」「味噌ラーメン」と
できるラーメンが異なる処理が完成しました🍜🍜🍜

npm run してみたけど成功してる！

まとめ

多態性（ポリモーフィズム）について書いてみました。
いかがだったでしょうか🐣

ここから余談です。

似たような（？）お話に「クラスの概念」も言えると思いますが・・・
※クラスは設計図、インスタンスは実態　というヤツ

これはRubyで解説している以下の記事が分かりやすいので
見てみてくださいね👍

https://pikawaka.com/ruby/class

クラスも多態性も、オブジェクト指向を語る上では基礎となってくる部分と思います。
基礎だからこそ、理解度マシマシ🍜で学んでいきたいですね！

ではまた🔉