My Strange Code#4 関数のパラメータの改善と関数の抽出(JavaScript)

自分が過去に書いたコードを見返してみておかしなコードを直してみます。

今回のコードは以下です。

const setSearchParam = (current, object) => {
  let result = { ...object }

  //注文日付(開始)の変更の場合、終了日が空の場合には同じ日付を入力する
  if (!!object.order_date_start && !current.order_date_end) {
    result = {
      ...result,
      order_date_end: object.order_date_start,
    }
  }

  //取扱店CDクリア時に、取扱店情報をクリア
  if (object.suppliers_company_cd === '') {
    result = {
      ...result,
      suppliers_company_id: '',
      suppliers_company_name: '',
      suppliers_dept_id: '',
      suppliers_dept_cd: '',
      suppliers_dept_name: '',
    }
  }
  return result
}

パラメータのobjectが抽象的すぎる

current はまだなんとなくわかるにしても、object は抽象的すぎるので何を表すのかをもっと明確にした方が良さそうです。

関数内のif文を関数に抽出する

setSearchParam 関数内には二つのif文がでてきていますが、これらを関数に抽出することで可読性があがりそうです。

変更後

const setSameDateToEndDate = (currentParams, newParams) => {
  return newParams.order_date_start !== '' && currentParams.order_date_end === ''
    ? {
        ...newParams,
        order_date_end: newParams.order_date_start,
      }
    : newParams
}

const clearSuppliers = (currentParams, newParams) => {
  return newParams.suppliers_company_cd === ''
    ? {
      ...newParams,
      suppliers_company_id: '',
      suppliers_company_name: '',
      suppliers_dept_id: '',
      suppliers_dept_cd: '',
      suppliers_dept_name: '',
    }
    : newParams
}


const setSearchParam = (currentParams, newParams) => {
  let result = { ...newParams }
  result = setSameDateToEndDate(currentParams, newParams)
  result = clearSuppliers(currentParams, result)
  return result
}

関数のパラメータは、currentParams と newParams というように少し具体的にしました。

また、コード量は増えていますが、二つのif文は関数に抽出しています。

さらに関数型プログラミングっぽくしてみる

pipe関数を定義したのが以下のコードです。これだと慣れていない人からすると可読性が悪くなっている気もするので、上記の方が良いようです。

const pipe = (currentValue, newValue, updateFuncs) => {
  return updateFuncs.reduce((acc, currentFunc) => {
    return currentFunc(currentValue, acc)
  }, newValue)
}

const setSameDateToEndDate = (currentParams, newParams) => {
  return newParams.order_date_start !== '' && currentParams.order_date_end === ''
    ? {
        ...newParams,
        order_date_end: newParams.order_date_start,
      }
    : newParams
}

const clearSuppliers = (currentParams, newParams) => {
  return newParams.suppliers_company_cd === ''
    ? {
      ...newParams,
      suppliers_company_id: '',
      suppliers_company_name: '',
      suppliers_dept_id: '',
      suppliers_dept_cd: '',
      suppliers_dept_name: '',
    }
    : newParams
}


export const setSearchParam = (currentParams, newParams) => pipe(currentParams, newParams, [setSameDateToEndDate, clearSuppliers])

JavaScript, プログラミング入門, リファクタリング

Posted by たみぼうず