状況に応じて動きを変える、臨機応変なプログラムを作るには〜if, 真偽値, 比較演算子, 論理演算子〜

watanabe_kf1983

2021年12月31日 12:58

プログラミング自学案内の15回目です。今回は、if文とそれにまつわる諸々を紹介します。これまでの記事はこちら。

前回の課題の解答例

まずは前回記事の課題の解答例をあげておきます。参考程度に、ご確認ください。

今回のサンプル

例によってサンプルコードを示します。まずは、コピペして動かしてみてください。

「渡辺さん：167cm」「渡辺さん：187cm」「おすもうさん：187cm」で試すと、それぞれ、違う結果になるはずです。

index.htmlです。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if文を学ぶ</title>
</head>

<body>
    <h1>プログラミング自学案内 第15回 〜ifにまつわるエトセトラ〜</h1>
    <p>
        名前: <input type="text" id="name" value="渡辺" /> さん </p>
    <p>身長: <input type="text" id="height" value="167" /> cm </p>
    <p><button id="letmesay">何か言わせて</button></p>
    <pre id="comment"></pre>
    <span class="shout"></span>
    <script type="text/javascript" src="script.js"></script>
</body>

</html>

script.jsです。

document.querySelector('#letmesay').onclick = function () {

    const name = document.querySelector('#name').value;
    const height = document.querySelector('#height').value;

    const height_cm = parseFloat(height);
    
    if (name === 'おすもう') {
        shout('どすこい！');
    } else {
        shout('わっしょい！');
    }

    if (name === 'おすもう') {
        say('ごっつぁんです！');
    }
    if (name !== 'おすもう' && height_cm > 180) {
        say('ノッポですね');
    }
    if (name !== 'おすもう' && height_cm <= 180) {
        say('言うことは何もありません');
    }

};


function say(comment) {
    document.querySelector('#comment').textContent = comment;
}

function shout(word) {
    document.querySelector('.shout').textContent = word;
}

if文の意味

上のサンプルではif文をたくさん使っています。実際、if文はプログラミングで、頻繁に使われるフレーズです。

サンプルでは、コード（script.js）を変えていないのに、「渡辺さん：167cm」「おすもうさん：187cm」でそれぞれ、違う結果になりました。状況に応じて「違う結果」を引き起こすことが、まさにif文の効果です。

if は英語で「もし～～ならば」。elseは「その他の場合」。

if (name === 'おすもう') {
    shout('どすこい！');
} else {
    shout('わっしょい！');
}

このJavaScriptコードのif文を、あえて日本語に訳すとこうです。

もし (name が 'おすもう' と完全に等しい) なら {
　　shout('どすこい！');

} そうじゃないなら {
　　shout('わっしょい！');
}

まあ、見たそのまま、という感じですね、簡単です。if文の簡単な説明はこれで終わってしまいました。

ですが、この辺りはプログラミングの結構肝の部分なので、if文にまつわる諸々について、深掘りした説明を、もう少し続けさせて下さい。

条件式：if文のカッコの中

条件式とは if文の最初の ( ) の中に入っているコード、「もし～～ならば」の～～の部分を言います。

ここでは、条件式にふさわしいコードの条件について考えてみましょう。

もし（名前が'おすもう'と等しい）ならば｛'どすこい'と叫べ｝
もし（富士山の高さ）ならば｛'どすこい'と叫べ｝
もし（富士山の高さが3776kmと等しい）ならば｛'どすこい'と叫べ｝
もし（3.14159265）　　　　　ならば｛'どすこい'と叫べ｝

上の4つのなかで、意味が通るのは 1番と3番です。ですから、1番と3番の ( ) の中のみ、条件式にふさわしい。1番と3番の共通点は、後ろに「ですか？」と言葉を足したとき、はい/いいえで答えられる疑問文として、意味が通ることです。

このことをプログラミングの言葉で言うと、条件式には「結果が真偽値になる式」が入る、と端的に言い換えることができます。というわけで、真偽値、という言葉を覚えなければいけません。次に説明します。

真偽値、true、false

真偽値は「そうか/そうじゃないか」を示す値です。真偽値のことをBool値、Boolean型の値、論理値、真理値などとも言います。別称がやたら多いですね。Boolはブール、Booleanはブーリアンと読みます。どちらもブールさんという人の名前に由来するそうです。

真偽値には2通りしかありません。数には1とか3とか-0.4とか無限にありますよね。ところが、真偽値は次の2つしかないのです。覚えてしまいましょう。

真（true）は、「はい、そうです」という意味の真偽値。
偽（false）は、「いいえ、そうじゃないです」という意味の真偽値。

true, false はそれぞれ、トゥルー、フォールスと読みます。ただし、日本のプログラマは訛っているので、falseをフォルスと読んだり、ファルスと読んだりします。(余談ですが、プログラマには訛りの強い人もいて、ITをアイテーと読んだり、DVDをデーブイデーと読んだりします。私がそうです)

JavaScriptのコード上では、小文字で true, falseと書けばそれぞれ真偽値の真や偽を示すことができます。

比較演算子、論理演算子、演算子の優先順位

演算子とは、値を組み合わせて新しい結果の値を作るために、式で使われる記号です。たとえば、足し算記号の + も演算子の一種です。 3 + 4 という数式は、数値同士を足し算記号の + で組み合わせて、7 という結果を作り出しますからね。

JavaScriptには、結果が真偽値になる演算子がいくつも用意されています。これらは、「真偽値」同士や「真偽値じゃないもの」同士を組み合わせて、真偽値をつくります。

比較演算子は、「真偽値じゃないもの」を組み合わせて、真偽値を作るための演算子です。JavaScriptで代表的なものは、===, !==, <, > です。

論理演算子は、「真偽値」を組み合わせて、別の真偽値を作るための演算子です。 JavaScriptで代表的なものが、&& と || で、それぞれAND, ORを意味します。論理演算はCSSセレクタの回でも取り上げました。

例を見てみましょう。ここでは比較演算子と論理演算子の両方が使われています。

if (name !== 'おすもう' && height_cm > 180) {
    say('ノッポですね');
}

「a !== b && c > d」は、「(a !== b) && (c > d)」の順に計算されます。

なぜその順になるのでしょう？それは、「&& は !== や > より後から計算しなさい」と決められているからです。算数で「10 × 3.14 + 20 × 3.14」を「(10 × 3.14) + (20 × 3.14)」と計算するのと同じです。×÷は+－より先に計算しなさい、というこの手の決まりを、演算子の優先順位と言います。この順位づけが、&& とか !== とか > にも定められているのです。「JavaScript 演算子の優先順位」のキーワードで検索すれば、この決まりの全貌を調べることができます。

暗黙の型変換ふたたび - TruthyとFalsy

さて、サンプルコードを少し書き換えてみましょう。

if (3.14159265) {
    shout('どすこい！');
} else {
    shout('わっしょい！');
}

3.14159265は条件式としてふさわしいようには、とても思えません。このコードは意味が通らないはずです。ところが、その予想を裏切って、このコードはエラーを起こさず、なんと 'どすこい！' と叫んでしまいます。

なぜなら、3.14159265は、「それがif文の()の中にあるから」という理由で、暗黙の型変換によって、真偽値のtrueとみなされてしまうからです。falseではなくtrueに変換される理由は、そういう決まりだから、としか言いようがありません。「JavaScript truthy falsy」で検索すると、何がtrueに、何がfalseに変換されるか、その法則を調べることができます。

この法則と暗黙の型変換を駆使してコードを書くことを、私はあまり、お薦めしません。なぜなら、ややこしいし、そもそも一読して意味が通らないではないですか。とはいえ、この手の暗黙の型変換を前提としたコードを目にすることも出てくるだろうと思い、ここでは紹介したのでした。

まとめと次回予告

今回は、if文と真偽値、それにまつわる関連用語について、ちょっとじっくり紹介しました。理解を確かめるために、if文の条件式に、いろいろな式を入れて試し、遊んでみることをお薦めします。

次回はfor文と配列を紹介します。

では、よいお年を。

#コラム #プログラミング #初心者 #独学 #案内 #JavaScript #演算子

この記事が気に入ったらサポートをしてみませんか？