JavaScript

【JavaScript】if文の使い方・書き方

本記事では、JavaScriptのif文の使い方・書き方について解説しています。条件式の書き方やtrue・falseの詳しい説明は省略しているため、詳細を知りたい方は下記の記事をご参照ください。

JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

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文の条件分岐では最初に条件式を満たしたブロック以外は無視されます。つまり、今回は処理②のブロックが最初に条件式を満たし実行されたため、処理③のブロックは条件式を満たしているが最初ではないため無視されたということになります。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村