vueで新しいデータを作る際の注意点

値を作る時は、適切な入力値を決めて、それが与えられている & 重複した値がない場合のみ、追加処理を行う

const createName = () => {
  if (!isValidInput()) {
    console.log("無効なので作成しません")
    return
  }
  const fullName = `${first.value} ${last.value}`
  console.log(fullName)
  if (!names.includes(fullName)){
    names.push(`${first.value} ${last.value}`)
  }
}

const isValidInput = () => {
  return first.value.trim() && last.value.trim()
}

思ったこと

選ばれた値を元にfirstとlastを作り、その値のinsertとcreateを作るのは意外と難しい。

updateの処理はselectedに値が入っているはずなので、index番号で既存のやつ探せるけど、createは既存のやつは選ばれてないので、fisrtとlastでしか見れない

なので、createの場合は、firstとlastの値が、既存の処理と重複していない場合だけ作る、というアプローチが必要になる

jsでは存在しないプロパティにアクセスするとundefinedが返されるのに注意

jsでは以下のような条件にすると、存在しない値という事でundefinedが入る可能性がある

これはref関数のvalueプロパティが設定されていないからである。

最初に、valueプロパティに空文字列を入れてundefinedにしない方法もあるけど一般的ではない

アプリはシンプルにするのが基本なので、 変な値が入らないように、バリデーションをかけて制限した方が良いと思う。

作られる値に制限があると、入ってくる値が決まっているので、それ前提で作れる。

入ってくる値が制限されてないと、色んなケースを想定しないといけなくなる。