いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【JavaScript】if文の書き方と使い方の基本

プログラミングの基本である「条件分岐」をJavaScriptで実現するif文の書き方を解説します。最もシンプルなif文から、複数の条件を扱うelse ifやelseまで、基本構文を網羅。年齢判定や成績評価といった具体的なサンプルコードを通して、実践的な使い方を初心者にもわかりやすく紹介します。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • JavaScript: ES6以降

JavaScriptのif文とは

JavaScriptのif文は、「もし〜ならば、〇〇する」というように、特定の条件が正しい場合にだけ、決められた処理を実行させるための構文です。このように、条件によってプログラムの処理の流れを分けることを「条件分岐」と呼びます。

if文では、まず「条件式」を評価します。条件式とは、「正しい（真: true）」か「正しくない（偽: false）」かで答えられる質問のようなものです。

プログラムは上から順に実行され、if文にたどり着くと条件式を評価します。その結果がtrueだった場合にのみ、続く波括弧{}で囲まれた特定のコードブロックが実行されます。もし結果がfalseだった場合、そのコードブロックは実行されずに無視されます。複数の条件がある場合も同様に、上から順に評価され、最初にtrueとなった条件のコードブロックだけが実行されます。

JavaScriptのif文の書き方

JavaScriptのif文は、プログラムの中で特定の条件が満たされたかどうかによって、実行する処理を分けるために使います。これを「条件分岐」と呼びます。

基本的な構文は以下の通りです。

1if (条件式1) {
2    // 条件式1がtrueのときに実行される文
3} else if (条件式2) {
4    // 条件式2がtrueのときに実行される文
5} else {
6    // すべての条件がfalseのときに実行される文
7}

この構文は、上から順番に評価されます。

  • if (条件式1) 最初に () の中の「条件式1」が評価されます。この結果が true（真）であった場合、直後の {} ブロック内に書かれた処理が実行され、if文全体の処理は終了します。false（偽）であった場合は、次の else if または else の部分へ進みます。

  • else if (条件式2) if の条件式1が false だった場合に、次にこの「条件式2」が評価されます。条件式2が true であれば、この {} ブロック内の処理が実行されます。else if は必要に応じて複数追加することができ、条件を細かく設定できます。

  • else if と、存在するすべての else if の条件式が false だった場合に、この else の {} ブロック内の処理が実行されます。どの条件にも当てはまらなかった場合の最終的な処理を記述します。

else if と else は省略可能です。最もシンプルな形は if のみとなります。

サンプルコード

この記事では、JavaScriptにおける条件分岐の基本であるif文について学習します。条件分岐とは、「もし○○なら、この処理をする」といったように、特定の条件によって処理の流れを変える仕組みのことです。

javascript/chapter11/index.html

これは、これから作成する複数のJavaScriptファイルを読み込むためのHTMLファイルです。bodyタグ内のscriptタグで、script01.jsからscript06.jsまでのJavaScriptファイルを指定しています。ブラウザでこのHTMLファイルを開くと、記述された順番に各JavaScriptが実行されます。

1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8
9  <body>
10    <h1>JavaScriptチュートリアル</h1>
11    <script src="./script01.js" defer></script>
12    <script src="./script02.js" defer></script>
13    <script src="./script03.js" defer></script>
14    <script src="./script04.js" defer></script>
15    <script src="./script05.js" defer></script>
16    <script src="./script06.js" defer></script>
17  </body>
18</html>
19

javascript/chapter11/script01.js

これは、最も基本的なif文のパターンです。ifの後ろの( )の中に条件を書き、その条件がtrue（真）の場合にのみ、続く{ }の中の処理が実行されます。

  • サンプルコード1: 条件がtrueなので、{ }の中のconsole.logが実行され、コンソールにメッセージが表示されます。
  • サンプルコード2: 条件がfalse（偽）なので、{ }の中の処理は実行されず、何も起こりません。
1// ifパターン
2
3// サンプルコード1
4if (true) {
5  console.log("サンプルコード1: この行が実行されます。");
6}
7
8// サンプルコード2
9if (false) {
10  console.log("サンプルコード2: この行は実行されません。");
11}

javascript/chapter11/script02.js

これは、if文にelseを追加したパターンです。ifの条件がtrueの場合はifの{ }が実行され、falseの場合はelseの{ }が実行されます。これにより、「もし○○ならA、そうでなければB」という分岐処理が可能になります。

  • サンプルコード3: 条件がtrueなので、ifブロックが実行されます。
  • サンプルコード4: 条件がfalseなので、elseブロックが実行されます。
1// if elseパターン
2
3// サンプルコード3
4if (true) {
5  console.log("サンプルコード3: この行は実行されます。");
6} else {
7  console.log("サンプルコード3: この行は実行されません。");
8}
9
10// サンプルコード4
11if (false) {
12  console.log("サンプルコード4: この行は実行されません。");
13} else {
14  console.log("サンプルコード4: この行は実行されます。");
15}

javascript/chapter11/script03.js

これは、if、else if、elseを組み合わせ、3つ以上の選択肢から処理を分岐させるパターンです。上から順番に条件が評価され、最初にtrueになったブロックの処理だけが実行されます。どの条件にも当てはまらなかった場合に、最後のelseブロックが実行されます。

  • サンプルコード5, 6: 最初のifの条件がtrueなので、その中の処理だけが実行され、以降のelse ifやelseは無視されます。
  • サンプルコード7: 最初のifはfalseですが、次のelse ifの条件がtrueなので、その中の処理が実行されます。
  • サンプルコード8: ifとelse ifのどちらの条件もfalseなので、最後のelseブロックが実行されます。
1// if...else if...elseのサンプルコード
2
3// サンプルコード5
4if (true) {
5  console.log("サンプルコード5: この行は実行されます。");
6} else if (true) {
7  console.log("サンプルコード5: この行は実行されません。");
8} else {
9  console.log("サンプルコード5: この行は実行されません。");
10}
11
12// サンプルコード6
13if (true) {
14  console.log("サンプルコード6: この行は実行されます。");
15} else if (false) {
16  console.log("サンプルコード6: この行は実行されません。");
17} else {
18  console.log("サンプルコード6: この行は実行されません。");
19}
20
21// サンプルコード7
22if (false) {
23  console.log("サンプルコード7: この行は実行されません。");
24} else if (true) {
25  console.log("サンプルコード7: この行は実行されます。");
26} else {
27  console.log("サンプルコード7: この行は実行されません。");
28}
29
30// サンプルコード8
31if (false) {
32  console.log("サンプルコード8: この行は実行されません。");
33} else if (false) {
34  console.log("サンプルコード8: この行は実行されません。");
35} else {
36  console.log("サンプルコード8: この行は実行されます。");
37}

javascript/chapter11/script04.js

ここからは、if文を使った具体的な練習問題です。このコードでは、年齢を判定しています。

変数checkAge（15）が、定数minorAge（18）以上（>=）であるかを判定します。15 >= 18という条件はfalseになるため、elseブロックの処理が実行され、「18歳未満です。」とコンソールに表示されます。

1// if文の練習問題
2// 年齢が18歳未満かを判定する
3let checkAge = 15;
4const minorAge = 18;
5
6if (checkAge >= minorAge) {
7  console.log("18歳以上です。");
8} else {
9  console.log("18歳未満です。");
10}

javascript/chapter11/script05.js

この練習問題では、if...else if...elseを使って、点数に応じたランク分けを行っています。

変数score（73）を使い、上から順に条件を判定します。

  1. score >= 80（73 >= 80）はfalseです。
  2. 次のscore >= 70（73 >= 70）はtrueです。 この条件が成立したため、else ifブロック内の処理が実行されて「Bランクです。」と表示され、それ以降の判定は行われません。
1// if文の練習問題
2// 点数が80点以上ならA、70点以上ならB、60点以上ならC、それ以外ならDでランク分けする
3let score = 73;
4
5if (score >= 80) {
6  console.log("Aランクです。");
7} else if (score >= 70) {
8  console.log("Bランクです。");
9} else if (score >= 60) {
10  console.log("Cランクです。");
11} else {
12  console.log("Dランクです。");
13}

javascript/chapter11/script06.js

この練習問題では、少し複雑な条件で合否を判定します。&&は「AND演算子」といい、「AかつB」のように、複数の条件が両方ともtrueのときにだけ、全体の条件がtrueになります。

このコードの条件は、「合計点数が400点以上」であり、かつ「一番低い点数が60点以上」であることです。

  • totalScore（合計点）は 370点です。
  • minScore（一番低い点数）は 60点です。

条件式totalScore >= 400 && minScore >= 60を判定すると、

  • 370 >= 400はfalse
  • 60 >= 60はtrue となります。false && trueとなり、&&は両方がtrueでないとtrueにならないため、全体の条件はfalseと判定されます。その結果、elseブロックの処理が実行され、「不合格です。」と表示されます。
1// if文の練習問題
2// 5教科の合計点数が400点以上、一番低い点数が60点以上なら合格、それ以外は不合格を判定する
3const scores = [70, 80, 60, 70, 90];
4const totalScore = scores.reduce((sum, s) => sum + s, 0);
5const minScore = Math.min(...scores);
6
7if (totalScore >= 400 && minScore >= 60) {
8  console.log(`合計点数: ${totalScore} 一番低い点数: ${minScore} 合格です。`);
9} else {
10  console.log(`合計点数: ${totalScore} 一番低い点数: ${minScore} 不合格です。`);
11}

おわりに

この記事では、JavaScriptのif文を使い、条件によって処理を分ける「条件分岐」の基本を学習しました。シンプルなif文だけでなく、else ifやelseを組み合わせることで、複数の選択肢に対応した処理を実現できます。年齢判定や成績評価のサンプルで見たように、if文はプログラムの動作を柔軟に制御するための強力なツールです。プログラミングの基礎となる重要な構文ですので、様々な条件を試して使い方に慣れていきましょう。

【JavaScript】if文の書き方と使い方の基本 | いっしー@Webエンジニア