ちゃんと学ぶ、JavaScript空欄の場合に警告を表示しよう – if

テキストフィールドにユーザーが入力した内容をプログラムで利用する場合、ユーザーが入力していないケースもあり得ます。そのまま処理を仕様とすると、正常に計算などが行えなくなることもあるため、ここでは入力したかどうかをあらかじめ確認して動作するようにしましょう。

if構文で条件分岐

「ユーザーが入力しているかどうか」といった条件を判断する処理を「条件分岐」と呼び、JavaScriptでは「if」という構文を使って表すことができます。まずはここでは、テキストフィールドとボタンを1つ準備しましょう。

<label>
  お名前： <input type="text" id="name">
</label>
<div>
  <button id="send">送信する</button>
</div>

名前の入力欄と、送信ボタンが表示されます。この時、送信ボタンがクリックされたときに名前が空だった場合に警告を表示してみましょう。まずは、イベントを定義します。

<script>
  document.getElementById('send').addEventListener('click', function() {
      alert('ボタンがクリックされました');
  });
</script>

これで、ボタンがクリックされたときにまずはメッセージが表示されるようになりました。

それではこの時、テキストフィールドに入力されているかを検査しましょう。次のように書き換えます。

<script>
  document.getElementById('send').addEventListener('click', function() {
    const name = document.getElementById('name').value;
    if (name === '') {
     alert('お名前をご記入ください');
    } else {
      alert('送信されました');
    }
  });
</script>

これで表示して、ボタンをクリックしてみましょう。テキストフィールドが空の場合は「お名前をご記入ください」と表示され、名前を入力すると「送信されました」と表示されるようになります。

if構文の書式

それでは、if構文の書式をみていきましょう。次のようになります。

if (条件) {
  条件に合ったときの処理
} else {
  条件に合わなかったときの処理
}

となり、カッコ内の「条件」に従ってどちらか一方のプログラムしか動作しなくなります。なお、処理は複数行記述することもできます。

比較演算子

「条件」の部分を詳しくみていきましょう。次のように記述しました。

name === ''

「name」という変数は、その直前でテキストフィールドから受け取っている入力内容の値です。そして、「”」というクオーテーション記号の連続は「空文字」といい、「なにも入力されていない」という状態を表すことができます。

ポイントとなるのは、真ん中の「===」という記号です。これは「等しい」という意味を持ちます。=（イコール）の記号を3つ重ねて記述するため気をつけましょう。

この記号を「比較演算子」といいます。算数で習う「等号・不等号」と似ていますが、記述が少し変わるため注意が必要です。次のような種類があります。

A === B	AとBが等しい
A > B	AがBより大きい
A < B	AがBより小さい
A >= B	AがB以上
A <= B	AがB以下
A !== B	AがB以外

この比較演算子を使って、変数と値や変数と変数などを比べて、条件として利用することができます。

elseの省略

条件に合わなかったときの処理を記述するelse以降の記述ですが、もし特にやる処理がない場合は省略することもできます。次のように記述します。

if (name === '') {
  alert('お名前をご記入ください');
}

この場合、名前が正しく入力された場合は、特になにも起こらないプログラムになります。