はじめてのオブジェクト指向

備忘録です。

kintoneのプラグイン開発をしている中で、条件分岐が多発してなんか気持ち悪いという感覚になりました。
プラグインの設定画面で、すでに登録があったら値をセットするというシーンです。

if (config.id) { 
	$("#id_field").val(config.id);
}
if (config.LongitudeLatitude) { 
	$("#LongitudeLatitude_field").val(config.LongitudeLatitude);
}
if (config.address) { 
	$("#address_field").val(config.address);
}
if (config.map) {
	$("#map_field").val(config.map);
}
if (config.accuracy) {
	$("#accuracy_field").val(config.accuracy);
}

もっとスマートに書けるはず。
規模も小さく関数で難なく済むことが多くて、オブジェクト指向型で書く機会はあったはずなのにずっとスルーしていました。
調査不足で、JavaScriptもクラス構文が使えるようになっていたみたいでしたが(そういえば絶対みたことある)、コンストラクタ関数で書くやり方を最初に見つけてしまったのでその書き方をしました。

//処理の対象になるオブジェクトを定義
/*elm:HTMLの要素に割り当てているid
　field:フィールドコード兼configでセットしているkey*/
const vals = [
    {
      elm:"id_field",
      feild:"id"
    },
    {
      elm:"LongitudeLatitude_field",
      feild:"LongitudeLatitude"
    },
    {
      elm:"address_field",
      feild:"address"
    },
    {
      elm:"map_field",
      feild:"map"
    },
    {
      elm:"accuracy_field",
      feild:"accuracy"
    }
];

//コンストラクタ関数
  const SettingVal = function(elm, feild){
    this.elm = elm;
    this.feild = feild;
    this.Setting = function(){
    //値持っていたら要素にセット
      if (config[this.feild]) { 
        $("#"+this.elm).val(config[this.feild]);
      }
    }
  }
  
  //実体化しながら処理していく
  vals.forEach(function(obj){
      new SettingVal(obj.elm,obj.feild);
  });
  

条件分岐が減り、似たような処理を繰り返すことはなくなりましたが長くなりました・・💦
これなら普通の関数でいい気も・・
機会あれば多少時間がかかってもどんどん書いて早く慣れようと思います。