今回は if 文 を用いて条件分岐を学びます。
![](https://tenarai.blog/wp-content/uploads/2024/02/20240225_study_wakaru_boy.png)
1 条件分岐
プログラムは条件によって処理の流れを選択することができます。
「1」という文字列ならば「女性」と表示し、それ以外の文字列ならば「男性」を表示するといった具合です。
HTML(コード入力)
<!DOCTYPE html> <html> <head> <title>てすと</title> <meta charset="UTF-8"> </head> <body> <script> let a = "1"; if(a == "1"){ document.write("<p>女性</p>"); }else{ document.write("<p>男性</p>"); } </script> </body> </html>
ブラウザ(実行結果)
if(a == 1) の部分では、変数 a が「1」という文字列なら、という条件あらわしています。
そして4文字下げた部分では、「1」の場合の処理を指示していて、この例では「女性」と表示するというものです。
次の行の else は「1」でなかったらという意味で、次の行では「男性」と表示するという内容を記述しています。
<script> 内の1行目で、変数 a に「1」を代入していますので、結果として「女性」が表示されました。
では、「2」という文字列を代入してみましょう。
HTML(コード入力)の一部
let b = "2"; if(b == "1"){ document.write("<p>女性</p>"); }else{ document.write("<p>男性</p>"); }
ブラウザ(実行結果)
変数 b は「2」であり「1」ではありませんので「女性」と表示するのではなく、else の部分が適用され、結果として「男性」が表示されました。(ただし、このコードでは「3」などの文字列が入力されても「男性」と表示されてしまう欠点があります。)
このように、プログラミングでの処理の中で、ある条件や設定した値によって、処理を分岐させることを、条件分岐(じょうけんぶんき)といいます。
2 if 文
書籍などでは、よく下記のように例示されていますね。
判断する対象は、文字列だけでなく数値でも可能です。
HTML(コード入力)の一部
let c = 100; if(c >= 100){ document.write("<p>cは100以上の値です。</p>"); }
ブラウザ(実行結果)
<script> 以下の1行目で、変数 c を宣言して同時に「100」という数値を代入しています。
そして、2行目で c が「100」以上のとき、という条件を設定し、3行目でそのときの処理「cは100以上の値です。」という文字列を表示するという内容を記述しています。
この例の場合、c は「100」ですので、write メソッドにより文字列が表示されています。
しかし、このコードですと変数 c が「99」の場合は何も表示されなくなってしまいます。
HTML(コード入力)の一部
let d = 99; if(d >= 100){ document.write("<p>d は100以上の値です。</p>"); }
ブラウザ(実行結果)
そこで、最初に紹介したコードのように、条件式が成り立たないときの処理を else を使って記述しました。
HTML(コード入力)の一部
let e = 99; if(e >= 100){ document.write("<p>e は100以上の値です。</p>"); }else{ document.write("<p>e は100より小さい値です。</p>"); }
ブラウザ(実行結果)
上記のコードでは条件が満たされなかったときで、else 以下が実行されています。
なお、プログラミングという観点からは何も出力されなかった場合、プログラム自体のミスによるものなのか、それとも、処理の結果が記述されていないことによるものなのか、すぐに判断がつかないものです。
したがって、すぐに両者を判別できるように、条件を満たしたときの処理と満たさなかったときの処理を最初に紹介しました。
3 if 文の条件式
書式
if(条件式){ 行わせたい処理① }else{ 行わせたい処理② }
書式は上記のようになります。
そして、さきに紹介した例で、条件式の部分では e >= 100 などと記述していますが、そのうち「>=」の部分は比較演算子(ひかくえんざんし)といいます。
たとえば、e >= 100 と記述されている場合は、a が 100 以上 という条件になり、たとえば a が 100 のときは、行わせたい処理① が実行され、そうでないときは 行わせたい処理② が実行されます。
逆に、e < 100 と記述されている場合は、a が 100 より小さいという条件になり、a が 100 のときは、行わせたい処理① は実行されず、② が実行されることになります。
4 比較演算子
比較演算子についてはいくつかの種類があります。
等しい
a と b とが等しい ・・・・・・・・・・・ a == b ※「=」が2つ a と b とがデータ型を含めて等しい ・・・ a === b ※「=」が3つ
この記事の冒頭で紹介した「==」ですが、比較演算子の場合は「=」が2つであることに注意です。
1つの「=」は変数に代入するという意味で使用します。
そして、a が「1」(数値)で b が「”1″」(文字列)のときは、「==」では等しいと判断し 処理① が実行されますが、「===」では異なると判断し 処理② が実行されます。
等しくない
a と b とが等しくない ・・・・・・・・・・・ a != b ※「=」が1つ a と b とがデータ型を含めて等しくない ・・・ a !== b ※「=」が2つ
a が「1」(数値)で b が「”1″」(文字列)のときは、「!=」では等しいと判断し 処理② が実行され、「!==」では等しくない判断し 処理① が実行されます。
HTML(コード入力)の一部
let f = 1; let g = "1"; if(f != g){ document.write("<p>① 等しくない。</p>"); }else{ document.write("<p>② 等しい。</p>"); }
ブラウザ(実行結果)
この例では注意が必要です。
「1」(数値)と「1」(文字列)が等しいので「②等しい」と表示されたのではなく、両者が等しくないのではない、つまり条件に合致しなかったことから「②等しい」と表示されたのです。
HTML(コード入力)の一部
let h = 1; let i = "1"; if(h !== i){ document.write("<p>① 厳密に等しくない。</p>"); }else{ document.write("<p>② 厳密に等しい。</p>"); }
ブラウザ(実行結果)
演算子には、ほかにも「<」や「>」を使ったものがあります。
5 次回
さて、次回は switch 文を使っていろいろ試していきます。
カテゴリー
更新記事
- 『日本経済新聞』を読む 2(DAC、株主優待、オピオイド、ベトナム車市場、離れ小島)
- 『日本経済新聞』を読む 1(リバースメンタリング、CBT、EBPM、地方創生DAO、IBD)
- テーマ株投資(7か月)
- 『会社四季報 2024年 3集 夏号』を読む 20(RPF、DtoC、ToF、駅ナカ、CX)
- 『会社四季報 2024年 3集 夏号』を読む 19(ATC、プローブカード、ニューデリー、商品CFD、SUV、FPC、IFRS)
- 『会社四季報 2024年 3集 夏号』を読む 18(シャリ玉ロボット、YAGレーザー、シナジー、SaaS、クルーズ、DFBレーザー)
- 『会社四季報 2024年 3集 夏号』を読む 17(DSP、サーメタル、自動小銃、ダイカストマシン、FPSO、サーボモーター、水晶振動子)
- 『会社四季報 2024年 3集 夏号』を読む 16(クロスセル、eVTOL、CFCC、RFID、配当性向、事業承継)
- 『会社四季報 2024年 3集 夏号』を読む 15(SiC半導体、NAS電池、フェロニッケル、フェライト粉、スポンジチタン)
- 『会社四季報 2024年 3集 夏号』を読む 14(AI警備システム、プロダクトアウト、ホットメルト接着剤、放熱ゲル、パイル、カソード)
- 『会社四季報 2024年 3集 夏号』を読む 13(PLM、ファクタリング、BCP、グリシン、メタクリル樹脂、アクティブシニア)
- テーマ株投資(6か月)
- 『会社四季報 2024年 3集 夏号』を読む 12(カプロラクタム、ゼロトラスト、RAG、ERP、シリカ)
- 『会社四季報 2024年 3集 夏号』を読む 11(オリゴマー、エッジAI、MLCC、ジルコニウム、アセチレンガス、ファインケミカル)
- 『会社四季報 2024年 3集 夏号』を読む 10(フラッシュハンドル、自動配膳ロボット、R-SUD、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証)
- 『会社四季報 2024年 3集 夏号』を読む 9(ペロブスカイト太陽電池、プロテイン、銀だこ、尿素SCR、エクソソーム)
- 『会社四季報 2024年 3集 夏号』を読む 8(ドミナント、EBITDA、SAF、消防車、キャンプ用品、GIGAスクール、ボウリング場)
- 『会社四季報 2024年 3集 夏号』を読む 7(MD、パーム椰子、GMS、EC、デジタルサイネージ、ハラール認証、ヴィーガンコスメ)
- 『会社四季報 2024年 3集 夏号』を読む 6(BIM、CMS、つけまつげ、CDMO、BNPL、EDI、CRM)
- 『会社四季報 2024年 3集 夏号』を読む 5(アグリゲーション、EMS、BPO、のれん、カカオ豆、オーツミルク)
- 『会社四季報 2024年 3集 夏号』を読む 4(SEP、社内起業、ZEP、VPP、DOE、バイオセンサー、PBX)
- 『会社四季報 2024年 3集 夏号』を読む 3(海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電)
- テーマ株投資(5か月)
- 『会社四季報 2024年 3集 夏号』を読む 2
- 『会社四季報 2024年 3集 夏号』を読む 1
- JavaScript でDOM 2
- JavaScript でDOM 1
- JavaScript でオブジェクト 5
- JavaScript でオブジェクト 4
- JavaScript でオブジェクト 3
- JavaScript でオブジェクト 2
- JavaScript でオブジェクト 1
- JavaScript で関数 3
- JavaScript で関数 2
- JavaScript で関数 1
- JavaScript で配列 6
- JavaScript で配列 5
- JavaScript で配列 4
- テーマ株投資(3カ月目)
- JavaScript で配列 3
- JavaScript で配列 2
- JavaScript で配列 1
- JavaScript で「繰り返し」2
- 『チーズはどこへ消えた?』を読む 2
- 『チーズはどこへ消えた?』を読む 1
- JavaScript で「繰り返し」1
- JavaScript で「もし」3
- テーマ株投資(2カ月目)
- JavaScript で「もし」2
- 「記憶」本 5冊を読む 3
- 「記憶」本 5冊を読む 2
- 「記憶」本 5冊を読む 1
- テーマ株投資(1カ月半)
- 「睡眠」本 6冊を読む3(夜間・朝の行動)
- 「睡眠」本 6冊を読む2(昼間の行動)
- テーマ株投資(1か月目)
- JavaScript で「もし」1
- JavaScript で変数3
- 「睡眠」本 6冊を読む1(理論)
- JavaScript で変数2
- テーマ株投資(第3週目)
- JavaScript でヘンな数
- 「メモ」本 6冊を読む2(メモの方法)
- テーマ株投資(第2週目)
- JavaScript で足し算
- 「メモ」本 6冊を読む1(メモの意義)
- テーマ株投資(第1週目)
- JavaScript で「こんにちは世界」
- 「コーチング」本 6冊を読む
- はじめてのテーマ株投資
- JavaScript とは
- 「怒り」「アンガーマネジメント」本 7冊を読む
- JavaScript を始めてみる
- 初めての自動給水器
- 「ブランディング」本 6冊を読む
タグ
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) ことば (2) アンガーマネジメント (1) インソース (1) ココナラ (11) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (3) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) リンクアンドモチベーション (2) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (29) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (11) IGS (11) Kラーニング (1)