JavaScriptでIF文を使って条件分岐させる方法【初心者向け】

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

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

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

本記事は下記の流れで説明していきます。

• 条件分岐（if文）の書き方
• 実際にif文を書いてみよう
• 複数の条件で分岐させる（else if）
• if文の注意点

 

 

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

まず、if文の書き方を説明します。

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

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

 

ちなみに、条件が一致することを「真(true)」、一致しないことを「偽(false)」と言います。

if文に「偽」を加えたい場合は、次のようにコードを書き加え、条件を分岐させます。

if (条件) {
条件が真であれば実行
} else {
条件が偽であれば実行
}

ifの条件が当てはまればifの処理、当てはまらなければelseの処理が実行されます。

JavaScriptでif/else文の条件式が複数あるときの書き方も合わせて理解しておきましょう。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

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

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

80点以上 → 合格です！おめでとうございます！
80点未満 → 不合格です！がんばりましょう！

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

 

まず、得点を、変数を使って次のように仮定しておきます（ここでは90点にしておきましょう）。続けて、if文を書いていきます。

<script>
var score = 90;
if (score >= 80) {
document.write(“合格です！おめでとうございます！”) ;
}
</script>

この場合、得点は80点以上という条件を満たしていますから、ブラウザではこのように表示されます。

 

次に、この条件に一致しない場合の処理を書き加えます。

<script>
var score = 90;
if (score >= 80) {
document.write(“合格です！おめでとうございます！”);
} else {
document.write(“不合格です！がんばりましょう！”);
}
</script>

これを実行しても、「合格です！おめでとうございます！」の表示は変わりません。scoreの値が90のままですから、当たり前ですね。

 

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

<script>
var score = 60;
if (score >= 80) {
document.write(“合格です！おめでとうございます！”);
} else {
document.write(“不合格です！がんばりましょう！”);
}
</script>

すると、ifの条件が合わなくなったので、elseの処理がなされました。

基本的な書き方はこれだけです。

 

 

複数の条件で分岐させる（else if）

条件分岐を使う際に、複数の条件で分岐させるともできます。その時に使うのが、else ifです。

else ifは、条件分岐のなかで次のように加えることができます。

<script>
if (条件) {
条件が真であれば実行
} else if (条件2) {
条件2が真であれば実行
}
else {
条件が偽であれば実行
}
</script>

ifの条件が真ならばifの処理、満たさなければ次のelse ifの処理、ifとelse ifどちらの条件も満たされなければelseの処理が実行されるという流れになります。

このように条件分岐では、else if(条件2)、else if(条件3)、else if(条件4)……といった具合にelse ifを使っていくらでも条件を追加していくことができます。

 

それでは、さきほどの得点のプログラムにelse if文を加えてみましょう。

<script>
var score = 60;
if (score >= 80) {
document.write(“合格です！おめでとうございます！”);
} else if (score >= 70) {
document.write(“不合格です！おしい！”);
}
else  {
document.write(“不合格です！がんばりましょう！”);
}
</script>

 

この場合は、80点以上なら合格、70点以上なら不合格（おしい）、どちらでもないときは不合格（がんばりましょう）の処理が実行されます。

 

ちなみに、このまま実行すると、

となります。

 

ここでscoreを79に変えてみましょう。すると、このように表示されます。

 

 

if文の注意点

条件分岐では、上から順に条件が一致した時点で処理が実行されます。例えば次のようなプログラムですと、得点が80点の合格基準を上回っていても、else ifの処理ではなく、最初のifの処理が実行されてしまいます。

<script>
var score = 90;
if (score >= 70) {
document.write(“不合格です！おしい！”);
} else if ($score >= 80) {
document.write(“合格です！おめでとうございます！”);
} else {
document.write( “不合格です！がんばりましょう！”);
}
</script>

ですので、条件分岐を書くときは、上から優先的に実行されるという性質を踏まえて、条件の処理を作っていく必要があります。この点は注意しておきましょう。

 

今回は以上です。

JavaScriptの他にPHPの条件分岐（if文）についての記事もあるので、合わせてご覧ください。

 

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。