Vanilla JSでタグ付きユニオン風の不変オブジェクトを作る

こちらの記事は、NEアドベントカレンダー6日目の記事になります。

はじめに

趣味とかでwebサイトをつくることがあるんですが、TypeScriptとかまず使わない。
導入のコストが高いし、作成者以外がメンテをする場合にできなくなる可能性があります。
それでも、typeみたいなものとか、不変なオブジェクトを使いたいなと思うことはあります。
その時に自分が参考にするつもりのメモみたいなものを書きます。

ソースコード

補足などは後述

// どちらかの型を選ぶ
const ALLOWED_TYPES = ['JPY', 'USD'];

// 通貨データ作成関数
const createCurrency = (type, amount) =>  {
    if (!ALLOWED_TYPES.includes(type)) {
        throw new Error(`Invalid type: ${type}. Allowed types are: ${ALLOWED_TYPES.join(', ')}`);
    }
    return Object.freeze({ type, amount });
}

// amountを通貨単位付きで表示
const displayAmount = (currency) => {
    if(currency.type === 'JPY') {
        console.log(`${currency.amount}円です`);
    } else if(currency.type === 'USD') { 
        console.log(`${currency.amount}ドルです`);
    } else {
        console.log("未知の通貨です");
    }
}

const jpy = createCurrency('JPY', 1000);
const usd = createCurrency('USD', 1000);

displayAmount(jpy); // 1000円です
displayAmount(usd); // 1000ドルです

// freezeしているので書換えはできない
jpy.amount = 9999;
displayAmount(jpy); // 1000円です


// 無効なタイプを渡すとエラーになる
try {
  const invalid = createCurrency('EUR', 1000); // ユーロは許可されていない
} catch (error) {
  console.error(error.message); // Invalid type: EUR. Allowed types are: JPY, USD
}

タグ付きユニオンってなに？

TypeScriptにおけるタグ付きユニオンはこちらのページで勉強しました。
ソースコードを読んだらなんとなくわかるとは思います。

https://www.webdesignleaves.com/pr/jquery/typescript-basic-04.html#h4_index_14

なににつかうか

自分のメモ用の記事なので、具体例をあんまり考えてはいないです。
クローム拡張とかにも使えるかも。

まとめ

「関数型プログラミングの基礎 JavaScriptを使って学ぶ」を読んでいて書きたくなったコードです。本の中で代数的データ構造の話がでてきます。普段は関数型を書くことはないけど、こんな風にどこかで使えそうな要素を拾えるから面白いと思いました。

https://www.ric.co.jp/book/programming/detail/178