JavaScriptでの条件分岐、if文の記述方法について紹介します。JavaScriptを学ぶうえで必須の文法となるので、必ず使いこなせるようになりましょう！

目次

JavaScriptのif文とは？

if文は特定の条件でのみ処理したいプログラムを記述する際に使用します。もし〇〇ならば△△するというように条件に当てはまれば処理を実行する時に使用します。例えば「ユーザーが20歳以上の時のみメッセージを表示したい」、「ボタンがクリックされた時に文字のデザインを変更したい」といった時にif文を使いましょう！

条件分岐
if文のように特定の条件に応じて処理を命令することを条件分岐と言います。

基本的なif文の記述方法

早速基本的なif文の記述方法を見てみましょう！

if(条件) {
  条件を満たした時に実行したい処理
}

ifの直後の() （丸括弧）の中に条件式を、{} （波括弧）の中に条件を満たした時に実行したい処理を記述します。

例えば20歳以上の時のみ「成人です。」と表示したい場合は下記のように記述します。

let age = 25;
if(age >= 20) {
  console.log("成人です。");
}

上記はageの値が20以上なら「成人です。」と出力するという意味です。仮にageの値が19以下だと処理は行われないため「成人です。」とは出力されません。

基本的なif文は例に示したように記述しましょう。次は複数の条件によって処理を分けたい場合の記述方法について学びましょう！

if, elseでの記述方法

if文では条件を満たした時の処理だけでなく、条件を満たさなかった場合の処理も同時に記述できます。if, elseを使った記述方法を紹介します。

if(条件) {
  条件を満たした時に実行したい処理
} else {
  条件を満たさない時に実行したい処理
}

基本的なif文に続けてelse以降のプログラムを記述すれば条件を満たさない時の処理を定義できます。

例えば以下の条件で処理するif文を書いて見ましょう！

  • 20歳以上には「成人です。」と表示する
  • 19歳以下には「未成年です。」と表示する
let age = 15;
if(age >= 20) {
  console.log("成人です。");
} else {
  console.log("未成年です。");
}

もし20歳以上であれば「成人です。」と表示し、そうでなければ「未成年です。」と表示しろという意味です。else以降では特に19歳以下とは明示していませんが、20歳以上を満たさないので必然的に19歳以下ということになります。

実際にプログラムを実行するとlet age = 15;でageを15と定義しているのでage >= 20 の条件を満たしません。よってelseに記述した処理が実行され「未成年です。」と表示されます。

今度は複数の条件によって処理を分岐させるif文を見ていきましょう！

if, else if, elseでの記述方法

Aという条件とBという条件を満たした時の処理をそれぞれの条件によって分けたい時があります。そんな時はif, else if, elseを使ってif文を記述しましょう！

基本的な記述方法を紹介します。

if(条件A) {
  条件Aを満たした時に実行したい処理
} else if(条件B) {
  条件Bを満たした時に実行したい処理
} else {
  条件を満たさない時に実行したい処理
}

複数条件がある際はelse ifを記述することで新たに条件を追加できます。else ifについてはif文の中で何度も使えます。

それでは具体的事例で考えてみましょう！以下の条件ではどのようにif文を記述すればいいでしょうか？

  • 20歳以上であれば「成人です。」と表示する
  • 10代であれば「10代です。」と表示する
  • 該当しない年齢は「10代未満です。」と表示する

条件が2つ以上ある場合はelse ifを使ってif文を記述します。

let age = 8;
if(age >= 20) {
  console.log("成人です。");
} else if(age >= 10) {
  console.log("10代です。");
} else {
  console.log("10代未満です。");
}

20代以上であるか、10代であるかどうかの2つの判定が必要であるためelse ifを使って記述しました。

上記のif文ではageを8と定義していますが、なんと出力されるでしょうか？プログラムを実行すると「10代未満です。」と出力されます。

最初に定義した条件式の20歳以上にも当てはまらずelse ifで定義した10歳以上にも当てはまらないためelseに記述した処理が実行されます。

条件分岐ってなに？

今までif文について解説してきましたが、特定の条件に応じて異なる処理をすることを条件分岐といいます。もちろんExcelのif文も条件分岐に該当します。

「true(真)」と「false（偽）」

条件を満たすか、満たさないかを判断する時if文ではその条件が「true（真）」であるか「false（偽）」であるかを判断しています。true、flaseのことを真偽値と呼びます。

if文では条件式がtrueの場合に処理が実行されfalseの場合処理は実行されません。

比較演算子

比較演算子とは値が同じか、どちらの値が大きいかを比較するために使います。

条件式に記述されていたage >= 20 のような記述が比較演算子です。解説しなくともどのような意味か理解できたかたも多いと思いますが、ここでしっかりとマスターしましょう！

値の大小を比べる

> 左辺が右辺より大きい時にtrueとなります。
< 左辺が右辺より小さい時にtrueとなります。
>= 左辺が右辺と同じか大きい時にtrueとなります。
<= 左辺が右辺と同じか小さい時にtrueとなります。

こちらは値の大小を比較する時に使う比較演算子です。

「AがBより大きい時」、「AがB以下の時」のような条件式が必要な時に使用しましょう。

値が等しいかどうか比べる

== 右辺と左辺が同じ時にtrue
!= 右辺と左辺の値が異なる時にtrue

こちらは値が同じか異なるかを比べる時に使用します。= と記述すると右辺を左辺に代入するという意味になるので、== と記述するように注意しましょう！

==と===の違い
==（=が2つ） だけでなく===（=が3つ）も使えます。どちらも等しいかどうかを比較しますが比較の結果が異なるケースもあります。実は=== を使用するとデータの型も含めて等しいか比較します。例えば1 == "1" はtrueですが、1 === "1" はfalseとなります。単純に同じ1であるかだけでなく「数値の1」か「文字列の1」かを判断しているからです。

論理演算子

論理演算子を使えば「〇〇かつ□□ならば△△する」、「〇〇または□□ならば△△する」といったif文が記述できます。論理演算子を使えば複数の条件を満たす必要があるif文でもスッキリとしたコードで記述できます。

&& 「かつ（and）」は左右両方の条件式がtrueの時にtrueとなります。
|| 「または（or）」は左右どちらの条件式か両方の条件式がtrueの時にtrueとなります。

実際に論理演算子を使用したif文を見てみましょう！例えば20歳以上の男性にのみ「成人男性です。」と出力したい場合if文はどう記述するでしょうか？

let age = 43;
let sex = "男性";
if(age >= 20 && sex == "男性") {
  console.log("成人男性です。");
}

上記のコードでは&&で比較しているので「年齢（age）が20以上」と「性別（sex）が男性」の両方の条件を満たす場合のみtrueとなり処理が実行されます。

処理を実行するとageが「43」、sexが「男性」という両方の条件をみたしているため結果として「成人男性です。」と表示されます。

JavaScriptのif文はマスターしよう！

いかがだったでしょうか？今回はJavaScriptのif文について紹介しました。

webサイトやwebアプリを制作する際にif文はよく使う命令文の1つなので是非マスターしてください。

if文はJavaScriptだけでなく多くの言語に存在する命令文です。細かな記述方法に違いはありますが、根本的な考え方は一緒なので他言語でも応用が効きます。プログラミングの基本的な概念なのでしっかり使いこなせるようになりましょう！