JavaScript スキルアップ

【JavaScript】if文の基本から応用までを網羅。初心者・ド忘れした方にオススメ

こんにちは。
今回はJavaScript（以下JS）の基本公文の一つであるif文について書いていきます。
時間、計算、大小関係などの様々な条件で処理を変えたり、コンテンツの表示を変えたりと何かとよく使うif文。

この記事を見てくださっている方は、JSを勉強し始めた方、if文をど忘れした！って方に書いていきます。
是非if文を深く理解し、皆さんの制作に役立てて下さい。

目次

  • 1. If文とは？
  • 2. if文の使い方
  • 3. else ifの書き方の順番に注意
  • 4. 論理演算での条件分岐
  • 5 .「＝＝」と「＝＝＝」の違い
  • 6. falseになる特殊な条件
  • 7. if文の省略形
  • 8. 最後に。。

If文とは？

プログラミングの世界ではif文はいろんな言語で使われています。
どの言語でも「条件分岐」という項目で紹介されています。
与えられた条件に応じて処理を変えていくというものです。

「もしも〇〇の場合、△△をする」。
上の文では「〇〇の場合」が条件、「△△をする」が処理ですね。


if文の使い方

では、基本的なif文の構文を見ていきましょう。

if（条件）{
	//条件を満たしている場合（true）の処理
}

実例は下記となります。

var age = 20;
if(age >= 10){
	console.log('私は10歳以上です。');    // →→「私は10歳以上です。」
}

変数ageで定義した「20」という数値は、ifの条件の「10歳以上」を満たしているので、trueの処理「私は10歳以上です。」と処理されます。

では、定義した値が条件を満たしていない時の処理も書いていきましょう。
条件を満たしていない時の構文は下記の通りです。


if（条件）{
	条件を満たしている場合（true）の処理
}else{
	条件を満たしていない場合（false）の処理
}

実例は下記となります。

var age = 20;
if(age >= 30){
	console.log('私は30歳以上です。');
}else{
  console.log('私は30歳未満です。');    // →→「私は30歳未満です。」
}

上記の場合は、ageは定義した「20」より条件の「30以上」を満たしていないのでelse以下のfalse処理が行われます。

条件を追加したい場合はif～elseの間に「else if」を使います。

if（条件１）{
	条件１を満たしている場合（true）の処理
} else if(条件2){
  条件１は満たしていないが条件2を満たしている場合（true）の処理
}else{
	条件を満たしていない場合（false）の処理
}
var age = 20;
if(age >= 30){
	console.log('私は30歳以上です。');
}else if(age === 20){
  console.log('私は20歳です。');    // →→「私は20歳です。」
}else{
  console.log('私は30歳未満です。20歳でもありません。');
}

上記の例は定義した「20」は１つ目の条件「30以上」を満たしていないが、２つ目の条件の「20」を満たしています。

したがって処理結果は「私は20歳です。」となります。
例えば定義する数値を「25」にすると、処理結果は「私は30歳未満です。20歳でもありません。」となります。

else ifの書き方の順番に注意

if文の条件は記載順序に気を付けないと、思いがけない処理が行われないことがおきます。
どういうことかと言いますと、

var age = 20;
if(age <= 10){
	console.log('私は10歳以上です。');
}else if(age  <= 20){
  console.log('私は20歳以上です。');    // →→「私は20歳以上です。」
}else{
  console.log('私は10歳未満です。');
}

この場合、結果は「私は20歳以上です。」になります。
では次の書き方はどうでしょう？

var age = 10;
if(age <= 20){
	console.log('私は20歳以下です。');    // →→「私は20歳以下です。」
}else if(age <= 10){
  console.log('私は10歳以下です。');
}else{
  console.log('私は10歳未満です。');
}

処理結果は「私は20歳以下です。」になります。
しかしホントは「私は10歳以下です。」にしたいのですが、この順序だと想定どおりの処理はされません。（論理的には両方正解になっており例が少し悪いですねw）

論理演算での条件分岐

論理演算子とは「&&」、「||」、「!」の３つです。
&& は「かつ」
|| は「または」
! は「ではない」
です。

「&&」を使った分岐

まずは「＆＆」です。
if(A && B) と記載すれば、AかつB。
AとB両方でtrueが成り立つ条件となります。
どちらかがfalseであれば最終結果はfalseとなります。 

var age = 15;
if(age >= 0 && age < 20){
	console.log('私は未成年です。');    // →→「私は未成年です。」
}else{
  console.log('私は成人です。');
}

この例では変数ageの15は「0以上」であり「20未満」なので両方を満たし最終結果はtrueとなり処理結果は「私は未成年です。」となります。

しかし下記の場合

var age = 25;
if(age >= 0 && age < 20){
	console.log('私は未成年です。');
}else{
  console.log('私は成人です。');    // →→「私は成人です。」
}

変数ageの25は「0以上」であるが「20未満」ではないので、一つの条件を満たしていません。
なので最終結果はfalseとなり処理結果は「私は成人です。」になります。

「||」を使った分岐

「||」を使った分岐は、if( A || B)と記述し、AまたはB。
AとBのどちらかが条件を満たしていればtrueとなります。

var age = 20;
if(age = 0 || age == 20){
	console.log('私は0歳か20歳です。');    // →→「私は0歳か20歳です。」
}else{
  console.log('私は20歳ではないです。');
}

この例では、変数ageの20は「0歳ではないが20歳」なのでtrueとなります。
したがって処理結果は「私は0歳か20歳です。」となります。

「！」を使った分岐

「！」はtrueとfalseが逆になります。
例えば、if( !true)と記載すれば、if(false)と同意になります。

var judge = true;
if(!judge){
  console.log('判定は正しいです');
}else{
  console.log('判定は間違いです');   // →→「判定は間違いです」
}


「＝＝」と「＝＝＝」の違い

この2つは時々、紛らわしくなります。
「＝＝」は等価演算子、
「＝＝＝」は厳密等価演算子と呼ばれています。
これは実例を見た方が理解できます。

if('20' == 20){
	console.log('同じ値です');   // →→「同じ値です」
}else{
  console.log('異なる値です');   // →→「異なる値です」
}

結果はtrueとなり、「同じ値です」が返ってきます。
一行目に注目して下さい。
数値は「20」ですが「'20'」と「20」と記述されています。
つまり「＝＝」はString(文字)とNumber(数値)の様にデータタイプが異なっていても数値として「20」が等しければtrueとなります。

if('20' === 20){
	console.log('同じ値です');   // →→「同じ値です」
}else{
  console.log('異なる値です');   // →→「異なる値です」
}

しかし上記の場合はfalseとなり、「異なる値です」と処理されます。
「＝＝＝」はデータタイプも値も同じで無いとtrueにはなりません。

falseになる特殊な条件

比較演算子を使うとtrueやfalseを意図的に条件で分けることが可能なのですが、必ずfalseになる条件があります。
それは下記の５つの条件です。

  • 0（数値の０）
  • null（値が空）
  • NaN（Not a numberの略で数値では無いという意味）
  • undefined （値がまだ定義されていない）
  • ""（空の文字列）
if(undefined){
	console.log('trueです');
}else{
  console.log('falseです');
}

処理結果はfalseとなります。他の4つでも同じ結果になります。

if文の省略形

if文は下記の様に「else if」がなければ、

if（条件）{
	//trueの処理
}else{
  //falseの処理
}

一文に省略して記述することができます。
これも実際にみた方が理解しやすいと思います。

まずは通常のif文です。

var age = 30;
if(age >= 20){
	console.log('年齢は20以上です。');
}else{
  console.log('年齢は20未満です。');
}

これを下記の様に記述することができます。

var age = 30
age >= 20 ? console.log('年齢は20以上です。') : console.log('年齢は20未満です。');

「条件式 ? trueの処理 : falseの処理」

「？」と「：」を使うことでif文を一行にまとめることができます。

最後に。。

いかがでしたでしょうか？
If文の基本から紛らわしいポイント、演算子、省略形まで必要な項目をまとめてみました。
このページの内容が頭に入っていればif文のところで困ることは無いと思います。

いきなり全て覚える必要はありません。
振り返る時や、ど忘れした時に戻ってきて見直してくれれば幸いです。

ではまた！

-JavaScript, スキルアップ
-, , ,