if~else文JavaScript入門

更新日:2018.06.22
  1. HOME
  2. JavaScript入門
  3. if~else文

前のページでは、条件に合っているかどうかを判断して、合っている時に処理を行う方法を見ました。 このページでは、条件に合っているかどうかによって、別々の処理を行う方法について見ていきます。

条件に合っていない場合に行う処理は演算子「!=」を使って記述することもできますが、 elseを使うと二通りの処理を一度に記述できます。

if~else文の記述の仕方

if~elseの構文は、以下のように記述します。

if ( 条件式 ){ 処理1 } else { 処理2 }
条件式に合致している場合、処理1を実行します
条件式に合致しない場合、処理2を実行します

記述の仕方は上記の通りです。条件式に合っていれば処理1を、合っていなければ処理2が実行されます。 このようにして、条件により処理を分岐させることができます。

簡単なサンプルを見てみましょう。以下のように記述してみました。何と表示されるでしょうか?

<script>

var num = 5;

if ( num < 3 )
{
  alert("3より小さいです。");
}
else
{
  alert("3より大きいです。");
}
</script>

サンプル(別窓)

答えは「3より大きいです。」となります。変数numには5が入っているので、条件式「 n < 3 」には当てはまりません。 その結果、else以下の処理が行なわれる訳です。

if~elseを重ねる

if~else文を重ね合わせて、何重にも処理を分岐させることもできます。以下のサンプルをご覧下さい。

<script>
var num = 5;

if ( num == 3 )
{
    alert( "3が入っています。" );
}
else
{
    if ( num == 4 )
    {
        alert( "4が入っています。" );
    }
    else
    {
        alert( "3,4ではありません。" );
    }
}
</script>

サンプル(別窓)

上記サンプルでは、変数numに5を代入しています。そして最初のif文で、変数numが3かどうかをチェックしています。 そうではないのでelse以下が実行されます。

elseの中で、もう一度if文を使っています。変数numが4かどうかをチェックします。4ではないので、else以下の処理が行なわれます。 その結果、「3,4ではありません。」と表示されます。

因みに上記の式は、以下のようにすっきりと書くことができます。


if ( n == 3 ){ alert( "3が入っています。" ); }
else if ( n == 4 ) { alert( "4が入っています。" ); }
else { alert( "3,4ではありません。" ); }

次のページでは、条件分岐のもう一つの命令文、switchを紹介致します。

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers