【JavaScript 入門講座】比較演算子
本講座では、比較演算子について学習する。 比較手演算子は、今までの学習内容と比較して、比較的簡単な学習項目である。 簡単すぎて「この学習は、意味があるのか?」と疑ってしまうほどである。 本講座で学習する比較演算子は、今後学習する条件文、繰り返し文などで利用する。
2つの数値の大きさを比較する比較演算子
002
003alert ( 5 > 2 );
004
005</script>
プログラムを実行すると、「true」と表示する。
いずこかの学校で、不等号の学習をした事があると思う。
その時の授業風景を思い出してほしい。
窓から見える青空。風にたなびく白色のカーテン。
そして、不等号。
数学の時間に学習した不等号記号と似た意味を持つ記号を、JavaScriptでも利用する。
3行目に「 5 > 2 」というプログラムがある。
これは、5が2より大きいかどうかコンピューターに問い合せるプログラムである。
A > B AがBよりも大きい場合、「true」となり、 AがB以下の場合、「false」となる。
3行目の「5」が「A」で、「2」が「B」である。 5は2よりも大きい。そのため、コンピューターは「true」と答える。 「true」とは「真」という意味である。 つまり、このプログラムは次のプログラムと同じである。
002
003alert ( true );
004
005</script>
このプログラムを実行すると、「true」と表示する。
002
003alert ( 5 < 2 );
004
005</script>
このプログラムはどうだろう?「 5 < 2 」とある。 これは「5は2よりも小さいですか?」とコンピューターに問い合せるプログラムである。 5が2より小さいわけがないので、コンピューターは「false」と答える。 「false」とは「偽」という意味である。 プログラムを実行すると、「false」とダイアログに表示される。
比較演算子 比較演算子を用いると、2つの数値の大きさを比較する事ができる。 比較した結果、正しければ「true」が戻され、 正しくなければ「false」が戻される。
比較演算子は、 コンピューターに対して「2つの数値を比較しましたが、正しいですか? どうですか?」と問い合せるプログラムである。 正しければ「true」が戻され、 正しくなければ「false」が戻される。
様々な比較演算子
比較演算子をまとめる
演算子 | 説明 | 例 | 例の結果 |
a > b | aがbよりも大きいか確認 | 10 > 5 | true |
a < b | aがbよりも小さい確認 | 10 < 5 | false |
a >= b | aがb以上か確認 | 10 >= 10 | true |
a <= b | aがb以下か確認 | 10 <= 5 | false |
a == b | aとbが同じ値か確認 | 10 == 10 | true |
a != b | aとbが異なるか確認 | 10 != 5 | true |
比較演算子には「以上」「以下」の比較ができるものがある。 また、「同じ値かどうか」を確認するには「 == 」を用いる。 イコール記号を二つ並べる。 二つの値が異なるかどうかを確認するためには「 != 」を用いる。
2つの変数に比較演算子を適用する
002//変数を宣言して値を代入
003var a = 10 ;
004var b = 5 ;
005
006//[true]
007alert ( a > b ) ;
008</script>
プログラムを実行すると、「true」と表示する。
3行目と4行目で変数aとbを宣言して、「10」「5」を代入する。 7行目で変数aの中の値と、変数bの中の値を比較する。
003var a = 10 ;
004var b = 5 ;
005
006//[true]
007alert ( 10 > 5 ) ;
比較演算子を適用する時、変数の中から値が取り出されて、その値を比較する。 プログラムを実行すると、「true」と表示する。
2つのユーザー入力値を比較する
002var a = prompt ( "名前を入力して下さい" ) ;
003var b = prompt ( "もう一度入力して下さい" ) ;
004
005//2つの入力値を比較
006alert ( a == b ) ;
007</script>
プログラムを実行すると、入力ダイアログが2回表示する。 入力ダイアログに入力した2つの文字列が同じの場合、「true」と表示して、 異なる文字列を入力した場合「false」と表示する。
解説する。2行目を実行すると、入力ダイアログが表示する。 入力ダイアログに「IORI」を入力したと仮定する。
002var a = "IORI" ;
003var b = prompt ( "もう一度入力して下さい" ) ;
004
005//2つの入力値を比較
006alert ( a == b ) ;
007</script>
002var a = "IORI" ;
003var b = "iori" ;
004
005//2つの入力値を比較
006alert ( a == b ) ;
007</script>
3行目の変数bに、入力した文字列「iori」が代入される。 6行目で、「 == 」演算子を利用して、変数aとbの中身を比較する。
003var b = "iori" ;
004
005//2つの入力値を比較
006alert ( "IORI" == "iori" ) ;
6行目の「 == 」演算子は、二つの値が同じ場合、 「true」を戻し、異なる場合「false」を戻す。 6行目が実行すると、「IORI」は「iori」ではないので、「false」と表示する。
ユーザー入力値を特定の値と比較する
入力ダイアログに入力した値が、5以上かどうか判定するプログラムを掲載する。
002
003var num_str = prompt ( "5以上の数字を入力してください" ) ;
004var num_int = parseInt ( num_str );
005
006alert ( num_int >= 5 ) ;
007
008</script>
プログラムを実行すると、入力ダイアログが表示する。 入力ダイアログに5以上の値を入力すると、「true」と表示して、 5未満の値を入力すると「false」と表示する。
3行目から解説する。まず、prompt()が実行して入力ダイアログが表示する。 prompt()の括弧の中に「5以上の数字を入力してください」と記述したので、 入力ダイアログに「5以上の数字を入力してください」と表示される。 入力ダイアログのテキストボックスに数字を入力して「OK」ボタンを押下すると、 入力した数字がプログラム実行元へ戻される。 こんかい、「10」を入力したと仮定する。 その仮定に従うと、プログラムは次のようになる。
002
003var num_str = "10" ;
004var num_int = parseInt ( num_str );
005
006alert ( num_int >= 5 ) ;
007
008</script>
変数num_strに「10」が代入される。注意したい点は、 「10」が文字列という事である。 もし、入力値と整数を比較するなら、入力値を整数(数値)に変換する必要がある。 そこで、parseInt()の登場である。parseInt()はいいやつである。 プログラムの4行目で、parseInt()を記載して、括弧の中に変数num_strを記述する。 parseInt()は括弧の中の文字列を数値に変換する命令文であった。 つまり、parseInt()の実行結果は、ユーザーの入力値を「10」と仮定すると、 「10」である。整数の10である。この値が変数num_intへ代入される。
002
003var num_str = "10" ;
00410 = parseInt ( "10" );
005
006alert ( num_int >= 5 ) ;
007
008</script>
6行目で、変数num_intに入っている値と「5」を比較する。 変数num_intには「10」が入っていた。
002
003var num_str = "10" ;
00410 = parseInt ( "10" );
005
006alert ( 10 >= 5 ) ;
007
008</script>
6行目で、10と5を比較する。10は5よりも大きいので「true」と表示する。 このプログラムのポイントは、ユーザーから受け取った値を数値に変更する点である。 数字同士を比較する際は、どちらも数値にする必要がある。 文字列と数値は比較できない(本当は比較できるが、良い事はないので比較しない)。
まとめ
演算子 | 説明 | 例 | 例の結果 |
a > b | aがbよりも大きいか確認 | 10 > 5 | true |
a < b | aがbよりも小さい確認 | 10 < 5 | false |
a >= b | aがb以上か確認 | 10 >= 10 | true |
a <= b | aがb以下か確認 | 10 <= 5 | false |
a == b | aとbが同じ値か確認 | 10 == 10 | true |
a != b | aとbが異なるか確認 | 10 != 5 | true |