駆け出しのエンジニア日記

プログラミング言語勉強中の奮闘日記

JavaScriptのif文

if文〜条件分岐〜

条件がtrueの場合に処理を行います。

 

例えば、jsファイル上で

let random = Math.random()
if (random < 0.5) {
 console.log('数字は0.5より小さい!');
 }

このように記述します。

コンソールでは、変数 random が0.5より小さい場合は true になり、「 数字は0.5より小さい! 」が表示されます。false の場合は何も表示されません。

if文は増やすことができるので連続してif文を記述することもできますが、

記述量が多くなったり、読みにくくなってくる可能性もあります。

そこで if と一緒に使うことができる、else if というものがあります。(条件を増やすことができます)

サンプルとして下記の条件分岐があったとします。

const dayOfWeek = 'monday';
if (dayOfWeek === 'monday') {
console.log('月曜日は憂鬱');
} else if (dayOfWeek === 'saturday') {
console.log('土曜日は最高');
}

変数を monday と定義した場合は「 月曜日は憂鬱 」と出力され、

saturday と 定義した際は、「 土曜日は最高 」と出力されます。

またelse if も下記のように映画チケットの条件分岐を続けて記述できます。

 // 0-5 無料
 // 5-10 子供料金
 // 10-65 大人料金
const age = 25;
if (age < 5) {
console.log('無料になります');
} else if (age < 10) {
console.log('子供料金なので1000円になります');
} else if (age < 65) {
console.log('大人料金なので2000円になります');
}

 

最後にif や else if を使用して何も true ではなかった場合の条件分岐の仕方を紹介します。

else というものを使用します。

先ほどの曜日の例で書いてみます。

const dayOfWeek = prompt('英語で曜日を入力してください');
if (dayOfWeek === 'monday') {
console.log('月曜日は憂鬱');
} else if (dayOfWeek === 'saturday') {
console.log('土曜日は最高');
} else if (dayOfWeek === 'friday') {
console.log('仕事が終わってからの花金は最高');
} else {
console.log('はぁ。。。');
}

月曜・土曜・金曜に該当しないものは else 以降の処理が行われます。

※  promptの使い方を解説します。

promptはダイアログで表示させたい文字列を引数に指定します。

promptの戻り値は入力された文字列になります。

prompt を使うことで下記のようにポップアップが出現します。

ここに曜日を英語で入力することで、条件分岐がされ、出力内容が変わってきます。

 

上記のサンプルコードはあくまで、if文などをわかりやすく説明するために書いたものなので至らないところあるかと思いますが、ご了承ください、、

 

今後条件分岐は多く使うことになるので覚えておきましょう。