本記事では、JavaScriptのif文の使い方・書き方について解説しています。条件式の書き方やtrue・falseの詳しい説明は省略しているため、詳細を知りたい方は下記の記事をご参照ください。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
| 出版社 | 技術評論社 |
|---|---|
| 著者 | 山田 祥寛 |
| 発売日 | 2023/2/13 |
| ページ数 | 624ページ |
| レビュー (Amazon) | (4件) |
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
Contents
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文の条件分岐では最初に条件式を満たしたブロック以外は無視されます。つまり、今回は処理②のブロックが最初に条件式を満たし実行されたため、処理③のブロックは条件式を満たしているが最初ではないため無視されたということになります。
DMM WEBCAMP 
CodeCamp 
TechAcademy 
