IORI online School

JavaScript、html、css の無料学習サイト

【JavaScript 入門講座】比較演算子

[JavaScript 入門講座]比較演算子

本講座では、比較演算子について学習する。 比較手演算子は、今までの学習内容と比較して、比較的簡単な学習項目である。 簡単すぎて「この学習は、意味があるのか?」と疑ってしまうほどである。 本講座で学習する比較演算子は、今後学習する条件文、繰り返し文などで利用する。

2つの数値の大きさを比較する比較演算子

001<script>
002
003alert ( 5 > 2 );
004
005</script>

プログラムを実行すると、「true」と表示する。

いずこかの学校で、不等号の学習をした事があると思う。 その時の授業風景を思い出してほしい。 窓から見える青空。風にたなびく白色のカーテン。 そして、不等号。 数学の時間に学習した不等号記号と似た意味を持つ記号を、JavaScriptでも利用する。
3行目に「 5 > 2 」というプログラムがある。 これは、5が2より大きいかどうかコンピューターに問い合せるプログラムである。

>演算子 2つの数値の大きさを比較する、比較演算子である。

A > B AがBよりも大きい場合、「true」となり、 AがB以下の場合、「false」となる。

3行目の「5」が「A」で、「2」が「B」である。 5は2よりも大きい。そのため、コンピューターは「true」と答える。 「true」とは「真」という意味である。 つまり、このプログラムは次のプログラムと同じである。

001<script>
002
003alert ( true );
004
005</script>

このプログラムを実行すると、「true」と表示する。

001<script>
002
003alert ( 5 < 2 );
004
005</script>

このプログラムはどうだろう?「 5 < 2 」とある。 これは「5は2よりも小さいですか?」とコンピューターに問い合せるプログラムである。 5が2より小さいわけがないので、コンピューターは「false」と答える。 「false」とは「偽」という意味である。 プログラムを実行すると、「false」とダイアログに表示される。

比較演算子 比較演算子を用いると、2つの数値の大きさを比較する事ができる。 比較した結果、正しければ「true」が戻され、 正しくなければ「false」が戻される。

比較演算子は、 コンピューターに対して「2つの数値を比較しましたが、正しいですか? どうですか?」と問い合せるプログラムである。 正しければ「true」が戻され、 正しくなければ「false」が戻される。

様々な比較演算子

比較演算子をまとめる

演算子 説明 例の結果
a > baがbよりも大きいか確認10 > 5 true
a < baがbよりも小さい確認10 < 5 false
a >= baがb以上か確認10 >= 10 true
a <= baがb以下か確認10 <= 5 false
a == baとbが同じ値か確認10 == 10 true
a != baとbが異なるか確認10 != 5 true

比較演算子には「以上」「以下」の比較ができるものがある。 また、「同じ値かどうか」を確認するには「 == 」を用いる。 イコール記号を二つ並べる。 二つの値が異なるかどうかを確認するためには「 != 」を用いる。

2つの変数に比較演算子を適用する

001<script>
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の中の値を比較する。

002//変数を宣言して値を代入
003var a = 10 ;
004var b = 5 ;
005
006//[true]
007alert ( 10 > 5 ) ;

比較演算子を適用する時、変数の中から値が取り出されて、その値を比較する。 プログラムを実行すると、「true」と表示する。

2つのユーザー入力値を比較する

001<script>
002var a = prompt ( "名前を入力して下さい" ) ;
003var b = prompt ( "もう一度入力して下さい" ) ;
004
005//2つの入力値を比較
006alert ( a == b ) ;
007</script>

プログラムを実行すると、入力ダイアログが2回表示する。 入力ダイアログに入力した2つの文字列が同じの場合、「true」と表示して、 異なる文字列を入力した場合「false」と表示する。

解説する。2行目を実行すると、入力ダイアログが表示する。 入力ダイアログに「IORI」を入力したと仮定する。

001<script>
002var a = "IORI" ;
003var b = prompt ( "もう一度入力して下さい" ) ;
004
005//2つの入力値を比較
006alert ( a == b ) ;
007</script>
2行目の変数aに、入力した文字列「IORI」が代入する。 3行目で再び入力ダイアログが表示する。 ここで、入力ダイアログに「iori」と入力したと仮定する。
001<script>
002var a = "IORI" ;
003var b = "iori" ;
004
005//2つの入力値を比較
006alert ( a == b ) ;
007</script>

3行目の変数bに、入力した文字列「iori」が代入される。 6行目で、「 == 」演算子を利用して、変数aとbの中身を比較する。

002var a = "IORI" ;
003var b = "iori" ;
004
005//2つの入力値を比較
006alert ( "IORI" == "iori" ) ;

6行目の「 == 」演算子は、二つの値が同じ場合、 「true」を戻し、異なる場合「false」を戻す。 6行目が実行すると、「IORI」は「iori」ではないので、「false」と表示する。

ユーザー入力値を特定の値と比較する

入力ダイアログに入力した値が、5以上かどうか判定するプログラムを掲載する。

001<script>
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」を入力したと仮定する。 その仮定に従うと、プログラムは次のようになる。

001<script>
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へ代入される。

001<script>
002
003var num_str = "10" ;
00410 = parseInt ( "10" );
005
006alert ( num_int >= 5 ) ;
007
008</script>

6行目で、変数num_intに入っている値と「5」を比較する。 変数num_intには「10」が入っていた。

001<script>
002
003var num_str = "10" ;
00410 = parseInt ( "10" );
005
006alert ( 10 >= 5 ) ;
007
008</script>

6行目で、10と5を比較する。10は5よりも大きいので「true」と表示する。 このプログラムのポイントは、ユーザーから受け取った値を数値に変更する点である。 数字同士を比較する際は、どちらも数値にする必要がある。 文字列と数値は比較できない(本当は比較できるが、良い事はないので比較しない)。

まとめ

演算子 説明 例の結果
a > baがbよりも大きいか確認10 > 5 true
a < baがbよりも小さい確認10 < 5 false
a >= baがb以上か確認10 >= 10 true
a <= baがb以下か確認10 <= 5 false
a == baとbが同じ値か確認10 == 10 true
a != baとbが異なるか確認10 != 5 true