リファクタリングの前後を晒す

前回の記事の内容と同じプログラムでまだまだ汚い部分がありました。

https://zenn.dev/akaneiy/articles/a496605ccc1674

プラグインの設定画面のフィールドタイプ別にドロップダウンリストを作る機能です。

この選択肢を作る

リファクタリング前

before

　const resp = await kintone.api('/k/v1/app/form/fields.json','GET',{'app': kintone.app.getId()});
  let $address_dateDropDown = $('#address_field');
  let $LonLat_dateDropDown = $('#LongitudeLatitude_field');
  let $map_dateDropDown = $('#map_field');
  let $accuracy_dateDropDown = $('#accuracy_field');
  let $option;
  for(var key in resp.properties){
    if(resp.properties[key].type === "SINGLE_LINE_TEXT"){
      $option = $('<option></option>')
      $option.attr('value', resp.properties[key].code);
      $option.text(resp.properties[key].label);
      $LonLat_dateDropDown.append($option.clone());
      $address_dateDropDown.append($option.clone());
    }else if(resp.properties[key].type === "CHECK_BOX"){
      $option = $('<option></option>')
      $option.attr('value', resp.properties[key].code);
      $option.text(resp.properties[key].label);
      $accuracy_dateDropDown.append($option.clone());
    }else if(resp.properties[key].type === "LINK"){
      $option = $('<option></option>')
      $option.attr('value', resp.properties[key].code);
      $option.text(resp.properties[key].label);
      $map_dateDropDown.append($option.clone());
    }else{
      continue;
    }
  }
   if (config.LongitudeLatitude) {
      $LonLat_dateDropDown.val(config.LongitudeLatitude);
    }
    if (config.address) {
      $address_dateDropDown.val(config.address);
    }
    if (config.map) {
      $map_dateDropDown.val(config.map);
    }
    if (config.accuracy) {
      $accuracy_dateDropDown.val(config.accuracy);
    }

我ながらなかなか酷いです。
なにも考えずにとりあえず書くと私はこうなってしまいます。
同じ処理が4個まで増えると見た目的にもきついです。
このままパッケージングしない方がいいことはよくわかるのでこの汚いコードをリファクタリングしました。

リファクタリング後

まずはループ処理できるようにオブジェクト等で配列を作り、それをループ処理するようにしました。

after

/*設定対象のフィールドタイプ */
const aryType = ["SINGLE_LINE_TEXT","LINK","CHECK_BOX"];
    
/*設定項目*/
/*vals[0]はinputのtypeはTEXTなので今回は値のセットは不要*/
const vals = [
	{
	  elm:"id_field",
	  feild:"id",
	  type:"SINGLE_LINE_TEXT"
	},
	{
	  elm:"LongitudeLatitude_field",
	  feild:"LongitudeLatitude",
	  type:"SINGLE_LINE_TEXT"
	},
	{
	  elm:"address_field",
	  feild:"address",
	  type:"SINGLE_LINE_TEXT"
	},
	{
	  elm:"map_field",
	  feild:"map",
	  type:"LINK"
	},
	{
	  elm:"accuracy_field",
	  feild:"accuracy",
	  type:"CHECK_BOX"
	}
]
const resp = await kintone.api('/k/v1/app/form/fields.json','GET',{'app': kintone.app.getId()});
for(var key in resp.properties){
          if(aryType.indexOf(resp.properties[key].type) <= -1){
              //配列aryTypeにないフィールドタイプならコンティニューする
              continue;
          }
          let $option;
          vals.forEach(function(obj){
              if(obj.type === resp.properties[key].type){
                  $option = $('<option></option>');
                  $option.attr('value', resp.properties[key].code);
                  $option.text(resp.properties[key].label);
                  $('#'+obj.elm).append($option.clone());
		  $('#'+obj.elm).val(config[obj.feild]);
              }
          });
  }

だいぶ綺麗になりましたが、最初から綺麗にかけるようになりたいものです。
もっといい方法あるなら知りたいです。
クラス構文で書く方法を考えたけど力不足でした。
抽象化するのって本当に難しいです。。