【ES6】JavaScript：if文とは？

このページでは、JavaScriptを学ぶ上で欠かせない「if文」について、初めての方にもわかりやすく解説しています。

if文の基礎から実際に使える便利な方法まで紹介していますので、よければチェックしてみてください。

1. if文とは？

　
if文とは「もし◯◯だったら△△してね！」とプログラムに指示を出すための命令文のようなものです。

たとえば、次のような年齢確認で使われています。

これはまず「20歳以上かどうか」をチェックし、その結果によってサイトを表示するかどうかを決めています。

このように、if文を使うことで指定した条件に合わせて、プログラムの処理を変えられるようになります。

2. if文の基礎知識

ここではif文の基礎知識について解説します。

if文は次のような構成になっています。

if (条件式) {処理内容}

if

if文のifについての解説です。

if (条件式) {処理内容}

ifは「ここからif文を使うよ！」とプログラムに伝えるための合図のようなものです。

たとえば、会話中に相手が「もし〜」と話しはじめたら、「これから仮定の話が始まるんだな」と分かりますよね。

プログラムも同じで、ifを見たときに「ここからif文を書いているんだな」と理解します。

(条件式)

if文の(条件式)についての解説です。

if (条件式) {処理内容}

条件式とは()カッコ内に書く条件のことです。

正しく言うと「指定した条件に当てはまるか、当てはまらないかを調べる式」のことです。

条件式は次のように書きます。

if (age >= 20) {処理内容}

これは「もし、age（年齢）が20歳以上だったら」という意味です。

このときに20歳以上なら「当てはまる」、20歳より小さければ「当てはまらない」というふうに判断されます。

プログラムはこの結果をもとに次の処理内容へ進みます。

条件式の書き方

こちらが条件式の書き方になります。

変数　 記号 　値
age    >=    20

　
基本的には左から「変数→記号→値」の順番で書きます。

条件式を書くときは、そのまま文章に変換しても意味がわかるように心がけることがポイントです。

条件式の例

実際に条件式を書くと、次のような感じになります。

score >= 60　// スコアは60以上？

age < 18　// 年齢は18歳以下？

isLogin === true　// ログインしてますか？

name === "田中さん"　// 名前は田中さん？

条件式で使う記号一覧

{処理内容}

if文の{処理内容}についての解説です。

if (条件式) {処理内容}

処理内容とは{}カッコ内に書く、条件が当てはまったときにする処理の内容のことです。

実際に処理内容を書くと次のようになります。

if (score >= 80) {
  console.log("合格です");
}

console.log("合格です");の部分が処理内容にあたります。

このコードは「もしscore（点数）が80点以上だったら、コンソール画面に”合格です”とメッセージを表示する」という意味です。

条件に合っていればメッセージが表示され、条件が合っていなければ何も表示されません。

3. if文の書き方（基礎）

ここではif文の種類について解説しています。

if文は次のように3つ種類があります。

if文

ifの書き方、使い方を解説しています。

if (条件式) {
 // ここに条件が合っていたときにする処理を書く
}

　
if文は「もし◯◯なら△△するよ」とプログラムに指示を出すためのものです。

条件が合っていれば、その中に書いてある処理が実行されます。反対に条件が合っていなければ、その処理は行われません。

ただし、次の条件（else if、else）を書いている場合、次の条件に合うかどうか順番にチェックしていきます。

if文の例

let score = 85;

if (score >= 80) {
  console.log("評価：A");
}

評価：A

let score = 85;

if (score >= 80) {
  console.log("評価：A");
}

else if文

else ifの書き方、使い方を解説しています。

if (条件1) {
  // 条件1が合っていたときにする処理を書く
} else if (条件2) {
  // 条件2が合っていたときにする処理を書く
}

　
else if文は「もし◯◯ではなく▢▢なら✕✕をするよ」とプログラムに指示を出すためのものです。

if文の条件が合っていないときに、新たな条件でチェックするためのもだと考えるとわかりやすいです。

もし、指定した新たな条件に合っていれば、そのときに指定していた処理が行われます。

新たな条件にも合っていない場合は、さらに下に書かれているelse if、またはelseに進んでいきます。

else if文の例

const score = 75; // 75点の評価は？

if (score >= 80) {
  console.log("評価：A"); // 80点以上は「評価：A」
} else if (score >= 70) {
  console.log("評価：B"); // 70点以上は「評価：B」
}

評価：B

let score = 75;

if (score >= 80) {
  console.log("評価：A");
} else if (score >= 70) {
  console.log("評価：B");
}

else文

elseの書き方、使い方を解説しています。

if (条件1) {
  // 条件1が合っていたときにする処理を書く
} else if (条件2) {
  // 条件2が合っていたときにする処理を書く
} else {
  // どの条件にも合っていないときにする処理を書く
}

　
else文は「もしどの条件にも当てはまらなかったら☆☆をするよ」とプログラムに指示を出すためのものです。

if、またはelse ifの条件に当てはまらなかった場合、最後に必ず処理が行われるものだと覚えておきましょう。

else文の例

const score = 60; // 60点の評価は？

if (score >= 80) {
  console.log("評価：A"); // 80点以上「評価：A」
} else if (score >= 70) {
  console.log("評価：B"); // 70点以上「評価：B」
} else {
  console.log("評価：C"); // それ以外の点数は「評価：C」
}

評価：C

let score = 60;

if (score >= 80) {
  console.log("合格です");
} else if (score >= 70) {
  console.log("あと少しで合格です");
} else {
  console.log("不合格です");
}

4. if文の書き方（応用）

ここではif文の応用的な書き方をご紹介しています。

応用方法が分かると、より複雑な条件分岐を行うことができるようになりますのでプログラミングの幅が広がります！

複数条件の組み合わせ（入れ子）

複数条件の組み合わせ（入れ子／ネスト）の解説です。

if (条件1) {
  if (条件2) {
    // 条件1、条件2どちらも当てはまったときにする処理
  }
}

　
if文では複数の条件を入れ子（ネスト）のように使うことできます。

具体的には「もし◯◯で、さらに▢▢…だったら△△するよ」というように、条件を順番にチェックすることが可能です。

ゲームで例えると「ボスを倒していて、さらにカギを持っていたら次のステージへ進める」という感じです。

複数条件の組み合わせ（入れ子）の例

const hasKey = true;
const level = 12;

if (hasKey) {
  if (level >= 10) {
    console.log("宝箱が開いた！");
  }
}

宝箱が開いた！

const hasKey = true;
const level = 12;

if (hasKey) {
  if (level >= 10) {
    console.log("宝箱が開いた！");
  }
}

複数条件の組み合わせ（AND）

複数条件の組み合わせるための記号「&&（AND）」の解説です。

if (条件A && 条件B) {
  // 条件A、条件Bがどちらも当てはまったときの処理
} else {
  // どちらかが当てはまらないときの処理
}

　
&&は「もし◯◯と▢▢の両方が当てはまったら✕✕をするよ」という指示を出すためのものです。

たとえば、ハムエッグを作るには「ハム」と「たまご」の両方が揃わないと作れませんよね？

このように「2つ以上の条件が揃ったとき」のみ処理を行うという特徴があります。

どちらか1つでも条件が合っていなければ、その処理は行われませんので覚えておきましょう。

複数条件の組み合わせ（AND）の例

const isMember = true;
const age = 22;

if (isMember && age >= 18) {
  console.log("利用できます");
} else {
  console.log("利用できません");
}

利用できます

const isMember = true;
const age = 22;

if (isMember && age >= 18) {
  console.log("利用できます");
} else {
  console.log("利用できません");
}

複数条件の組み合わせ（OR）

複数条件の組み合わせるための記号「||（OR）」の解説です

if (条件A || 条件B) {
  // 条件Aか条件Bのどちらかが当てはまったときの処理
} else {
  // どちらの条件にも当てはまらないときの処理
}

　
||は「もし◯◯か▢▢のどちらかに当てはまっていれば✕✕をするよ」という指示を出すためのものです。

たとえば、朝食のとき「ごはん」か「パン」のどちらかがあれば食べることができますよね。

このように、いくつかある条件の中で、どれか1つでも当てはまれば処理が行われるという点です。

逆にどの条件にも当てはまらない場合は処理が行われません。

&&と少し似ていますが、次のような違いがありますので覚えておきましょう。

複数条件の組み合わせ（OR）の例

const hasTicket = false;
const hasMemberCard = true;

if (hasTicket || hasMemberCard) {
  console.log("入場できます！");
} else {
  console.log("入場できません…");
}

入場できます！

const hasTicket = false;
const hasMemberCard = true;

if (hasTicket || hasMemberCard) {
  console.log("入場できます！");
} else {
  console.log("入場できません…");
}

条件の否定（NOT）

条件の否定をするための記号「!（NOT）」の解説です。

if (!条件) {
  // 条件が「当てはまらない」ときに行う処理
} else {
  // 条件が「当てはまる」ときに行う処理
}

　
!は「もし◯◯じゃないときは✕✕をするよ」という指示を出すためのものです。

通常のif文では「雨だったら傘を持っていく」というように、条件が当てはまったときのみ処理が行われますよね。

しかし、NOTでは考え方を反対にして「晴れじゃないときは傘を持っていく」という書き方ができます。

つまり、雨でも曇りでも雪でも、ぜんぶ「晴れ以外」なので傘を持っていくことになるという仕組みです。

条件の否定（NOT）の例

const isSunny = false; // 晴れではない

if (!isSunny) {
  console.log("傘を持っていくよ");
} else {
  console.log("傘はいらないよ");
}

傘を持っていくよ

const isSunny = false;

if (!isSunny) {
  console.log("傘を持っていくよ");
} else {
  console.log("傘はいらないよ");
}

for文との組み合わせ（for）

if文とfor文との組み合わる方法の解説です。

for (初期値; 条件式; 増減) {
  if (条件) {
    // 条件が合っていたときにする処理を書く
  }
}

　
if文とfor文を組み合わせると「同じことを何回もしながら、条件によってやることを変える」ことができるようになります。

通常では、くり返し処理の中で条件に応じた判断をするたびに同じコードを書かなければなりません。

しかし、for文の中にif文を入れておけば、くり返しごとに条件をチェックして必要な処理だけを自動で実行できます。

if文とfor文との組み合わせる例

const scores = [95, 75, 60, 85];

for (let i = 0; i < scores.length; i++) {
  if (scores[i] >= 90) {
    console.log("A評価");
  } else if (scores[i] >= 70) {
    console.log("B評価");
  } else {
    console.log("C評価");
  }
}

A評価
B評価
C評価
B評価

const scores = [95, 75, 60, 85];

for (let i = 0; i < scores.length; i++)

if (scores[i] >= 90) {
    console.log("A評価");
  } else if (scores[i] >= 70) {
    console.log("B評価");
  } else {
    console.log("C評価");
  }

forf文についてはこちらで詳しく解説しています。
【ES6】JavaScript：for文の書き方

関数内でif文を使う（function）

関数内でif文を使う方法の解説です。

function 関数名(引数) {
  if (条件1) {
    // 条件1が合っていたときにする処理を書く
  } else if (条件2) {
    // 条件2が合っていたときにする処理を書く
  } else {
    // どちらの条件にも合わなかったときの処理を書く
  }
}

// 関数を呼び出す例
関数名(値1); // → 条件1に合ったときの処理が実行
関数名(値2); // → 条件2に合ったときの処理が実行
関数名(値3); // → どちらにも合わなかったときの処理が実行

　
関数の中でif文を使うと、一度作った「もし◯◯だったら△△するよ」という条件をあとから何回も使えるようになります。

通常では同じ条件のif文をもう一度使いたいときは、同じ内容のコードをもう一度書かなければなりません。

これでは、あとで内容を変えたくなったときに、あちこちにあるコードを探して一つずつ直さないといけなくなります。

しかし、関数の中にif文を入れておけば、あとから関数を呼び出すだけで何度も使うことができます。

コードが1か所にまとまっているので、直したいときもそこを直すだけで済むというメリットがあります。

関数内でif文を使う例

function checkScore(score) {
  if (score >= 90) {
    console.log("A評価");
  } else if (score >= 70) {
    console.log("B評価");
  } else {
    console.log("C評価");
  }
}

// 関数を呼び出す
checkScore(95);
checkScore(75);
checkScore(60);

A評価
B評価
C評価

function checkScore(score) {}

if (score >= 90) {
    console.log("A評価");
  } else if (score >= 70) {
    console.log("B評価");
  } else {
    console.log("C評価");
  }

checkScore(95);
checkScore(75);
checkScore(60);

早期リターン（return）

早期リターン（return）の解説です。

function sample() {
  if (条件1) {
    return; // 条件1に当てはまったらここで終わり
  }

  if (条件2) {
    return; // 条件2に当てはまったらここで終わり
  }

  // どの条件にも当てはまらなかったときの処理
}

　
早期リターンは「もし◯◯だったら、もうこれ以上続きをしなくていいよ」という指示を出すためのものです。

たとえば、先生からこんなふうなお願いされたとします。

この「もし教室がキレイだったら→掃除しないで終了」というところが早期リターンと同じです。

つまり、ある条件が当てはまったら、そこですぐに終わりにして続きはやらないということです。

早期リターンの例

ここでは分かりやすいように「早期リターンなし」と「早期リターンあり」の2つのバージョンを載せています。

早期リターンなし版

function login(userId, password) {
  if (userId) {
    if (password) {
      console.log("ログイン成功！");
    } else {
      console.log("パスワードを入力してください");
    }
  } else {
    console.log("ユーザーIDを入力してください");
  }
}

評価：B

function login(userId, password) {}

if (userId) {
    if (password) {
      console.log("ログイン成功！");
    } else {
      console.log("パスワードを入力してください");
    }
  } else {
    console.log("ユーザーIDを入力してください");
  }

早期リターンあり

function login(userId, password) {
  if (!userId) {
    console.log("ユーザーIDを入力してください");
    return;
  }

  if (!password) {
    console.log("パスワードを入力してください");
    return;
  }

  console.log("ログイン成功！");
}

function login(userId, password) {}

if (!userId) {
    console.log("ユーザーIDを入力してください");
    return;
  }

  if (!password) {
    console.log("パスワードを入力してください");
    return;
  }

  console.log("ログイン成功！");
}

5. if文の注意点

ここではif文を書くときの注意点を解説しています。

書く順番を気をつける

if文を書くときは、条件を並べる順番に気をつけましょう。

if文は上から順番に条件をチェックしていき、当てはまったところで処理を止める仕組みになっています。

そのため、条件の順番を間違えると、思っていたのとはまったく違う結果になることがあります。

順番が正しい例

let score = 85;           // scoreは85点です

if (score >= 80) {         // scoreが80点以上なら…評価：A
  console.log("評価：A");
} else if (score >= 70) {  // scoreが70点以上なら…評価：B
  console.log("評価：B");
} else {
  console.log("評価：C");
}

評価：A

こちらは順番が正しい例です。

上から順番にチェックしていくと、最初の条件「scoreが80点以上なら…評価：A」に当てはまります。

scoreは85点なので「評価：A」になります。

順番をまちがえた例

let score = 85;           // scoreは85点です

if (score >= 70) {          // scoreが70点以上なら…評価：B
  console.log("評価：B");
} else if (score >= 80) {   // scoreが80点以上なら…評価：A
  console.log("評価：A");
} else {
  console.log("評価：C");
}

評価：B

こちらは順番をまちがえた例です。

上から順番にチェックしていくと、最初の条件「scoreが70点以上なら…評価：B」に当てはまります。

if文は最初の条件が当てはまったら処理を終えるので、scoreが85点にも関わらず「評価：B」になりました。

本来であれば85点の評価はAとなるはずですが、書く順番を間違えたことにより意図しない結果になってしまいました。

= と == を書き間違える

この2つの記号は見た目は似ていますが、役割はまったく違います。

a = 10   // 「10」を「a」という名前の箱に入れる
a == 10  // 「a」と「10」の値が同じか調べる

実は==を=と書き間違えるケースが意外多いです。

プログラミングで使う=は「同じ」という意味ではなく、「右のものを左の箱に入れる」という意味です。

そのため、もし間違えると「比較するつもりが、箱に入れてしまった」ということが起きてしまいますので注意しましょう。

条件式に入れるとfalseになる値

下記の値を条件式に入れると「false（いいえ）」と判断されます。

if (条件式) // 条件式に入れると「false」になるケース

なぜfalse（いいえ）になる？

条件式に特定の値を入れると「false（いいえ）」になる理由は、条件が成り立たなくなるからです。

if文ではまず最初に「この条件が合ってる？それとも合ってない？」とチェックしてから処理を行っていますよね。

しかし、条件そのものが「空っぽ」や「まだ決まっていない状態」 の場合、プログラムはどう判断していいかわからなくなります。

日常会話でたとえると、こんな感じです。

相手が何を言ってるのかわからない場合、返答に困りますよね。

これと同じように条件が意味不明な場合、プログラムは理解できないため、自動的にfalse（いいえ）と判断してしまいます。

6. if文に似た構文

ここではif文の代わりに使われる構文をご紹介しています。

これらをif文の代わりに使うことで、コードが読みやすくなる場合があるので知っておくと便利です。

条件演算子（三項演算子）

if文に似た構文、条件演算子（三項演算子）の解説です。

条件 ? 処理1 : 処理2;

// 条件が当てはまった場合 → 処理1を実行
// 条件が当てはまらない場合 → 処理2を実行 

　
条件演算子（三項演算子）は「もし◯◯なら△△、そうでなければ□□をするよ」という指示を出すためのものです。

「条件が合っていたときと、合っていないときの処理を1行で決められるもの」と考えるとわかりやすいです。

条件が正しければ?のあとに書いた処理が行われ、条件が正しくなければ:のあとに書いた処理が実行されます。

条件演算子は条件が2つだけでの場合にしか使えないので、条件がたくさんあるときはif文を使いましょう。

条件演算子（三項演算子）の例

const age = 20;

const message = age >= 18 ? "大人です" : "未成年です";
console.log(message);

大人です

const age = 20;

const message = age >= 18 ? "大人です" : "未成年です";
console.log(message);

Switch文

if文に似た構文、Switch文の解説です。

switch (値) {
  case 値1:
    // 値が値1と一致した場合に実行する処理
    break;
  case 値2:
    // 値が値2と一致した場合に実行する処理
    break;
  default:
    // どの値にも当てはまらなかった場合に実行する処理
}

　
Switch文は「◯◯だったら△△をする」「□□だったら☆☆をする」というように、複数の条件をまとめて書くためのものです。

「たくさんの選択肢の中から、当てはまるものだけを実行するもの」と考えるとわかりやすいです。

複数の条件を順番にチェックしていき、当てはまったときに指定していた処理が行わます。

どれにも当てはまらなければ、最後に書いたdefaultの処理が行われるようになっています。

Switch文の例

const day = "金";

switch (day) {
  case "月":
    console.log("月曜日です");
    break;
  case "火":
    console.log("火曜日です");
    break;
  default:
    console.log("その他の日です");
}

その他の日です

const day = "金";

switch (day) {
  case "月":
    console.log("月曜日です");
    break;
  case "火":
    console.log("火曜日です");
    break;
  default:
    console.log("その他の日です");
}

7. よくある質問

ここでは、JavaScriptのif文に関するよくある質問と回答をまとめています。

真偽値（Boolean）ってなに？

真偽値（Boolean）とは、次のように条件の答えを表す値です。

　
わかりやすく言えば、◯✕クイズの回答ボタンのようなものです。

プログラムはこの真偽値によって、次にする処理を決めています。

真偽値の例

このように、プログラムは「true（はい）」か「false（いいえ）」を決めてから、次にすることを選んでいます。

なぜ条件式で変数を左側に書く？

結論から言うと読みやすいからです。

次のように実際にコードを比較してみると分かりやすいと思います。

if (score >= 50) 

こちらは「スコアが50以上なら～」という意味です。

文章にするととても読みやすいですよね。

if (50 <= score)

こちらは「50がスコア以上なら～」という意味です。

かなり違和感がある文章ですよね。

このように実際に文章にしてみると、変数を左側に書いたほうが理解しやすいことがわかると思います。

変数を右側に書くケース

次のようなケースでは、変数を右側にも書くことがあります。

if (50 <= score && score <= 80)

こちらは「スコアが50以上、80以下なら～」という意味です。

1行で書けないの？

if文を1行で書くこと可能です。

たとえば、次のようなコードの場合…

if (score >= 80) {
  console.log("評価：A");
}

このように{}を省略して書くことがきます。

if (score >= 80) console.log("評価：A");

OR（||）は3つ以上の条件で使える？

OR（||）は3つ以上の条件でも使えます。

たとえば、次のように書けます。

const score = 90;

if (score === 100 || score === 90 || score === 80) {
  console.log("合格！");
}

合格！

この場合、scoreが「100点」「90点」「80点」のどれかに当てはまれば処理が実行されます。

OR（||）は「条件が複数あって、どれか1つでも当てはまればOK！」というときに便利です。

入れ子を何段でも増やせる？

結論から言うと、入れ子は何段でも増やすことができます。

ただし、下記のように入れ子（階層）を深くすると、コードが見づらくなるため個人的にはおすすめしません。

if (条件1) {
  if (条件2) {
    if (条件3) {
      if (条件4) {
        if (条件5) {
          // 条件1〜5のすべてが当てはまったときに実行される処理
        }
      }
    }
  }
}

基本的にif文に限らずコードを書くときは、できるだけシンプルで見やすくすることが大切です。

「本当に入れ子で書く必要があるのか？」を考えてから書くようにしましょう。

8. まとめ