【JavaScript】if文の使い方【条件分岐ができる】

JavaScriptのif文の使い方を教えてほしい。

この記事では、JavaScriptにおけるif文の使い方を解説します。

if文を使うことで、条件分岐した処理ができるので、ぐっと「プログラミング感」がでます。

そして、何より楽しいです。

では、そんなif文の書き方をみていきましょう！

また、下の動画でも「JavaScript」で「if文」を使う方法について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

if文とは？

冒頭でもちらっと書きましたが、if文を使うことで、「条件分岐の処理」が可能となります。

条件式を与えて、「このときは、こっちの処理」で「こうだったら、こっちの処理をしてね」、という様な命令がだせます。

JavaScriptにおける具体的なif文の書き方

では、JavaScriptにおけるif文というのは、「どのように書くのか」について解説していきます。

決まった書き方があるので、その範囲内で自由にプログラムを組むことができます。

その「決まった書き方」の部分をこれから解説していきますね！

if文はこのように書く。

if ( 条件式 ) {
    命令文
}

この様に、書くことで、if文は完成です。

まず条件式が評価されます。(真偽値変換変換などが行われる。)

その条件式の結果が「true」であるとき、命令文は実行されます。

反対に条件式の結果が「false」であるときは、命令文は実行されません。

「条件式の評価ってなに？」

「どのように評価されるの？」

ということに関しては、別記事で解説したいと思います。

if(条件式){命令文}

実際はこの様に、半角スペースと改行を無くした書き方も可能です。

ただ見やすいので慣習的に「改行やスペース」が入れらます。

別の条件を追加する方法

if ( 条件式1 ) {
    命令文1
} else if ( 条件式2 ) {
    命令文2
}

このように「else if () {}」を使うことで、条件を追加することができます。

まず条件式1が評価されて、それが「true」だった場合、命令文1が実行されて、それ以降の一連のif文は無視されます。(たとえ結果が条trueになるような条件式を与えても)

条件式1が「false」だった場合にのみ、条件式2の評価に移ります。

そして条件式2がtrueだった場合、命令文2が実行されて、それ以降のif文はスルーされます。

追加の条件式は何個でも付け加えられる。

追加の条件式は何個でも自由に付け加えることが可能です。

if ( 条件式1 ) {
    命令文1
} else if ( 条件式2 ) {
    命令文2
} else if ( 条件式3 ) {
    命令文3
} else if ( 条件式3 ) {
    命令文3
}

このように何個でも加えることが可能です！

面白いし、色々な場面で使えそうでワクワクしますよね！

全ての条件に合わなかった時に、実行される文の設定方法

if ( 条件式1 ) {
    命令文1
} else {
    全ての条件がfalseの時のみに実行される命令文
}

「else {}」を使うことで、全ての条件がfalseの時のみに実行される命令文を付け加えることが可能です。

実際にif文を使ってみる

では、実際にif文を使ってみます。

「prompt()」「alert()」「confirm」の使い方の解説は、下記の記事でしています！

「letって何？」という方は、下記の記事で解説しています。

let age = prompt("あなたの年齢はいくつですか？");

if ( 18 == age ) {
    alert( "成年おめでとうございます！" );
} else if ( age < 18 ) {
    alert( "未成年だね！" );
} else {
    confirm( "お酒は好きですか？" );
}

まず、「prompt()」でユーザーに年齢を入力してもらって、それを「age」という変数に代入します。

その受け取ったageという変数の値がもし「20」ならば、「成年おめでとうございます！」というアラートを出します。

そうでなくて、「18よりも小さければ」、「未成年だね！」というアラートを出します。

そうでもなかった場合は、「お酒は好きですか？」という質問をする、というプログラムを書きました。

今回はif文の使い方を解説する記事なので、実用的に作っていません。

例で書いたプログラムは欠陥があります。

「半角の数値のみを受け取らないと、うまく機能しない」

という点です。超初心者の方は、その欠陥に対象したプログラムを作ってみると、練習になるかもしれませんね！

<div>question</div>

let age;

document.querySelector("div").addEventListener('click', () => {
    question();

});

function res() {
    if ( 18 == age ) {
        alert( "成年おめでとうございます！" );
    } else if ( age < 18 ) {
        alert( "未成年だね！" );
    } else {
        confirm( "お酒は好きですか？" );
    }
}

function question() {
    age = prompt("あなたの年齢はいくつですか？(半角数字でお願い！)");
    console.log( age )
    if ( 
     age != null 
    && age != "true" 
    && age != "false"
    && age != ''
    && String(Number( age )) != String(NaN)  ) {
        res();
    } else {
        question();
    }
}

まとめ

JavaScriptでは、if文を使うと、条件分岐があるプログラムが書ける。

if ( 条件式1 ) {
    命令文1
} else if ( 条件式2 ) {
    命令文2
} else {
    命令文3
}

構文はこのような感じ。

追加の条件式は「else if」で何個でも付け加えれる。

上の条件式から評価されていき、初めて条件式が「true」となったもの「だけ」が実行される。

単に「else」を書くと、全ての条件式の結果が「false」だった時に実行される命令文が記述できる。

if文を使うことで、より様々なことが実現可能となるので、ぜひ使ってみてね！

また、下の動画でも「JavaScript」で「if文」を使う方法について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

最後まで読んでくれてありがとうございました！

では！