Javascriptでメッセージテンプレートをclassで管理する

背景

ノーコードツールでの開発で、メッセージの定義などができる機能がないので何かいい実装方法はないかと、考えてたんですが、JavaScriptからAPIリクエストを投げて結果をもとにメッセージを出すという実装なので、画面側でメッセージを持っておきたいと思ったのがきっかけです。

経緯

ただ、ライブラリが使えない環境なので、JavaScript・jQueryだけでメッセージを管理する
楽な方法がないか調べました。けれど、あ、これでいいやっていう方法が見つからず。。(´・ω・｀)ﾏ?

まあ、replaceメソッドを使えば何とかなるだろうと。ほかでも使えるかなと思い、ここに残します。

ソースコード

Message.js

class Messages {
    #common_mes = {
        "required" : "$1 is null or empty.",
        "maxLength" : "$1 within $2 characters maximum."
    }
    
    makeCommonMes(param_arr, key) {
        var str = "(" + param_arr.join(").*(") + ")";
        return str.replace(new RegExp(str,"g"), this.#common_mes[key]).replace(/[()]/g,"");
    }
    
    getViewMessages(target_arr) {
        var message_arr = [];
        target_arr.forEach((arr) => {
            message_arr.push(this.makeCommonMes(arr.param_arr, arr.key));
        });
        return message_arr;
    }
}

// Usage
var m = new Messages();
var message_param_arr = [{
    "param_arr" : ["name"],
    "key" : "required"
},{
    "param_arr" : ["login id", 9],
    "key" : "maxLength"
}];
console.log(m.getViewMessages(message_param_arr));
// [ 'name is null or empty.', 'login id within 9 characters maximum.' ]

。。。以上です(∩´∀｀)∩

あとはcommon_mesにテンプレートのメッセージを追加していけばOKですね。

参考にしたサイト