if 分岐
(1) はじめに
　コンピュータを使うと，とても速く計算できますが，もし「分岐」がなければ１つのプログラムは１つのことしかできないことになります．
　これに対して，条件に応じて分岐（場合分け）できると，様々な条件に対応できるプログラムが書けるようになります．
 (2) 同値演算子と比較演算子
　このページでは，if分岐を使ったプログラミングを学ぶために，サブテーマとして同値演算子と比較演算子も学びます．
サブテーマ)　同値演算子 ==
　数学とは異なり，１つの等号( = )は右辺の値を左辺の変数に代入する「代入演算子」として使われ，等しいかどうか調べることには使いません．
　等しいかどうか調べるには，右辺の値と左辺の値を比較して，等しければ真，等しくなければ偽となる「同値演算子」(2つの等号を並べた == )を使います．
　等しくないかどうかを調べるには != を使います．

(3) if分岐の基本
-- 3.1 --
if(条件)
{処理1;
処理2;
…
}
　条件が満たされたときに実行される処理1, 処理2, …を書くには右の3.1のように書きます．
　この if文 を書く上で注意点が２つあります．
① 実行する処理をブロック{ 　 }で囲むこと
② if(条件)の行末にセミコロン( ; )を付けないこと

-- 3.2 --
if(条件)
処理1;
処理2;
…
→①：もしもブロック{ 　 }で囲まずに，右の3.2のように書いたとすると，if(条件)が働くのは処理1までとなり，処理2には届きません．これは処理2という分が字下げ（インデント）して書かれているかどうかには関係ありません．
　右の3.2の書き方は，if(条件)を単文の処理1のみに働かせる書き方で，条件を満たしているかどうかに関わらず処理2は無条件に(*)実行されます．
-- 3.3 --
if(条件);
{処理1;
処理2;
…
}
→②：もし，if(条件)の行末（右端）に右の3.3のようにセミコロン( ; )を書いてしまうと，書いている人の意図がどうであっても，if(条件)は空文( ; )のみに働き，次のプログラムと同じになります．
if(条件)
;
{処理1;
処理2;
…
}
　if(条件);と書くと，if(条件)が満たされるかどうかに関わらず処理1, 処理2とも無条件に(*)実行されます．
-- 3.4 --
if(条件){
処理1;
処理2;
…
}
　書物によっては，if(条件)を右の3.4のスタイル--C言語の創始者カーニハンとリッチの教科書に使われたスタイルで，K&Rスタイルと呼ばれる --で書かれていることがあります．このスタイルで書けば，if(条件)の行末（右端）にセミコロン( ; )を書いてしまうミスを防げる長所がありますが，if(条件)やforループなどが何重にも使われている場合に，ブロック{ 　 }の初めと終わりの対応関係が分かりにくいという短所もあります．
-- 3.5 --
if(条件1)
{if(条件2)
{処理A;
…
}
}

この教材の管理人はK&Rスタイルを採用せず，ブロック{ 　 }の初めと終わりを縦に並べる右の3.5のスタイルにしています．

-- 3.6 --
関数の中で
if(条件1)
return;
if(条件2)
return;
処理2;
(*)の箇所：ほとんどの場合，無条件に処理2が実行されますが，処理1がreturn;など制御の流れを変える命令になっていれば，処理2が実行されない場合があります．
　右の3.6が関数の中にある場合，条件1, 2のどちらも満たさない場合だけ処理2に進みます．

【例3.1】
xx1 = 5;
yy1 = 0;
zz1 = 0;
if(xx1 == 5)
{yy1 = 6;
zz1 = 7;
}
document.write(yy1);
document.write(zz1);
⇒ 67 と表示される（document.write(yy1);に改行タグを書いてないので，6の続きに7が表示される）
【例3.2】
xx1 = 5;
yy1 = 0;
zz1 = 0;
if(xx1 != 5)
yy1 = 6;
zz1 = 7;
document.write(yy1);
document.write(zz1);
⇒ 07 と表示される（xx1 != 5の条件を満たさないから，yy1は0のまま，zz1には無条件に7が代入される）
【例3.3】
xx1 = 5;
yy1 = 0;
zz1 = 0;
if(xx1 == 4);
{yy1 = 6;
zz1 = 7;
}
document.write(yy1);
document.write(zz1);
⇒ 67 と表示される（xx1 == 4の条件を満たすとき空文( ; )を実行し，5のように満たさないとき何もしないから，if(条件)が済んでもyy1, zz1は0のまま．しかし，次のブロック｛ 　｝で無条件にyy1 = 6, xx1 = 7が実行される）
【例3.4】
xx1 = 5;
yy1 = 0;
zz1 = 0;
if(xx1 == 4){
yy1 = 6;
zz1 = 7;
}
document.write(yy1);
document.write(zz1);
⇒ 00 と表示される（xx1 == 4の条件を満たさないから何も行われず，if(条件)が済んでもyy1, zz1は0のままになる）
【例3.5】
xx1 = 5;
yy1 = 6;
zz1 = 7;
if(xx1 == 5)
{if(yy1 == 6)
{zz1 = 8;
}
}
document.write(zz1);
⇒ 8 と表示される（xx1 == 5の条件もyy1 == 6も満たされるから，zz1は8になる）

(4) if ～ else --
-- 4.1 --
if(条件)
{ブロック1;
}
else
{ブロック2;
}
　条件が満たされればブロック1の処理を行い，条件が満たされなければブロック2の処理が行われます．
if(条件)の行末にセミコロンを書いてはいいけないこと，ブロック{　}を省略すると単文にだけ働くことなどは，(3)と同様です．
　さらに深く分岐する必要がある場合，論理的には右図のような樹形図に分けていくべきだとも思えますが，この形にしていくと分岐が深くなっていったときに，前提となる条件の成否が見た目だけでは分かりにくくなります．
-- 4.2 --
if(条件1)
{ブロック1;
}
else if(条件2)
{ブロック2;
}
else
{ブロック3;
}
　このような場合，4.2 のように，else if と else を使うスタイルにすると点検しやすく，間違いにくくなります．
　右の4.2では，条件1を満たすときにブロック1を実行し，条件1を満たさないもののうち条件2を満たすときに条件2を実行する．いずれにも該当しなかったものは全すべてブロック3を実行します．
　BASIC系のプログラミング言語などでは，elseifという１つのキーワードを使うものもありますが，javascriptでは else ifです．また，if ～ then ...とも書きません．
-- 4.3 --
if(条件1)
{ブロック1;
}
else if(条件2)
{ブロック2;
}
else if(条件3)
{ブロック3;
}
else if(条件4)
{ブロック4;
}
else
{ブロック5;
}
　else ifを繰り返し使う4.3のスタイルにすると，場合分けがどんなに深くなっても，難しく考えることなく else ifを継ぎ足していくだけでプログラムが書けます．
　例えば，xx1とyy1の値の組合せに応じて，次の表のように1等から4等まで表示する場合 
xx1 = 3;
yy1 = 3;
if(xx1 == 1)
  document.write('１等');
else if(yy1 == 1)
  document.write('２等');
else if(xx1 == 2)
  document.write('３等');
else if(xx1 == 3)
  document.write('４等');
と書けばよいでしょう．なお，１等のような文字列は引用符で囲みます．
※最後の分岐をelse if(xx1 == 3)でなく単にelseとした場合は，xx1やyy1が１よりも小さい場合や3よりも大きい場合もすべて４等になります．上のプログラムでは，そのような場合は何も表示されません．--このように，その他全部としてのelseを付けないこともできます．

(間違いやすい1)　if(xx1 = 1)
　等しいかどうか調べるには，比較演算子 == を使わなければなりません．数学の方程式を書いている感覚で = を使うと，条件が常に成立することになり，意図したことと異なる結果になります．
-- 4.4 --
xx1 = 1;
yy1 = 0;
if(xx1 = 2)
   yy1 = 10;
else
   yy1 = 20;
document.write(yy1);
　右の4.4のように書くと，if(xx1 = 2)によりxx1に2が代入され，xx2が2になります．(xx1 に0を代入する場合を除いて)こういう場合，if(条件)が成立することになり，次の処理に進むことになります．だから，yy1の値として10が表示されます．

 (間違いやすい2)　if ～ if --
　if分岐は，「もし～ならば，…」「もし--ならば，...」というような日本語での分類に対応していると錯角しがちですが
if(条件1)
処理1;
if(条件2)
処理2;
のように書くと，「どちらか一方だけが実行される」のではなく「両方とも実行される場合がある」ことに注意しましょう． 
xx1 = 1;
yy1 = 2;
if(xx1 == 1)
	document.write('１等');
if(yy1 == 2)
	document.write('２等');

　右のようにプログラムを書くと，１等も２等も表示されます．すなわち，初めの
if(xx1 == 1)の分岐が終っても，まだ次のif(yy1 == 2)の分岐に突入します．
　もし１等になればもう２等にはならないという意図なら，
else if(yy1 == 2)と書かなければなりません．

(5) サブテーマ：比較のしかた
(5.1)　if(x == y)　≪再掲≫
　xとyの値が等しければ真（条件成立）となり，等しくなければ偽（条件不成立）となります．
-- 5.1 --
if(x == y)
{ブロック1;
}
else
{ブロック2;
}
xx1 = 0;
yy1 = 1;
if(xx1 == 2)
  {yy1 = 3;
  }
else
  {yy1 = 4;
  }
document.write(yy1);
⇒ このプログラムでは，
xx1 == 2が成り立たないから，yy1の値が4になり，4が表示されます．
(5.2)　if(x != y)　≪再掲≫
　xとyの値が等しくなければ真（条件成立）となり，等しければ偽（条件不成立）となります．
-- 5.2 --
if(x != y)
{ブロック1;
}
else
{ブロック2;
}
xx1 = 0;
yy1 = 1;
if(xx1 != 2)
  {yy1 = 3;
  }
else
  {yy1 = 4;
  }
document.write(yy1);
⇒ このプログラムでは，
xx1 != 2が成り立つから，yy1の値が3になり，3が表示されます．
※Excelなどで等しくないことを表すx <> y は，javascriptでは使われません．

(5.3)　if(x < y)
　xの値がyの値がよりも小さければ真（条件成立）となり，そうでなければ偽（条件不成立）となります．
　xがyよりも大きい場合だけでなく，xとyが等しい場合も偽となります．
-- 5.3 --
if(x < y)
{ブロック1;
}
else
{ブロック2;
}
xx1 = 0;
yy1 = 1;
if(xx1 < 0)
  {yy1 = 3;
  }
else
  {yy1 = 4;
  }
document.write(yy1);
⇒ このプログラムでは，
xx1 < 0が成り立たないから，yy1の値が4になり，4が表示されます．
(5.4)　if(x <= y)
　xの値がyの値以下ならば真（条件成立）となり，大きければ偽（条件不成立）となります．
-- 5.4 --
if(x <= y)
{ブロック1;
}
else
{ブロック2;
}
xx1 = 5;
yy1 = 6;
if(xx1 <= 10)
  {yy1 = 3;
  }
else
  {yy1 = 4;
  }
document.write(yy1);
⇒ このプログラムでは，
xx1 <= 10が成り立つから，yy1の値が3になり，3が表示されます．
※２つの記号を組み合わせたもの <= の間に空白を入れるとエラーになります．必ず詰めて書いてください．
　中高の数学に時間に≦のことを，「イコール小なり」と読んでいても「小なりイコール」と呼んでいても，それはどちらでも構いませんが，プログラミングでは <=の順でなければならず，=<の順に書くとエラーになります．

(5.5)　if(x > y)
　xの値がyの値がよりも大きければ真（条件成立）となり，そうでなければ偽（条件不成立）となります．
　xがyより小さい場合だけでなく，xとyが等しい場合も偽となります．
-- 5.5 --
if(x > y)
{ブロック1;
}
else
{ブロック2;
}
xx1 = 3;
yy1 = 1;
if(xx1 > 4)
  {yy1 = 40;
  }
else if(xx1 > 2)
  {yy1 = 20;
  }
else
  yy1 = 10;
document.write(yy1);
⇒ このプログラムでは，
xx1 > 4が成り立たず，xx1 > 2が成り立つから，yy1の値が20になり，20が表示されます．
※if(xx1 > 4), else if(xx1 > 2)のように重複する範囲を分類に使う場合，if(xx1 > 2)のような広い方の範囲を先に指定するとelse if(xx1 > 4)の記述は何も役に立たないことに注意．狭い方から絞っていけばelse ifが働きます． 		(5.6)　if(x >= y)
　xの値がyの値以上ならば真（条件成立）となり，小さければ偽（条件不成立）となります．
-- 5.6 --
if(x >= y)
{ブロック1;
}
else
{ブロック2;
}
xx1 = 0;
yy1 = 1;
if(xx1 >= 4)
  {yy1 = 40;
  }
else if(xx1 >= 2)
  {yy1 = 20;
  }
else
  yy1 = 10;
document.write(yy1);
⇒ このプログラムでは，
xx1 >= 4が成り立たず，xx1 >= 2も成り立たないから，yy1の値が10になり，10が表示されます．
※<= のときと同様に，>と=の間に空白を入れるとエラーになります．必ず詰めて書いてください．
　また，>=の順のみ使えて，=>の順には使えません．

（参考）
以下の内容を，中高生が覚えたり習得する必要はないが，このような表現に出会ったときに何が書いてあるのかが分かればよい．
　専門家のプログラムには，if(xx)とかif(!xx)のように，等号も不等号も使われていない変数や関数そのものが条件文として書かれていることがあります．
　そもそも，if(条件式)は，条件式が成り立てば真（true）という値になり，成り立たないとき偽（false）という値をとる仕組みになっています．5.1～5.6はこのように真偽を判断して真（true），偽（false）の値に応じて以後の処理を決めたものです．
　ところで，高校数学で習う真偽は真=true=1，偽=false=0のように決まっていますが，「javascriptのプログラム上では，偽=false=0，それ以外はすべて真=true」とするようになっています．
【高校数学の真偽の値】
真=true=1偽=false=0
【コンピュータで使う真偽の値】
真=true=0以外何でも偽=false=0
※否定演算子( ! )は後ろの項の真偽を反対にします．偽=false=0とすると，それ以外は真=true
【参考.1】
xx1 = 2;（またはxx1=true;または xx1=-0.1;）
if(xx1)
  {yy1 = 40;
  }
else
  {yy1 = 10;
  }
document.write(yy1);
⇒ 2（またはtrueまたは-0.1）は真だから40と表示される
【参考.2】
xx1 = 2;（または xx1=false;またはxx1=-0.1;）
if(!xx1)
  {yy1 = 40;
  }
else
  {yy1 = 10;
  }
document.write(yy1);
⇒ 2（または-0.1）は真だから!xx1は偽となり10と表示される．falseは偽だから!falseは真となり40と表示される．

【チェックテスト】
次のプログラムが<script type="text/javascript">～</script>の中に書かれているとき，画面に表示されるものを答えてください．
(1) 
aa1 = 1;
bb1 = 2;
cc1 = 3;
if(aa1 == 1)
  bb1 = 4;
  cc1 = 5;
document.write(bb1);
document.write(cc1);
(2) 
aa1 = 1;
bb1 = 2;
cc1 = 3;
if(aa1 > 0)
  {bb1 = 4;
  }
else
  {cc1 = 5;
  }
document.write(bb1);
document.write(cc1);

(3) 
aa1 = 3;
bb1 = 4;
cc1 = 5;
if(aa1 == bb1)
  {cc1 = 0;
  }
else if(aa1 > bb1)
  {cc1 = aa1;
  }
else
  {cc1 = bb1;
  }
document.write(cc1);
0 3 4 5
(4) 
aa1 = 3;
bb1 = 4;
cc1 = 5;
if(aa1 = bb1)
  {cc1 = 6;
  }
else
  {cc1 = bb1;
  }
document.write(cc1);
3 4 5 6