JavaScriptでif文を使って条件分岐させる方法【初心者向け】現役エンジニアが解説

JavaScriptの使い方を初心者向けに紹介した記事です。

今回は、JavaScriptでif文を使って条件分岐させる方法について解説します。

 

目次

• 条件分岐（if文）の書き方
• 実際にif文を書いてみよう
• if文の注意点

 

【動画でも解説しています。クリックで見る！】

 

条件分岐（if文）の書き方

if文の基本文法

まずはif文の基本的な文法を説明します。

if (条件) {
  //条件がtrueであれば実行
}

(  )内に条件を書き、条件が一致すれば{  }内の処理が実行されます。

 

「条件がtrueである」とは？

JavaScriptをはじめとするプログラミング言語には、trueとfalseという概念があります。

どのようなコードがtrueでどのようなコードがfalseなのか理解するための第一歩として、「比較」を用いたサンプルコードを見てみましょう。

//(1)
if (1 === 1) {
  console.log('実行された')
}

//(2)
if (1 === 2) {
  console.log('実行された')
}

(1)と(2)のコードは、どちらも2つの数値を===（厳密等価演算子）を使って比較しています。

=== は、「比較した値同士が同一ならばtrue、異なればfalse」という役割を持っています。

したがって、(1)では1と1が同一なので条件がtrueとなり、console.logによって「実行された」と表示されます。

一方で、(2)では1と2が異なるので条件がfalseとなり、「実行された」と表示する処理は行われません。

このようにif文の条件には、必ずtrueかfalseを表すような内容を記述しなければなりません。

 

条件がfalseである時の条件式

「条件がtrue」である場合に処理を実行するにはifを使いましたね。

では、逆に「条件がfalse」である場合に処理を実行するにはどうするのでしょうか。

そのような場合、elseという記述を加えます。

 

具体的には、下記のようなコードになります。

if (1 === 2) {
  //この部分の処理は実行されない
} else {
  //1と2は異なるのでfalseになり、この部分の処理が実行される
}

ここではわかりやすくするために1と2を比較するという条件を使っているため、まだ実際にどのように活用できるのか伝わらないかもしれません。

しかし、本記事の後半で実際にif文を用いて実用性のあるコードを書いていきますので、現段階では文法を理解することに集中してみましょう！

 

条件が複数ある時の条件式

内容が多くなってきましたが、これで基本文法は最後です。

あと一息がんばりましょう。

JavaScriptの条件式には、ifとelseの他にelse ifという3つ目の記述があります。

これは判定したい条件が1つではない時に活用できます。

例えば以下のようなコードです。

const id = 2;

if (id === 0) {
  console.log('idが0')
} else if (id === 1) {
  console.log('idが0ではなく1')
} else if (id === 2) {
  console.log('idが0でも1でもなく2') //実行されるのはここ
}

このコードではまず最初にif条件のid===0が判定されます。

idは2なので、2===0はfalseとなり、次のelse if内の判定が始まります。

次の条件も2===1でfalseなので、3つ目の条件を判定し、ようやく2===2でtrueになりますね。

 

このように、else ifはelseと違って具体的な条件を指定できる点で有用な記述です。

これでJavaScriptの条件式の基本文法に関する説明は以上です。

 

[PR] フロントエンドで挫折しない学習方法を動画で公開中

実際にif文を書いてみよう

それでは、テストの点数を例にして実際に条件分岐のプログラムを書いていきましょう。

条件1：60点未満 → 不合格です！がんばりましょう！
条件2：60点以上80点未満 → 惜しい！もう一息です。
条件3：80点以上→ 合格です！おめでとう！

得点に応じて、上記のように表示されるプログラムを書いてみます。

 

まず、得点を、変数を使って次のように仮定しておきます（ここでは70点にしておきましょう）。

つづけて、1の条件を判定するためのif文を書いていきます。

<script>
const score = 70;

if (60 < score) {
  console.log("不合格です！がんばりましょう！") ;
}
</script>

ここでは比較演算子 < を用いて、scoreが60点未満ならばtrue、という条件を表現しています。

実際のscoreは70なので、ここでは何も実行されません。

 

次に2の条件を、else ifを活用して追記します。

<script>
const score = 70;

if (score < 60) {
  console.log("不合格です！がんばりましょう！") ;
} else if (60 <= score && score < 80) {
  console.log("惜しい！もう一息です。")
}
</script>

条件式の60 <= score && score < 80の部分が少しだけ複雑ですね。

これは「scoreが60点以上 かつ scoreが80点未満」という記述です。

言い換えると60点以上80点未満となりますね。

scoreは70なので、ここの条件がtrueになって「惜しい！もう一息です。」という文章がコンソールに表示されます。

※コンソールとはブラウザの検証ツールにあるJavaScriptの検証に便利な画面です。

検証ツールはGoogle Chromeの「その他のツール」から開くことができます。

 

最後に、条件3を、こちらもelse ifを使って追記します。

<script>
const score = 70;

if (score < 60) {
  console.log("不合格です！がんばりましょう！") ;
} else if (60 <= score && score < 80) {
  console.log("惜しい！もう一息です。")
} else if (80 <= score) {
  console.log("合格です！おめでとう！")
}
</script>

elseを使ってもよいのですが、条件式ではより限定的な書き方をすることがよいとされており、今回の場合はelse ifのほうが適しているといえます。

この条件は、既に一つ前の条件2がtrueになっているため、そもそも判定も行われません。

 

では、scoreを95にして再度実行してみましょう。

<script>
const score = 95;

if (score < 60) {
 console.log("不合格です！がんばりましょう！") ;
} else if (60 <= score && score < 80) {
console.log("惜しい！もう一息です。")
} else if (80 <= score) {
console.log("合格です！おめでとう！")
}
</script>

今度は最後の条件がtrueになり、「合格です！おめでとう！」と表示されます。

 

if文の注意点

条件分岐では、上から順に条件が一致した時点で処理が実行されます。

例えば次のようなプログラムですと、得点が80点の合格基準を上回っていても、else ifの処理ではなく、最初のifの処理が実行されてしまいます。

<script>
const score = 90;
if (score >= 70) {
  console.log("不合格です！おしい！"); //ここがtrueになりその時点で処理が終わる
} else if (score >= 80) {
  console.log("合格です！おめでとうございます！");
}
</script>

 

このような混乱を避けるために、それぞれの条件式は極力「重複する範囲がない」ように記述するのが原則です。

「実際にif文を書いてみよう」で解説したサンプルコードは、重複がないきれいな構造をしています。

今一度参照してみてください。

 

今回は以上です。

 

執筆してくれたメンター

高田悠（たかだゆう） JavaScriptを用いた実装など、フロントエンド領域の開発が得意。 なかでもWeb上での3D表現に興味があり、これまでにWebAR（AR=拡張現実）の実装案件を複数経験。 ワークライフバランスを重視し、趣味の音楽活動や釣りを楽しみつつフリーランス生活を送っている。

 

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！