【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

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アクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次