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

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

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

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

 

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

 

なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。

 

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

 

目次

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

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

 

 

田島メンター！if文というのは何でしょうか？

 

 

条件によって処理を変えたり、値によって処理したりしなかったりするための書き方なんだよね。

 

 

処理の幅が広がりそうですね。

 

 

他のプログラミング言語でも同じなので、if文はしっかり覚えよう！さっそく書き方を見てみよう！

 

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

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

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

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

 

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

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

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

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

 

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

実際に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文）についての記事もあるので、合わせてご覧ください。

 

 

if文は条件に合えば実行される。else ifでさらに条件をつけていくことが出来る。その他の処理を指定したいときは、elseをつけるという感じですか？

 

 

その通り！else ifでたくさん条件をつけてもいいけど、一度条件に当てはまると他の条件の処理は出来ないんだ。少し注意が必要かな。

 

 

なるほど～。if文マスターしました！

 

 

今回のサンプルでは、点数に応じて表示されるメッセージが変わるだけだけど、PHPプログラムとjQueryを連帯して、データベースに合格用と不合格用に分けて登録なんてのもいいね！

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。