【JavaScript】if文を使った条件分岐の書き方を分かりやすく解説！

JavaScript

こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！

今回は、if文を使った条件分岐の書き方を分かりやすく解説します。
条件分岐を使えると様々なことが実現できるようになるので、if文を覚えてリッチなWebサイトを作ろう！

条件分岐とは？

条件分岐とは、◯◯だったらこれを表示、◯◯の後にこれを実行など、条件を指定して様々なことができます。

例えば、Webサイトを見るお客さんがパソコンだったら◯◯を表示、スマホだったら◯◯を表示と、環境によって違うものを表示させることが可能です。

環境以外にも、Webサイトを初めて見た人と2回目の人を分けることや、◯月◯日の前と後で分けるなど、工夫次第で色々できます。

if文とは？

条件分岐には「if（イフ）文」と「switch（スイッチ）文」の2種類があります。

if文の特徴は、色々な条件を書くことができ、switch文の特徴は、特定のデータの値で分岐させたい時に完結に書けます。

if文の方が使用頻度が高く、分かりやすいため、ここではif文について解説したいと思います。

if文の書き方

では早速、if文を書いてみます。

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

これがif文の基本の書き方です。
ifの後のカッコに条件を書き、その条件が真(true)であれば実行されます。

これを踏まえてサンプルを書いてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>○○○</title>
    <meta name="keywords" content="○○○,○○○,○○○">
    <meta name="description" content="○○○">
</head>
<body>

<script>
    var name = 'ユウ';

    if (name == 'ユウ') {
        document.write('名前はユウです');
    }
</script>

</body>
</html>

コードをコピーし、index.htmlと名前で保存してブラウザで開いてみると、「名前はユウです」と表示されるかと思います。

解説すると、var nameでユウという値で変数を宣言し、if (name == ‘ユウ’)で、nameとユウが一致するので、その中のdocument.writeが実行されました。

これを違う名前にすると、

var name = 'ユウ';

if (name == 'ケイ') {
    document.write('名前はユウです');
}

条件が一致しないため偽(false)となり、document.writeは実行されません。

else、else ifを使う

elseとelse ifを使うとさらに条件分岐を増やすことができます。
サンプルを書いてみます。

var name = 'ケイ';

if (name == 'ユウ') {
    document.write('名前はユウです');
} else {
    document.write('名前はケイです');
}

nameはケイと宣言していますが、if文の条件は「nameがユウ」なのでfalseになり、elseに書かれたコードが実行されます。

elseを書くことで、trueとfalseの2パターンで実行させることができます。

さらにelse ifを使うと、

var name = 'ケイ';

if (name == 'ユウ') {
    document.write('名前はユウです');
} else if (name == 'ケンジ') {
    document.write('名前はケンジです');
} else {
    document.write('名前はケイです');
}

と、条件を増やすことができます。
この場合は、条件1のユウでも、条件2のケンジでもないため、elseに書かれたコードが実行されます。

比較演算子

比較演算子と聞くと拒否反応がでる人もいると思いますが、直感的なので覚えてしまいましょう。
比較演算子の一覧は以下になります。

演算子説明
==左右が等しい場合にtrueを返す
!=左右が等しくない場合にtrueを返す
>左の方が大きい場合にtrueを返す
<右の方が大きい場合にtrueを返す
>=左の方が大きい場合と等しい場合にtrueを返す
<=右の方が大きい場合と等しい場合にtrueを返す

この他にも厳密演算子と言って、型も含めて比較する「===」[!==]がありますが、ここでは割愛します。

問題

ここでクイズ形式にして条件分岐をいくつか書いてみます。
どちらが実行されるか考えてみましょう。

問1

var name = 'ユウ';

if (name == 'ユウ') {
    document.write('条件一致');
} else {
    document.write('条件不一致');
}

問2

var num = 5;

if (num > 3) {
    document.write('条件一致');
} else {
    document.write('条件不一致');
}

問3

var num = 5;

if (num >= 5) {
    document.write('条件一致');
} else {
    document.write('条件不一致');
}

問4

var num = 5;

if (num > 10) {
    document.write('条件一致');
} else if (num == 5) {
    document.write('条件一致2');
} else {
    document.write('条件不一致');
}

問5

var name = 'ユウ';

if (name != 'ユウ') {
    document.write('条件一致');
} else {
    document.write('条件不一致');
}

いかがでしたでしょうか？
問5は難しかったかもしれません。

最後に

以上、if文を使った条件分岐の書き方を解説しました。

if文を使えばJavaScriptの幅が広がり、工夫次第で色々なことができるようになります。

少しでも参考になれば嬉しいです。

最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。

コメント

タイトルとURLをコピーしました