クラス化すべきかどうか？勘所がつかめません

Question

テーマ、知りたいこと

JavaScriptでクラス化すべきかどうか悩んでいます。

文末にある「対処案：モジュールのまま」か「対処案：クラス化する」について、どちらにすべきか（どちらにどういう利点があり、どういうケースで優先すべきか）ご意見いただけましたら幸いです。

背景、状況

以下のように、あるエリアについて「色々な処理のファイル」と「HTMLテンプレートのファイル」というペア構成でモジュールファイルを作りました。エリアを超えて類似処理がある場合にクラス化すべきかどうかが判断できない状況です。

エリア	色々な処理のファイル	HTMLテンプレートのファイル
.xxx-area	xxxAreaManager.js	xxxAreaHtml.js

コードは以下のような感じです。（最低限のイメージを伝えるためのもので実際は数百行ありますが、それぞれの処理を詳細にお読みいただく必要はないかと思います。）

/*
     このファイル名は xxxAreaManager.js です
     .xxx-area エリアについての色々な処理が書かれています
*/

// 各種 import
import util from '/assets/js/area/utiljs';
import xxxAreaSearchConditions from '/assets/js/area/xxxAreaSearchConditions.js';
import xxxAreaHtml from '/assets/js/area/xxxAreaHtml.js';

// エリア名
const areaName = 'xxx-area';

// エリア表示
function setAreaHtml(){
    document.quertySelector('.target')
        .insertAdjacentHTML('afterbegin', xxxAreaHtml.areaHtml());
}

// ソートメニュー表示切替
function toggleDisplaySortMenu(){
    document.quertySelector('.sort-menu')
        .classList.toggle('is-hide');
}

// Ajax でアイテムを取得し HTML を作りセット
async function fetchItemsAndSetHtml(){
    const queryString = xxxAreaSearchConditions.generateQueryString();
    const response = await util.getAjax('/item/get?' + queryString );
    document.quertySelector('.items')
        .insertAdjacentHTML('afterbegin', xxxAreaHtml.itemsHtml(response.items));
}

export default { setAreaHtml, toggleDisplaySortMenu, fetchItemsAndSetHtml }

/*
     このファイル名は xxxAreaHtml.js です
     .xxx-area エリアのHTMLテンプレートが書かれています
*/

// 各種 import
import util from '/assets/js/area/util.js';
import utilHtml from '/assets/js/area/utilHtml.js';

// エリア名
const areaName = 'xxx-area';

// エリアのHTMLテンプレート
function areaHtml(){
    return `
    <div class="${areaName}">
        ${sortＭenuHtml()}
        <div class="others">${utilHtml.esc('その他いろいろ')}</div>
    </div>`;
}

// ソートメニューのHTMLテンプレート
function sortＭenuHtml(){
    return `<ul class="sort-menu"></ul>`;
}

// アイテムのHTMLテンプレート
function itemsHtml(items) {
    return items.map(item => `<div>${utilHtml.esc(item.name)}</div>`).join('');
}

export default { areaHtml, itemsHtml }

そしてこのようなエリアごとのペアが大量にあります。（各ファイル名をきちんと一読される必要はありません。ざっくり.main-xxx-area系と.library-xxx-area系があります。）

エリア	色々な処理のファイル	HTMLテンプレートのファイル
.main-books-area	mainBooksAreaManager.js	mainBooksAreaHtml.js
.main-users-area	mainUsersAreaManager.js	mainUsersAreaHtml.js
.main-recommend-books-area	mainRecommondBooksAreaManager.js	mainRecommondBooksAreaHtml.js
.library-books-area	libraryBooksAreaManager.js	libraryBooksAreaHtml.js
.library-followers-area	libraryFollowersAreaManager.js	libraryFollowersAreaHtml.js

などなど・・

質問

しかし、いくつかのファイルにはかなり類似の関数が見られます。

例えばsortＭenuHtml()について、mainBooksAreaHtml.js では「人気順と作成順」ですし、

function sortＭenuHtml(){
    return `
    <ul class="sort-menu">
        <li>人気順</li><li>作成順</li>
    </ul>`;
}

また libraryBooksAreaHtml.js では「更新順と作成順」といった感じです。

function sortＭenuHtml(){
    return `
    <ul class="sort-menu">
        <li>更新順</li><li>作成順</li>
    </ul>`;
}

そこで共通処理を担う上位ファイルが必要だろうとなったのですが、モジュールのままで上位ファイルを作るか、すべてクラス化し継承関係を持たせるべきか、というのが全くわかりません。

対処案：モジュールのまま

クラス化しなければ上位ファイル commonAreaManager.js と commonAreaHtml.js などを作り、例えば上のようなメニュー関数ならこのように書くかと思います。

/*
     このファイル名は commonAreaHtml.js です
     各エリアで共通するHTMLテンプレートが書かれています
*/

function sortＭenuHtml(areaName){
    if (areaName === 'main-books-area') {
        return `
        <ul class="sort-menu">
            <li>人気順</li><li>作成順</li>
        </ul>`;
    } else if (areaName === 'library-books-area') {
        return `
        <ul class="sort-menu">
            <li>更新順</li><li>作成順</li>
        </ul>`;
    }
}

export { sortＭenuHtml }

しかしこの対処案では、「この commonAreaHtml.js は各エリアの上位ファイルなのか？それとも .main-books-area などと同じように .common-area というエリアがサイトにあるのか？」というのが分かりにくく、（コメントを見れば済む話ですが）この点がいまいちだと思います。

対処案：クラス化する

一方でクラス化すると以下のconstructorでのthrowによって、「これは必ず抽象クラスであって.common-area というエリアがサイトにあるわけではない」ということが強制できる点が良さそうだと思いました。

/*
     このファイル名は CommonAreaHtml.js です
     各エリアで共通するHTMLテンプレートが書かれています
*/

export default class CommonAreaHtml
{
    constructor(areaName) {
        this.areaName = areaName;

        if (new.target === CommonAreaHtml) {
            throw new TypeError("Cannot instantiate abstract class");
        }
    }

    sortＭenuHtml(){
        if (this.areaName === 'main-books-area') {
            // 同上
        } else if (this.areaName === 'library-books-area') {
            // 同上
        }
    }
}

そして各エリアのファイルも以下のようにCommonAreaHtmlを継承した上でクラス化し、モジュールではconst areaName = ''と宣言していたものをsuper('')と宣言します。

/*
     このファイル名は MainBooksAreaHtml.js です
     .main-books-area エリアのHTMLテンプレートが書かれています
*/

export default class MainBooksAreaHtml extends CommonAreaHtml 
{
    constructor() {
        super('main-books-area');
    }
    
    // 略
}

しかしクラスをこういう使い方していいのかなという疑念があります。クラスというのは「なんからの状態を持たせ、処理の過程でそれが変わっていくようなケースで用いるものだ」という理解をしているためです。

今回のようにただHTMLテンプレートを返すだけとか、単発的な処理を行うだけのケースにすぎないのに、抽象クラスであることの明示と強制という目的で用いていいのだろうか？という疑念です。

まとめ

ここまでお読みいただきありがとうございます。
以上のように「対処案：モジュールのまま」か「対処案：クラス化する」について、どちらにすべきかという判断ができない状況です。

この点のアドバイスはもちろん、「そもそも全体的な設計がおかしい」など根本的なご指摘も大募集です。

なるべく必要最低限にと思いコードは各所で割愛しておりますが、これだけでは判断がつかないだとか、情報の不足などございましたらご指摘ください。

よろしくお願い致します。