共通するバリデーションを簡潔に書きたい

Question

前提・実現したいこと

ユーザー情報の作成関数とユーザー情報の更新関数があります。

const createUser = () => {
  const name = getInputNameValue()
  if(!name) return alert("名前を入力してください。")
  const description = getInputDesValue()
  if(!description) return alert("説明を入力してください。")
  const newUser = {name: name, des: description}
  // 以下ユーザー情報作成
}

const updateUser = () => {
  const name = getInputNameValue()
  if(!name) return alert("名前を入力してください。")
  const description = getInputDesValue()
  if(!description) return alert("説明を入力してください。")
  const updateUser = {name: name, des: description}
  // 以下ユーザー情報更新
}

どちらの関数も冒頭が同じなので、簡素化したいです。

試したこと・発生している問題

下記のようにバリデーションを関数化しました。

const validation = () => {
  const name = getInputNameValue()
  if(!name) return alert("名前を入力してください。")
  const description = getInputDesValue()
  if(!description) return alert("説明を入力してください。")
  return {name: name, des: description}
}

const createUser = async () => {
  const response = await validation();
  // 以下ユーザー情報作成
}

const updateUser = async () => {
  const = response = validation();
  // 以下ユーザー情報更新
}

上記のコードだと、バリデーションに引っかかりalertが実行されても、validation関数の実行が中止されるだけで、作成または更新が行なわれるかと思います。

---

そこで、validation関数の返り値を元にalertを出すよう、下記のように変更しました。

const validation = () => {
  const name = getInputNameValue()
  if(!name) return "noName"
  const description = getInputDesValue()
  if(!description) return "noDes"
  return {name: name, des: description}
}

const createUser = async () => {
  const response = await validation()
  if(response === "noName") {
    return alert("名前を入力してください。")
  } else if(response === "noDes") {
    return alert("説明を入力してください。")
  }
  const newUser = response
  // 以下ユーザー情報作成
}

const updateUser = async () => {
  const response = await validation()
  if(response === "noName") {
    return alert("名前を入力してください。")
  } else if(response === "noDes") {
    return alert("説明を入力してください。")
  }
  const updateUser = response
  // 以下ユーザー情報更新
}

上記関数でバリデーションに引っかかった場合、アラートが表示され、作成または更新を中止できるかと思います。

しかし元のコードと比較して、コードの総量は増え、返り値の判定で結局共通するコードが発生したため、簡素化できていないと言えます。

Comments

[takasima20]

関係ないけど、複数の return で毛色の異なるものを返すのはもやっとします。

Answer 1

下記のようにバリデーションを関数化しました。

バリデーション結果に入力値を返す必要ないのでは。
true/falseを返してfalseならそのまま終了で良いと思いますよ。
新規と更新ですべて同じ項目とは限らないでしょうし、今後別の画面でも使う可能性も加味すると、あくまで「バリデートの結果」だけ返すようにしたほうが汎用的です。
で新規は新規、更新は更新でほしい項目を取る。

もっとやるなら、data属性でバリデーションルール定義して、validationメソッドにはformタグのidだけ渡して、そのform配下でバリデートルールが指定された入力項目だけバリデート行うようにするとかですね。

Answer 2

情報の取得とチェックは別に考えた方がいいかも。
例えば

function check_ok(data) {
  if(!data.name) {
    alert("名前を入力してください。")
    return false
  }
  if(!data.description) {
    alert("説明を入力してください。")
    return false
  }
  return true
}

const createUser = () => {
  const newUser = {name: getInputNameValue(), des: getInputDesValue()}

  if (!check_ok(newUser)) return

  // 以下ユーザー情報作成
}

const updateUser = () => {
  const updateUser = {name: getInputNameValue(), des: getInputDesValue()}

  if (!check_ok(updateUser)) return

  // 以下ユーザー情報更新
}

Answer 3

複雑なvalidateが必要ならjquery.validate.jsなどライブラリを利用されるとよいでしょう。
普通はpattern属性とかで十分だと思いますけどね