JavaScript で「もし」１

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

１　条件分岐

　プログラムは条件によって処理の流れを選択することができます。
　「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> 内の１行目で、変数 a に「1」を代入していますので、結果として「女性」が表示されました。

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

HTML（コード入力）の一部

let b = "2";
if(b == "1"){
    document.write("<p>女性</p>");
}else{
    document.write("<p>男性</p>");
}

ブラウザ（実行結果）

てすと

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

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

２　if 文

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

HTML（コード入力）の一部

let c = 100;
if(c >= 100){
    document.write("<p>ｃは100以上の値です。</p>");
}

ブラウザ（実行結果）

てすと

　<script> 以下の１行目で、変数 c を宣言して同時に「100」という数値を代入しています。
　そして、２行目で c が「100」以上のとき、という条件を設定し、３行目でそのときの処理「ｃは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 以下が実行されています。

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

３　if 文の条件式

書式

if（条件式）{
    行わせたい処理①
}else{
    行わせたい処理②
}

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

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

４　比較演算子

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

等しい

a と b とが等しい　・・・・・・・・・・・　a == b　　※「=」が２つ
a と b とがデータ型を含めて等しい　・・・　a === b　 ※「=」が３つ

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

等しくない

a と b とが等しくない　・・・・・・・・・・・　a != b　　※「=」が１つ
a と b とがデータ型を含めて等しくない　・・・　a !== b　 ※「=」が２つ

　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>");
}

ブラウザ（実行結果）

てすと

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

５　次回

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

更新記事

『会社四季報 2024年 3集夏号』を読む１１（オリゴマー、エッジＡＩ、ＭＬＣＣ、ジルコニウム、アセチレンガス、ファインケミカル）2024-07-25
『会社四季報 2024年 3集夏号』を読む１０（フラッシュハンドル、自動配膳ロボット、Ｒ－ＳＵＤ、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証）2024-07-22
『会社四季報 2024年 3集夏号』を読む９（ペロブスカイト太陽電池、プロテイン、銀だこ、尿素ＳＣＲ、エクソソーム）2024-07-19
『会社四季報 2024年 3集夏号』を読む８（ドミナント、ＥＢＩＴＤＡ、ＳＡＦ、消防車、キャンプ用品、ＧＩＧＡスクール、ボウリング場）2024-07-16
『会社四季報 2024年 3集夏号』を読む７（ＭＤ、パーム椰子、ＧＭＳ、ＥＣ、デジタルサイネージ、ハラール認証、ヴィーガンコスメ）2024-07-13
『会社四季報 2024年 3集夏号』を読む６（ＢＩＭ、ＣＭＳ、つけまつげ、ＣＤＭＯ、ＢＮＰＬ、ＥＤＩ、ＣＲＭ）2024-07-10
『会社四季報 2024年 3集夏号』を読む５（アグリゲーション、ＥＭＳ、ＢＰＯ、のれん、カカオ豆、オーツミルク）2024-07-07
『会社四季報 2024年 3集夏号』を読む４（ＳＥＰ、社内起業、ＺＥＰ、ＶＰＰ、ＤＯＥ、バイオセンサー、ＰＢＸ）2024-07-04
『会社四季報 2024年 3集夏号』を読む３（海上油田、シェールオイル、カーボンクレジット、キャッシュフロー経営、軽量気泡コンクリート、医療観光、洋上風力発電）2024-07-01
テーマ株投資（５か月）2024-06-28
『会社四季報 2024年 3集夏号』を読む２2024-06-25
『会社四季報 2024年 3集夏号』を読む１2024-06-22
JavaScript でDOM ２2024-06-18
JavaScript でDOM １2024-06-14
JavaScript でオブジェクト５2024-06-10
JavaScript でオブジェクト４2024-06-06
JavaScript でオブジェクト３2024-06-02
JavaScript でオブジェクト２2024-05-29
JavaScript でオブジェクト１2024-05-25
JavaScript で関数３2024-05-21
JavaScript で関数２2024-05-17
JavaScript で関数１2024-05-13
JavaScript で配列６2024-05-10
JavaScript で配列５2024-05-07
JavaScript で配列４2024-05-04
テーマ株投資（３カ月目）2024-05-02
JavaScript で配列３2024-04-27
JavaScript で配列２2024-04-24
JavaScript で配列１2024-04-21
JavaScript で「繰り返し」２2024-04-18
『チーズはどこへ消えた？』を読む２2024-04-15
『チーズはどこへ消えた？』を読む１2024-04-11
JavaScript で「繰り返し」１2024-04-07
JavaScript で「もし」３2024-04-01
テーマ株投資（２カ月目）2024-03-29
JavaScript で「もし」２2024-03-28
「記憶」本５冊を読む３2024-03-24
「記憶」本５冊を読む２2024-03-20
「記憶」本５冊を読む１2024-03-17
テーマ株投資（１カ月半）2024-03-15
「睡眠」本６冊を読む３（夜間・朝の行動）2024-03-10
「睡眠」本６冊を読む２（昼間の行動）2024-03-03
テーマ株投資（１か月目）2024-03-01
JavaScript で「もし」１2024-02-29
JavaScript で変数３2024-02-27
「睡眠」本６冊を読む１（理論）2024-02-25
JavaScript で変数２2024-02-23
テーマ株投資（第３週目）2024-02-22
JavaScript でヘンな数2024-02-20
「メモ」本６冊を読む２（メモの方法）2024-02-18
テーマ株投資（第２週目）2024-02-16
JavaScript で足し算2024-02-14
「メモ」本６冊を読む１（メモの意義）2024-02-12
テーマ株投資（第１週目）2024-02-09
JavaScript で「こんにちは世界」2024-02-09
「コーチング」本６冊を読む2024-02-06
はじめてのテーマ株投資2024-02-01
JavaScript とは2024-01-30
「怒り」「アンガーマネジメント」本７冊を読む2024-01-27
JavaScript を始めてみる2024-01-22
初めての自動給水器2024-01-21
「ブランディング」本６冊を読む2024-01-20

手習い日記帳

１　条件分岐

HTML（コード入力）

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

２　if 文

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

３　if 文の条件式

書式

４　比較演算子

等しい

等しくない

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

５　次回

カテゴリー

更新記事

タグ

JavaScript で「もし」１

１ 条件分岐

HTML（コード入力）

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

２ if 文

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

３ if 文の条件式

書式

４ 比較演算子

等しい

等しくない

HTML（コード入力）の一部

ブラウザ（実行結果）

HTML（コード入力）の一部

ブラウザ（実行結果）

５ 次回

カテゴリー

更新記事

タグ

１　条件分岐

２　if 文

３　if 文の条件式

４　比較演算子

５　次回