【ToDoアプリを作る】条件分岐によるバリデーション機能

前回の記事ではタスクの削除機能を実装しました。

【ToDoアプリを作る】filterを使って配列から特定の要素を削除する。

これまでの記事にて作成したToDoアプリの機能は、タスクを登録することができて、登録したタスクを完了時に削除することができるようになっています。

しかし、この状態だとタスク入力欄が空欄の状態で登録ボタンを押すことによって、空のタスクを登録することができてしまいます。

実際にサーバーを起動させてローカルホストにアクセスし、タスクを入力せずに登録ボタンを押してみて確認しましょう。

一般的なToDoアプリでは、空欄のタスクを登録することはありませんので、空欄で登録ボタンを押された場合は登録を行わないようにする必要があります。

フォームなどの入力欄に期待するデータが入力されているかを送信前に検証することをバリデーションと言います。

今回の記事では、入力欄が空欄の状態で登録ボタンが押された場合は、未入力を示すメッセージが表示されるようにバリデーション機能を作ります。

バリデーションの実装

バリデーションを実装するためにindex.tsxを編集します。

過去の記事で登録ボタンを押した際に入力欄に入力された文字列をstateとして登録するためのaddTaskという関数を用意しました。

この関数の中身をif文を使って条件分岐させます。

if文は以下のような形で記述します。

if(条件){
 処理①
} else {
 処理②
}

ifの引数に条件を記述し、条件と一致する場合は処理①が実行され、一致しない場合は処理②が実行されます。

では、今回のバリデーション機能について記述の説明をしていきます。

まずは、addTaskにif文を追加します。

今回のバリデーションでは、条件に一致する場合にエラーを表示させて、条件に一致しない場合にタスクを登録するようにします。

したがって、前回までで作成している関数の内容については処理②にあたる、else以降の波括弧{}内に全て記述します。

  const addTask = () => {
    if() {

    } else {
      const newTask = {
        taskItem: taskItem,
        id: Math.floor(Math.random() * 1e5),
      };
      makeList(newTask);
      setTaskItem("");
    }

  };

続いて条件を記述します。

条件は入力欄が空欄になっていることとします。

入力欄の中身はuseStateのtaskItemにて管理されており、handleInputChangeという関数で文字を入力するたびにtaskItemを更新していましたね。

このtaskItemのデータが空の状態の時にメッセージを出しますので、if文の引数はif(!taskItem)となります。

論理否定を示す(!)を使用して条件を設定しました。

論理否定は!マークの後の値が偽の値の場合はtrueとなる論理式です。

偽値に該当する値の例は以下のとおりです。

• 空欄の文字
• null
• NaN
• 0
• undefined

などが偽値として扱われます。

条件であるif(!taskItem)はtaskItemの値が空欄の場合にtrueが返されることになります。

if文でtrueが返されるということは処理①が実行されることになります。

これで、空欄の場合にaddTaskが実行されると未入力のメッセージを表示するための分岐ができました。

  const addTask = () => {
    if(!taskItem) {



    }
    else {
      const newTask = {
        taskItem: taskItem,
        id: Math.floor(Math.random() * 1e5),
      };
      makeList(newTask);
      setTaskItem("");
    }

  };

最後に、条件分岐で処理①が選ばれた場合のエラーメッセージの表示方法について解説します。

if文の波括弧{}内に記述するのは、alert(‘タスクを入力してください。’)の一文だけです。

alertはJavaScriptにて用意されている機能の一つで、カッコ()内の文字をポップアップで表示してくれるものです。

使い方は非常にシンプルで上記のようにalertを書いた後にカッコ内に好きな文字列を入力するだけです。

  const addTask = () => {
    if(!taskItem) {
      alert('タスクを入力してください。')
    }
    else {
      const newTask = {
        taskItem: taskItem,
        id: Math.floor(Math.random() * 1e5),
      };
      makeList(newTask);
      setTaskItem("");
    }

  };

先ほどの条件分岐と合わせると、入力欄が空欄の場合にこのalertが発動して未入力を示すメッセージが表示されます。

処理②の値をリストに登録する操作は実行されませんので、これにて未入力時のバリデーションを実装することができました。

ここまでの作業が完了したら、サーバーを立ち上げてローカルホストにアクセスし、入力欄をからにした状態で、登録ボタンを押してみましょう。

タスクを入力してください。というポップアップが表示されて、リストに何も追加されなければ今回の修正は完了となります。

まとめ

• フォームなどの入力欄が期待した値かを検証するための機能をバリデーションという。
• if文を使用して条件分岐を設定する
• 論理否定(!)により偽値の値を正として条件分岐を作成する。
• JavaScriptの機能であるalertを使用してポップアップを表示させる。

論理否定(!)により偽値の値を正として条件分岐を