【初心者向け】JavaScriptのif文を用いた条件式の書き方は？基本構造から実践利用まで分かりやすく解説します

こんにちは、大学院でIT系の研究を専攻している、ひらりんです。

JavaScriptは、Webページにて様々な機能を搭載したり、操作する際に使用されるプログラミング言語です。JavaScriptによって、ゲーム作成やサイトを動的にすることができ、フロントエンジニアを始めとした、プログラミング初学者など、多くの人におすすめしたい言語のひとつです！

本記事では、JavaScriptを用いたif文の条件式の使い方についてご紹介します。どのプログラミング言語でも、条件文は登場しますが、言語によって使い方が違ったり、他の条件文が存在したりと混乱しちゃいますよね。

if文について、基本構文から実践まで説明するので、JavaScriptの学習を始めた方や、if文で躓いている方、よりプログラムをシンプルにしたい人はぜひ読んでみてください。

条件式とは

そもそも、条件式とはどういうものなのか、簡単におさらいしておきましょう。

条件式とは、値や式の比較、論理演算などを組み合わせ、その結果によって実行するかどうか判別する際に用います。2つ以上の項同士が、条件を満たすかどうかという計算結果を、真（true）か偽（false）、もしくは1か0で返します。項については、値や変数、算術式や関数を組み合わせて、計算結果を評価することができます。

例えば、あらかじめ準備された変数aについて、「aが5より大きい場合のみ」という条件のときは、ほとんどのプログラミング言語で a>5 と記述するだけで、簡単に条件が作れます。

では、JavaScriptの条件文について確認してみましょう！

JavaScriptのif文の基本構造

JavaScriptの条件式について解説します。他の言語と同様、if文を用いて条件文を作成します。

if文の基本構造は以下のようになります。

ifの後にある小括弧（）内にて、条件文を記述します。その条件を満たしていたときのみ、中括弧｛｝が実行されます。条件が不十分だった際には、中括弧｛｝内のスクリプトは実行されずに飛ばされて、次のスクリプトへといきます。

では、if文のミソとなる「条件」はどのように記述すればよいのでしょうか。ここでは代表的な演算子を3つに分けてご紹介します。

等価性

等価性とは、対称性と推移性の両方を満たす場合に用います。簡単に言えば、「AとBが同じだったら」という条件文などを作りたいときに用います。それぞれ実際のプログラムを通して確認しましょう。

まずは、「AとBが等しいとき」の条件文は、以下のように記述します。

「等しい」を表す演算子は、== になります。一般的な算数や数学での同等表現を意味する A=B は、プログラミングの世界だと、「AにBを代入する」という意味なので、条件文には用いることができません。なお、=== は厳密等価演算子と呼ばれており、型と内容を厳密に判定する演算子ですが、そこまで使用頻度は高くないでしょう。

次に、「AとBが異なるとき」の条件文は、以下のようになります。

「等しくない」を表す演算子は、!= になります。もちろん、== をうまく利用してプログラムを組めば、!= 演算子は使わなくても書けますが、ほとんど一致しているデータの中から異なる値を探す際などに使えるようになると、とても便利です。== 演算子と違い、「異なる」を表す演算子は、言語によって異なるものもあるため、注意してください。

比較演算子

2つ以上の項を比較する比較演算子について説明します。

まずは、①：「AよりBが大きいとき」と、②：「AがB以上のとき」の条件文は、以下のように記述します。

「～より大きい」と「～以上」の演算子は、数学の表現と同じで、> と >= を用います。

一方で、③：「AよりBが小さいとき」と、④：「AがB以下のとき」の条件文は、以下のように記述します。

「～より小さい」と「～以下」の演算子は、< と <= を用います。注意点として、「以上」と「以下」の場合は、先に大なり・小なり表現の > と < を書き、そのあとに = を書くことを気を付けてください。

論理演算子

論理演算子を用いた条件式について説明します。論理演算子には、ANDやORがあります。ANDの条件文は、以下のように記述します。

「条件AもBも満たすとき」という条件文は、論理ANDを表す && を用います。

ORの条件文は、次のように記述します。

「条件AかBが満たされるとき」という条件文は、論理ORを表す || を用います。論理演算子はとても便利なので、ぜひ覚えておきたい演算子です！

if文の実践利用3選！

では、解説した演算子を用いて、プログラムで実装する際によく使う条件文を3つご紹介します。

if~elseを用いた条件分岐

1つ目は、条件を何段階かに分けたいときに使う、if~else 文です。「条件Aを満たした人のうち、条件Bを満たしていたら」といった条件分岐を用いたい際に使います。例を見てみましょう。

1行目で、変数Ageに40を代入しました。このAgeの値が50以下だったら、①の条件が実行され、50より上だったら②の条件が実行されるようになっています。ここではAgeが40なので、①が実行されて「50歳以下です」と表示されます。3つ以上の条件分岐を作りたかったら、else if (条件) と書くことで、条件を追加できますが、上から順に実行されることに注意してくださいね！

if~andを用いた複数条件

複数の変数や条件を調査し、実行する際には、if~andを用いましょう。これは、複数の条件式を論理演算子でつなぎます。では、コード例を見てみましょう。

論理演算子のAND（&&）とOR（||）を用いました。1,2行目で、Ageを40、scoreを80と定めています。最初のif文は、「Ageが50以下かつscoreが100以上」という条件です。Ageの条件は満たしているものの、scoreの条件は満たしてないので、①は実行されません。

次のif文は、「Ageが50以下かつscoreが100以下」なので、どちらの条件も満たしていて、②は実行されます。

最後のif文は、「Ageが50以上またはscoreが100以下」という条件になります。Ageの条件は満たしていませんが、scoreの条件は満たしてますね。今回のif文は、OR演算子の || を用いているので、どちらかの条件さえ満たしていればよく、③は実行されます。

if文を用いた存在確認

3つ目は、if文を用いた存在確認について説明します。ここでは、(ⅰ)変数が存在するか、(ⅱ)配列に値があるか、の2つについて扱いましょう。

変数が存在するか？

変数が存在（定義）されているかの確認は、if文の中の括弧内に変数名を書くだけでチェックできます。ここでは、Ageについては定義されてないので、②が実行されます。

配列に値があるか？

配列に値が格納されているかの確認は、配列名.length でチェックできます。配列名.length によって、配列の長さを調査し、空の場合はもちろん0なので、falseとなります。値が格納されている場合は1以上となり、trueなので実行されます。ここでは、arrayが空なので①は実行されずに、②のみ実行されます。

まとめ

いかがでしたでしょうか？今回は、JavaScriptのif文を用いた条件文について説明しました。

条件文は、基本構造はシンプルですが、工夫次第で処理速度は大きく向上します。ぜひ、JavaScriptのif文を理解し、Webサービス作成やシステム構築に活かしてください。