JavaScript で「もし」1

 今回は if 文 を用いて条件分岐を学びます。


1 条件分岐

 プログラムは条件によって処理の流れを選択することができます。
 「1」という文字列ならば「女性」と表示し、それ以外の文字列ならば「男性」を表示するといった具合です。

てすと

 if(a == 1) の部分では、変数 a が「1」という文字列なら、という条件あらわしています。
 そして4文字下げた部分では、「1」の場合の処理を指示していて、この例では「女性」と表示するというものです。
 次の行の else は「1」でなかったらという意味で、次の行では「男性」と表示するという内容を記述しています。
 <script> 内の1行目で、変数 a に「1」を代入していますので、結果として「女性」が表示されました。

 では、「2」という文字列を代入してみましょう。

てすと

 変数 b は「2」であり「1」ではありませんので「女性」と表示するのではなく、else の部分が適用され、結果として「男性」が表示されました。(ただし、このコードでは「3」などの文字列が入力されても「男性」と表示されてしまう欠点があります。)

 このように、プログラミングでの処理の中で、ある条件や設定した値によって、処理を分岐させることを、条件分岐(じょうけんぶんき)といいます。


2 if 文

 書籍などでは、よく下記のように例示されていますね。
 判断する対象は、文字列だけでなく数値でも可能です。

てすと

 <script> 以下の1行目で、変数 c を宣言して同時に「100」という数値を代入しています。
 そして、2行目で c が「100」以上のとき、という条件を設定し、3行目でそのときの処理「cは100以上の値です。」という文字列を表示するという内容を記述しています。
 この例の場合、c は「100」ですので、write メソッドにより文字列が表示されています。


 しかし、このコードですと変数 c が「99」の場合は何も表示されなくなってしまいます。

てすと


 そこで、最初に紹介したコードのように、条件式が成り立たないときの処理を else を使って記述しました。

てすと

 上記のコードでは条件が満たされなかったときで、else 以下が実行されています。


 なお、プログラミングという観点からは何も出力されなかった場合、プログラム自体のミスによるものなのか、それとも、処理の結果が記述されていないことによるものなのか、すぐに判断がつかないものです。
 したがって、すぐに両者を判別できるように、条件を満たしたときの処理と満たさなかったときの処理を最初に紹介しました。


3 if 文の条件式

 書式は上記のようになります。

 そして、さきに紹介した例で、条件式の部分では e >= 100 などと記述していますが、そのうち「>=」の部分は比較演算子(ひかくえんざんし)といいます。
 たとえば、e >= 100 と記述されている場合は、a が 100 以上 という条件になり、たとえば a が 100 のときは、行わせたい処理① が実行され、そうでないときは 行わせたい処理② が実行されます。
 逆に、e < 100 と記述されている場合は、a が 100 より小さいという条件になり、a が 100 のときは、行わせたい処理① は実行されず、② が実行されることになります。


4 比較演算子

 比較演算子についてはいくつかの種類があります。

 この記事の冒頭で紹介した「==」ですが、比較演算子の場合は「=」が2つであることに注意です。
 1つの「=」は変数に代入するという意味で使用します。
 そして、a が「1」(数値)で b が「”1″」(文字列)のときは、「==」では等しいと判断し 処理① が実行されますが、「===」では異なると判断し 処理② が実行されます。

 a が「1」(数値)で b が「”1″」(文字列)のときは、「!=」では等しいと判断し 処理② が実行され、「!==」では等しくない判断し 処理① が実行されます。

てすと

 この例では注意が必要です。
 「1」(数値)と「1」(文字列)が等しいので「②等しい」と表示されたのではなく、両者が等しくないのではない、つまり条件に合致しなかったことから「②等しい」と表示されたのです。

てすと

 演算子には、ほかにも「<」や「>」を使ったものがあります。


5 次回

 さて、次回は switch 文を使っていろいろ試していきます。

カテゴリー

更新記事

タグ

break (1) class (3) collection (6) continue (1) CSS (2) DOM (2) for (1) function (3) HTML (8) if (2) JavaScript (28) object (5) pop (1) push (1) shift (1) switch (1) unshift (1) VBA (1) while (2) アンガーマネジメント (1) インソース (1) ココナラ (8) コーチング (1) チーズ (2) ネズミ (2) ノート (2) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (6) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (8) IGS (8) Kラーニング (1)


[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ]
価格:2,728円(税込、送料無料) (2024/2/16時点)


[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

1冊ですべて身につくJavaScript入門講座 [ Mana ]
価格:2,794円(税込、送料無料) (2024/2/23時点)



Categories:

Tags: