入力を検証する

INPUT · スライド

空の入力をはじく

01 / 05

なにも打たずに押すと?

いまのアプリで「ふやす」を何も打たずに押してみよう。空っぽの行ができてしまうね。

こういう「壊れはしないけどおかしい動き」を止めるのが入力の検証だよ。英語では validation と呼ばれるもので、現場のアプリには必ず入っている。

02 / 05

trim で見えない空白を取りのぞく

スペースだけを打ってふやすのも困る。trim() は文字列の前後にある空白を取りのぞいた値を返すよ。

" " に trim() をかけると "" になる。"ぎゅうにゅう" ならそのまま。中身があるかどうかは、trim() してから === "" で見るのがいちばん確実だよ。

"  ".trim()        // ""(空白だけ)"ぎゅうにゅう".trim() // "ぎゅうにゅう"

03 / 05

空なら何もせずに帰る

空だと分かったら、行をふやす処理に進まずすぐ帰る。それが return だよ。

if の中で return すると、残りの処理は飛ばされる。早い段階でダメなケースをはじくこの書き方を、現場では「ガード」と呼ぶよ。

if (input.value.trim() === "") {  return}

04 / 05

trim は元の値を書きかえない

気をつけたいのは、trim() が新しい文字列を作って返すだけだということ。input.value そのものが書きかわるわけではないよ。

だから判定には input.value.trim() を使い、実際にリストへ足すときも同じように trim() した値を使う。判定だけ trim して、追加するときは trim していない元の値を使ってしまうと、前後の空白が残ったまま登録される、というありがちな取りちがえに注意しよう。

const raw = "  ぎゅうにゅう  "console.log(raw)            // "  ぎゅうにゅう  "(そのまま)console.log(raw.trim())     // "ぎゅうにゅう"(前後の空白が無い)

05 / 05

ガードは if / else より読みやすいことが多い

同じ処理は if と else でも書けるけれど、ガードのほうがすっきりすることが多い。else で書くと、「本当にやりたい処理」が波かっこの内側に1段さがってしまうからだよ。

ガードなら「ダメなケースを先に払ってしまえば、残りは全部やりたい処理」と読める。処理が長くなるほど、この差は効いてくるよ。

// else を使う書き方(本題が1段深い)if (input.value.trim() !== "") {  addItem(input.value.trim())}// ガードを使う書き方(本題が浅いまま)if (input.value.trim() === "") {  return}addItem(input.value.trim())