Web開発ログ | エンジニアに役立つ情報 | 開発の中での気づきを発信

高卒Devlog

TSLab 【第4回 Express勉強会】リファクタリング

thumbnail

こんにちは! RYOTAです!

当記事をご覧くださりありがとうございます!

定例になりましたTypeScript勉強会を開催したので実施ログを残していきます! 前回の続きとなるので気になる方は前回の内容も合わせてご覧くださいませ!

内容

前回はPUTのバリデーションで盛り上がり、今回はPOSTの作成を中心に行いました。
が!「PUTの処理とPOSTの処理で共通化できるじゃん!」となったので横道に逸れてコードをスッキリさせました。
なので今回はリファクタリングが中心となります。
早速内容にいきましょう。

リファクタリング

今回はこの部分の改善を行います。
その中でも!Object.keys(this.params).every((Key) => validParams.includes(Key))この箇所がわかりずらいとのことだったので、モジュール化してしまおうというのが目的になります。

Before

const validParams = ['id', 'name', 'age']

if (
    !this.params.id ||
    !Number(this.params.id) ||
    (this.params.name && typeof this.params.name !== 'string') ||
    (this.params.age && !Number(this.params.age)) ||
    !Object.keys(this.params).every((Key) => validParams.includes(Key))
  ) {
      return this.handler.error(PARAMETER_INVALID)
    }

下記が変更後になります。
許可していないパラメーターをチェックする関数とUtilsとしてクラスを作成し、先にチェックする形に変更しました。
エラー内容も変更してよりデバッグがしやすい状態に変更が可能になりました。

After

const validParams = ['id', 'name', 'age']

if (!CheckUtils.CheckPermissionParams(this.params, validParams)) {
  return this.handler.error(PARAMETER_UNAUTHORIZED)
}

if (
    !Number(this.params.id) ||
    (this.params.name ? typeof this.params.name !== 'string' : false) ||
    (this.params.age ? typeof this.params.age !== 'number' : false)
  ) {
      return this.handler.error(PARAMETER_INVALID)
    }

export default class CheckUtils {
  constructor() {}

  static CheckPermissionParams(params: {}, validParams: string[]): boolean {
    return Object.keys(params).every((Key) => validParams.includes(Key))
  }
}

変更としては若干になりますが、どこまでを共通化させるかや分離させるか議論ができたと思います。

さいごに

今回は処理内容は変えずに共通化を行ってみましたが、この辺りは設計に関わってくる部分なので熱く議論ができたと思います。
プロジェクトの規模や設計方針、開発チームのレベルによっても答えが変わりそうだよねと結論に至ったので、一旦は今回のゴールはここまでにいたします。
次回こそはPOST/DELETEを完成させてExpressの基礎を終わらせようと思っています!