本記事では、JavaScriptのif文の使い方・書き方について解説しています。条件式の書き方やtrue・falseの詳しい説明は省略しているため、詳細を知りたい方は下記の記事をご参照ください。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
if文の使い方・書き方
先輩くんif文の基本的な書き方は以下のとおりだよ！
if(条件式) {
処理①
} else{
処理②
}- 条件式：分岐させたい処理の条件を記述
- 処理①：条件式がtrue(真)の時に実行させたい処理を記述
- 処理②：条件式がfalse(偽)の時に実行させたい処理を記述
先輩くんtrue,falseは論理値のことを表しているよ！条件式を満たしている場合はtrueで、満たしていない場合はfalseになるよ！
簡単なサンプルコードを用意したので、動作確認してみましょう。
let num = 20;
if (num >= 15) {
console.log("変数numは15以上の数字だよ！"); // 処理①
} else {
console.log("変数numは15以下の数値だよ！"); // 処理②
}上記コードを実行すると、コンソールに「変数numは15以上の数字だよ！」と表示されます。これは処理①が実行されているので、条件式を満たしていることが分かります。
次に変数numの値を10に変更するとどうなるでしょうか？
let num = 10;これは、先ほどと違い「変数numは15以下の数字だよ！」と表示されます。これは処理②が実行されているので、条件式を満たしていないことが分かります。
先輩くんelseは省略可能だから、条件式を満たしていない時に何も実行する処理がないときは以下のように書くことが出来るよ！
let num = 20;
if (num >= 15) {
console.log("変数numは15以上の数字だよ！");
}else if
先輩くんif文の基本的な書き方が分かってきたら、条件分岐を更に細かくするelse ifの使い方について解説するよ！
if(条件式) {
処理①
} else if(条件式){
処理②
} else {
処理③
}- 条件式：分岐させたい処理の条件を記述
- 処理①：if文の条件式がtrueの時に実行させたい処理を記述
- 処理②：if文の条件式がfalseでelse if文の条件式がtrueの時に実行させたい処理を記述
- 処理③：全ての条件式がfalseの時に実行させたい処理を記述
先輩くんelse if文は複数回使用することが可能だよ！
簡単なサンプルコードを用意したので、動作確認してみましょう。
let num = 45;
if (num >= 50) {
console.log("変数numは50以上の数字だよ！"); // 処理①
} else if (num >= 40) {
console.log("変数numは40以上の数値だよ！"); // 処理②
} else if (num >= 30) {
console.log("変数numは30以上の数値だよ！"); // 処理③
} else {
console.log("全ての条件式を満たしていないよ！"); // 処理④
}上記コードを実行すると、コンソールに「変数numは40以上の数値だよ！」と表示されます。
何故、「変数numは30以上の数値だよ！」が表示されないの？と疑問に思いますよね。if文の条件分岐では最初に条件式を満たしたブロック以外は無視されます。つまり、今回は処理②のブロックが最初に条件式を満たし実行されたため、処理③のブロックは条件式を満たしているが最初ではないため無視されたということになります。
