JavaScriptにおける条件分岐―if文の使い方を初心者向けに３分で解説します。
if文を利用することで、"もし○○○なら●●●をする" というように、特定の条件を満たす場合に狙った処理を行うことができるようになります。
- if文の意味と使い方
- else / else if の使い方
- if文を利用したサンプルコード
JavaScript初心者であれば、絶対に知っておきたい超・基本知識です。理解できるよう、是非最後までご覧ください。
JavaScript：if文とは？
if文とは、その名の通り特定の場合にのみ処理を行いたい場合に用いる構文です。
例えば、「入力された値が ●●● であれば」や「ユーザが △△△ をクリックしたら」など、何らかの特定の条件に応じて処理を分岐させたい場合などです。
if文を利用することで、同じ操作でも時と場合によって異なる挙動をブラウザ上で表現できるようになります。
if文の書き方：構文ルール
if ( 条件 ) {
//条件が "true" の場合にのみ実行される処理
}上記のように記述することで、条件に合致する場合のみ行われる処理を記述することができます。
if文では最後の「;」セミコロンは不要です。可読性向上のため実際の処理を記述する行はインデントするようにしましょう。
次のようにelse条件を利用することで条件に合致しない場合の処理を定義することも可能です。
if ( 条件 ) {
//条件が "true" の場合の処理
} else {
//条件が "false" の場合の処理内容
}true
条件を満たす場合を "true" と呼びます。trueは日本語で「真」の意です。
false
条件を満たさない場合を "false" と呼びます。falseは日本語で「偽」の意です。
let number = 12; document.write(number > 10); //"true" が表示されます。 document.write(number > 20); //"false" が表示されます。
早速、サンプルコードを見ていきましょう。if文は、実際のコードを見て覚えるのが一番楽です。
if文：サンプルコード
See the Pen if文① by ビズドットオンライン (@BizOnline) on CodePen.
入力した値が奇数なのか偶数なのかを返してくれるコードです。これは、if文の条件式に「入力した値が偶数である場合」を指定しており、値が偶数であれば「〇〇は偶数です」と返すように、偶数でない場合は「〇〇は奇数です」と返すように記述しています。
①function文による関数定義
以下のコードでは、関数を定義しています。変数の値が、「偶数の場合/偶数ではない場合」の条件を定義し、それぞれに応じた処理を記述しています。
function judgement() {
let num = document.getElementById("sample").value;
if (num % 2 == 0) {
document.write(`${num}は偶数です`);
} else {
document.write(`${num}は奇数です`);
}
}
②formタグを利用した入力フォームの定義
HTMLのformタグを利用して、入力フォームを作成しています。ここに入力した値を、先ほど定義した関数で拾い偶数判定を行うようにしています。
<form name="sample">
数値を入力して「OKボタン」をクリックすると・・・<br>
<input type="text" id="sample" size="8">
<input type="button" value="OK" onClick="judgement()">
</form>else if文
これまでは、条件が２つ（true/falseの場合）だけでしたが、実際のプログラムでは条件が３つ以上になる場合も多く存在します。
例えば、先ほどのサンプルコードではユーザに「数値を入力してください！」としか指示をしていませんが、全角の数字（もしくは漢数字）など、半角数字を入力した場合はどうなるでしょうか？
「こんにちは」と入力してみてください。
See the Pen if文① by ビズドットオンライン (@BizOnline) on CodePen.
おそらく「あいうえおは奇数です」と表示されてしまったのではないでしょうか？
これは、「偶数の場合ではない」処理が行われているためです。「①偶数の場合 / ②それ以外」ではなく、「①偶数の場合 / ②奇数の場合 / ③それ以外」の３つの条件に分けて記述すべきです。そんな時に役立つのが「else if」です。
else ifの書き方：構文ルール
if ( 条件１ ) {
//条件１が "true" の場合の処理
} else if (条件２) {
条件２が "true" の場合の処理
} else {
条件が全て false の場合の処理内容
}else ifを利用することで、条件を複数指定することができるようになります。
３つ以上の場合は、以下のようにelse ifを追加していくだけでOK。
if ( 条件１ ) {
//条件１が "true" の場合の処理
} else if (条件２) {
条件２が "true" の場合の処理
} else if (条件３) {
条件３が "true" の場合の処理
} else {
条件が全て false の場合の処理内容
}else if：サンプルコード
else ifを用いたサンプルコードです。
以下では、偶数でも奇数でもない場合（半角数字が入力されなかった場合）の処理として「半角数字を入力してください」と表示するようにしています。
See the Pen if文② by ビズドットオンライン (@BizOnline) on CodePen.
JavaScriptを体系的に学びたい方は
プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
