【JavaScript 入門講座】条件文（if文）
[JavaScript 入門講座]条件文（if文）
本講座からif文を学習する。if文は、一般的に「条件文」と言われる。 条件文とは・・・、あれである。つまり、「もし何々なら、何々」という文である。
今週末、予定が入らなければ、一人でゲームをする
これは条件文である。
「予定が入らない」→ゲームをする
「予定が入る」→ゲームをしない
このように、前提条件により、ゲームをするかしないか決まる。 条件により実行する内容が変化する事を、「条件分岐する」などと言う。 このような条件文をプログラミングで記述する。
予定が入ろうが入るまいが、ゲームをする
これは条件文ではない。「ゲームをする」という強い意思表示である。
if , else文のサンプルプログラム
ゲームをするかしないか決定するプログラムを掲載する。
001<script>
002
003var plan = prompt ( "予定がない[1]" ) ;
004
005if ( plan == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
013
014</script>
002
003var plan = prompt ( "予定がない[1]" ) ;
004
005if ( plan == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
013
014</script>
プログラムを実行すると、入力ダイアログが表示する。 もし、入力ダイアログに「1」を入力して「OK」ボタンを押下すると、 「ゲームをする」と表示する。 それ以外の値を入力して「OK」ボタンを押下すると、 「予定」と表示する。
プログラムのポイントは、「条件により、実行結果が異なる」という事である。
003var plan = prompt ( "予定がない[1]" ) ;
004
005if ( plan == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
004
005if ( plan == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
解説する。3行目で、prompt()を実行して入力ダイアログを表示する。 入力ダイアログには「予定がない[1]」という文字が表示する。 ここで、ユーザーが「1」を入力したと仮定する。
003var plan = "1" ;
004
005if ( plan == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
004
005if ( plan == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
変数planに「1」が代入される。ここまでは問題ない。 つぎが、if文である。
if文とは、条件分岐をする仕組みである。
if文を利用すると、条件ごとに実行するプログラムを指定する事ができる。
if ( [条件式] ) {
[条件式がtrueの場合、実行するプログラム]
} else {
[条件式がfalseの場合、実行するプログラム]
}
前講座で比較演算子を学習した。その学習内容を思い出してほしい。
条件式に入る値が「true」の場合、
if ( true ) {
プログラムA
}
プログラムAが実行する。 この { } の部分（中括弧で囲まれた部分）を 「ブロック」と言う。
if ( true ) {
プログラムA
}
この部分を「ifブロック」という。
一方、 if文の条件式が「false」の場合、
else {
プログラムB
}
プログラムBが実行する。
このelse { プログラムB } の事を「elseブロック」と言う。 また、if文とelse文を合わせて、「if文全体」と表現する。
if文の条件式が「true」の時、ifブロック内のプログラムが実行して、 if文の条件式が「false」の時、elseブロック内のプログラムが実行する。
003var plan = "1" ;
004
005if ( plan == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
004
005if ( plan == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
いま、変数planの中に文字列「1」が入っている。5行目の変数planを「1」へ書き換える。
003var plan = "1" ;
004
005if ( "1" == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
004
005if ( "1" == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
ここで、前講座で学習した比較演算子を思い出してほしい。 if文の条件式、すなわち比較演算子を実行した結果、「true」が戻る。
003var plan = "1" ;
004
005if ( true ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
004
005if ( true ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
if文の条件式が「true」になる。
if文の条件式が「true」の場合、ifブロックが実行する。
ifブロックには、
alert ( "ゲームをする" ) ;とある。
このプログラムが実行して、「ゲームをする」と表示する。
そして処理終了である。
ifブロックが実行した場合、
elseブロックは実行しない。
ifブロックが実行してさらにelseブロックが実行すると、
それは条件分岐とは言わない。
もう一度、最初に戻る。
003var plan = prompt ( "予定がない[1]" ) ;
004
005if ( plan == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
004
005if ( plan == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
ユーザーが入力ダイアログに「1」以外を入力した場合を考える。 たとえば、「キャンプ」と入力したと仮定する。
003var plan = "キャンプ" ;
004
005if ( plan == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
004
005if ( plan == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
変数planに文字列「キャンプ」が代入される。if文の条件式に注目する。
003var plan = "キャンプ" ;
004
005if ( "キャンプ" == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
004
005if ( "キャンプ" == "1" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
条件式は、 「"キャンプ" == "1" 」である。 比較演算子の学習を思い出してほしい。「キャンプ」は「1」ではない。これは「false」である。
003var plan = "キャンプ" ;
004
005if ( false ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
004
005if ( false ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else {
010
011 alert ( "予定" ) ;
012}
こうなる。if文の条件式は「false」である。この場合、ifブロックは実行しない。 elseブロックが実行する。つまり、「予定」と表示してプログラムは終了する。
if , else if , else 文のサンプルプログラム
条件式を複数設定するプログラムを見る。
if ( [条件式-1] ) {
[条件式-1がtrueの場合、実行するプログラム]
} else if ( [条件式-2] ) {
[条件式-2がtrueの場合、実行するプログラム]
} else {
[条件式に当てはまらない場合、実行するプログラム]
}
複数の条件式を設定する場合、「else if 」を利用する。
if文を実行すると、条件式を上から順番に見ていく。 最初は、[条件式-1]を見る。 [条件式-1]がfalseの場合、次の条件式を見る。 次の条件式は[条件式-2]である。 もし、[条件式-2]がfalseの場合、 「どの条件式にも当てはまらない」という事で、 elseブロックが実行する。
では、順番に解説する。 まず、条件式-1を見る。そして、「true」の場合、ifブロックに入り処理をする。 ifブロックが実行した後、他のブロックは実行せずに、 if文全体の処理が終了する。 もし、条件式-1が「false」の場合、条件式-2を見る。 条件式-2が「true」の場合、else ifブロックに入り処理する。 処理が終了すると、if文全体の処理が終了する。 もし、条件式-1も条件式-2も「false」の場合、 elseブロックが実行する。elseブロックの処理を実行してif文全体が終了する。 サンプルを見よう。
001<script>
002
003var plan = prompt ( "予定がない[0]キャンプ[1]" ) ;
004
005if ( plan == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( plan == "1" ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
019
020</script>
002
003var plan = prompt ( "予定がない[0]キャンプ[1]" ) ;
004
005if ( plan == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( plan == "1" ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
019
020</script>
プログラムを実行すると、入力ダイアログが表示する。 0を入力して「OK」ボタンを押下すると、「ゲームをする」と表示する。 1を入力して「OK」ボタンを押下すると、「キャンプ」と表示する。 0と1以外を入力して「OK」ボタンを押下すると、入力した文字が表示する。 また最後に必ず、「Have a good weekend.」と表示する。
長いプログラムである。長いプログラムであっても、1行ずつ見ていけば、問題ない。
003var plan = prompt ( "予定がない[0]キャンプ[1]" ) ;
004
005if ( plan == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
004
005if ( plan == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
プログラムを実行すると、3行目のprompt()が実行して入力ダイアログが表示する。 仮に、入力ダイアログに「0」を入力したと仮定する。 変数planに「0」が入る。そしてif文の条件式の変数planが「0」に置き換わる。
003var plan = "0" ;
004
005if ( "0" == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( plan == "1" ) {
010
004
005if ( "0" == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( plan == "1" ) {
010
if文の条件式が「true」になる。つまりifブロックが実行して、 「ゲームをする」と表示する。 if文全体の処理は、これで終了である。 条件式がtrueになりブロックを処理した後は、他の条件式を確認する事は無い。 if文全体が終了する。
if文は終了したが、プログラムはこれで終わらない。もう一度プログラム全体を見る。
003var plan = prompt ( "予定がない[0]キャンプ[1]" ) ;
004
005if ( plan == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( plan == "1" ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
004
005if ( plan == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( plan == "1" ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
if文全体が終了した後、18行目に
「alert ( "Have a good weekend." ) ;」
というプログラムがある。これはif文とは関係ないプログラムである。
「if」「else if」「else」文のif文全体が終わった後、
ひっそりと存在するプログラムである。
このプログラムはif文全体と関係なく実行する。
最後に、「Have a good weekend.」と表示してプログラムが終了する。
解説は以上である。
次に、入力ダイアログでユーザーが「1」を入力した場合を見る。
003var plan = "1" ;
004
005if ( plan == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( plan == "1" ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
004
005if ( plan == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( plan == "1" ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
ユーザーが入力ダイアログで「1」を入力して「OK」ボタンを押下すると、 3行目の変数planに「1」が入る。変数planは5行目と9行目で利用される。 この変数planを「1」に置き換える。
003var plan = "1" ;
004
005if ( "1" == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( "1" == "1" ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
004
005if ( "1" == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( "1" == "1" ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
5行目で変数planから「1」が取り出される。
if文の条件式は「 "1" == "0" 」である。
この条件式は「false」なので、ifブロックには入らない。
つぎにelse if文の条件式が実行する。else if文の条件式は「 "1" == "1" 」である。
条件式は「true」なので、else ifブロックが実行する。
11行目が実行して、文字列「キャンプ」が表示する。
これで、if文全体の処理が終了する。
プログラムの最後、18行目が実行して、 「Have a good weekend.」が表示してプログラムが終了する。 解説は以上である。
今度は、入力ダイアログで「ドライブ」と入力したと仮定して、プログラムを見る。
003var plan = "ドライブ" ;
004
005if ( plan == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( plan == "1" ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
004
005if ( plan == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( plan == "1" ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
入力ダイアログでユーザーが「ドライブ」と入力して「OK」ボタンを押下すると、 変数planに「ドライブ」という文字列が代入する。変数planは5行目と9行目で利用されている。 変数を値に置き換える。
003var plan = "ドライブ" ;
004
005if ( "ドライブ" == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( "ドライブ" == "1" ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
004
005if ( "ドライブ" == "0" ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( "ドライブ" == "1" ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
5行目と9行目の条件式はどちらも「false」である。
003var plan = "ドライブ" ;
004
005if ( false ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( false ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
004
005if ( false ) {
006
007 alert ( "ゲームをする" ) ;
008
009} else if ( false ) {
010
011 alert ( "キャンプ" ) ;
012
013} else {
014
015 alert ( plan ) ;
016}
017
018alert ( "Have a good weekend." ) ;
if文とelse if文の条件式が「false」である。全ての条件式が「false」の場合、 elseブロックが実行する。つまり15行目が実行する。 15行目で、変数planから文字列「ドライブ」が取り出されて表示する。
これで、if文全体の処理が終了する。 プログラムの最後で18行目が実行して、 「Have a good weekend.」と表示する。 以上にてプログラムが終了する。
条件式に一致した場合、if文は終了する
このプログラムはどのように動くだろうか？ちょっと考えてみてほしい。
001<script>
002
003var a = 0 ;
004
005if ( a == 0 ) {
006
007 alert ( "X" ) ;
008
009} else if ( a < 3 ) {
010
011 alert ( "Y" ) ;
012
013} else {
014
015 alert ( "Z" ) ;
016}
017
018</script>
002
003var a = 0 ;
004
005if ( a == 0 ) {
006
007 alert ( "X" ) ;
008
009} else if ( a < 3 ) {
010
011 alert ( "Y" ) ;
012
013} else {
014
015 alert ( "Z" ) ;
016}
017
018</script>
プログラムが実行すると「X」と表示して終了する
まず、3行目で変数aを宣言して0を代入する。 5行目から16行目までが「if文全体」である。 5行目でif文の条件式が実行して、変数aの値と0を比較する。 変数aの値は0である。つまり、if文の条件式はtrueになる。 ifブロックが実行して、「X」と表示する。 ここまでは良いだろう。 問題は、else if である。
003var a = 0 ;
004
005if ( a == 0 ) {
006
007 alert ( "X" ) ;
008
009} else if ( a < 3 ) {
010
011 alert ( "Y" ) ;
012
013} else {
014
015 alert ( "Z" ) ;
016}
004
005if ( a == 0 ) {
006
007 alert ( "X" ) ;
008
009} else if ( a < 3 ) {
010
011 alert ( "Y" ) ;
012
013} else {
014
015 alert ( "Z" ) ;
016}
else if 文の条件式は変数aが3未満かどうか確認している。 変数aの値は「0」なので、else if 文の条件式は「true」になる。 では、else if ブロックが実行して「Y」と表示されるだろうか？ いいえ。 if文の条件式に一致した瞬間、if文全体の処理は終了する。 そのため、そもそもelse if 文の条件式は確認しない。 if文の条件式がtrueになりifブロックが実行した後、 if文全体が終了する。 「条件式に当てはまる場合、そのブロックが実行して、その後if文全体が終了する」という点が重要である。
まとめ
if ( [条件式-1] ) {
[条件式-1がtrueの場合、実行するプログラム]
} else if ( [条件式-2] ) {
[条件式-2がtrueの場合、実行するプログラム]
} else {
[条件式に当てはまらない場合、実行するプログラム]
}
