3.4 数当てゲーム　《比較演算子、データ型》　【JavaScript超入門】

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。

jsstudy.hatenablog.com

3.4 比較演算子、データ型
- サンプルコード
- 実行結果
比較演算子
データ型
- 型変換（キャスト）
ヨーダ記法

3.4 比較演算子、データ型

(p.83)

if文からさらに一歩進んで、数字の大小を比較する条件式を作ります。

サンプルコード

（例）0～5の乱数を当てるクイズ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>3-04_comparison</title>
</head>
<body>
<h1>数当てゲーム</h1>
<h2>さまざまな比較演算子を使用する</h2>
<script>
var number = Math.floor(Math.random() * 6);
var answer = parseInt(window.prompt('数当てゲーム。0〜5の数字を入力してね。'));
var message;
if(answer === number) {
    message = 'あたり！';
} else if(answer < number) {
    message = '残念でした！もっと大きい';
    message += ' → 正解は' + number;
} else if(answer > number) {
    message = '残念でした！もっと小さい';
    message += ' → 正解は' + number;
} else {
    message = '0〜5の数字を入力してね。';
}
window.alert(message);
</script>
</body>
</html>

実行結果

上記のHTMLファイルをChromeで開きます。

f:id:jsstudy:20170401131156p:plain

f:id:jsstudy:20170401131207p:plain

このような画面が表示されたらOK。

比較演算子

(p.87)

今回の実習では3種類の記号「===」「<」「>」を使いました。

３つとも、記号の左側と右側を比較しているという点では同じなので、まとめて「比較演算子」と呼ばれています。

if文や繰り返し文の条件式を作るために使われます。

JavaScriptの比較演算子

developer.mozilla.org

演算子／意味／例

a === b ／ aとbが同じときtrue ／ 3 + 6 === 9

a !== b ／ aとbが同じでないときtrue ／ 3 + 6 !== 10

a < b ／ aがbより小さいときtrue ／ 3 + 6 < 10

a <= b ／ aがb以下のときtrue ／ 3 * 5 <= 21 , 3 * 7 <= 21

a > b ／ aがbより大きいときtrue ／ 3 + 6 > 8

a >= b ／ aがb以上のときtrue ／ 3 * 7 >= 15 , 3 * 7 >= 21

なお、「<=」はこれで１つの演算子です。

記号の順番をひっくり返して「=<」としてはいけません。

演算子として認識されなくなるので、プログラムが動かなくなります。

同様に「>=」も、「=>」としてはいけません。

データ型

データには種類（型）があります。

3.2 入力内容に応じて動作を変更する《変数》【読書メモ】 - JavaScript勉強会

JavaScriptでは7種類の型が用意されています。

数値型　（Number）

文字列型　（String）

論理型　（Boolean）

null型

undefined型

シンボル型　（Symbol）

オブジェクト型　（Object）

型変換（キャスト）

ある型のデータを別の型のデータに変える操作を「型変換」（キャスト）と言います。

(p.88)

parseIntは()内のパラメータを「整数に変換するように努力する」メソッドです。

この“努力する”というところがミソで、変換できないものは、数値に変換されません。

（参考）

JavaScript データ型と型変換まとめ - EZOLAB - エゾラボ

JavaScriptの型変換には、色々な方法がありますが、例えば以下の方法で実行することができます。

Number() - 整数への変換

Boolean() - 論理値への変換

String() - 文字列への変換

qiita.com

文字列 → 数値

var value = '1234';

// 以下、1234
Number(value);
parseInt(value,10);

数値 → 文字列

var value = 1234

// 以下、'1234'
String(value);
value.toString();
value + '';

数値、文字列 → ブーリアン型

型変換の手法として、Boolean関数を使うか、!演算を使用したイディオムがあります。

// Boolean関数を使う
Boolean(1);         // true
Boolean(0);         // false
Boolean(NaN);       // false

Boolean('zawa')     // true
Boolean('false')    // true
Boolean('')         // false

Boolean(null);      // false
Boolean(undefined); // false

// !を使う
!!1;                // true
!!0;                // false

!!'zawa';           // true
!!'';               // false

!!null;             // false
!!undefined;        // false

// オブジェクト型の型変換
// newを使うことによってオブジェクト生成
// 全て true
Boolean( new Number(0) );
Boolean( new String('') );
Boolean( new Boolean(false) ); // 注意!

ヨーダ記法

条件式を書くとき、式の左右を逆に書く「ヨーダ記法」という方法があります。

→ ヨーダ記法 - Google 検索

ヨーダ記法 - Wikipedia

ヨーダ記法（ヨーダきほう、Yoda notation）とは、条件式で比較するふたつの要素を一般的な順序と逆に記述するプログラミングスタイルをいう。

ヨーダ記法では条件式の左辺に定数を配置する。

映画『スター・ウォーズ』シリーズの登場人物・ヨーダが、標準的ではない英語の文法で話すことに由来する。

多くの場合、条件式は以下のように記述される。

if ( $value == 42 ) { /* ... */ }
// "もし $value が 42 と等しければ ..." と読める

ヨーダ記法では同様の式を逆に記述する。

if ( 42 == $value ) { /* ... */ }
// "もし 42 が $value と等しければ ..." と読める

ヨーダ記法の利点は、比較演算子「===」「==」を間違えて代入「=」と書いてしまった場合に、エラーとして見つけられることです。

批判

ヨーダ記法の批判者は、可読性の欠如が上記の利点を上回っていると考えている。

PythonやSwiftなどいくつかのプログラミング言語では、代入文が値を返さないようにすることで条件式中の代入を許容しないつくりになっており、この場合はこの種の不具合を作りこむことが不可能になる。

最近では、言語やコンパイラの改良が進み、比較演算子と代入の書き間違いを防止するためにヨーダ記法を使うメリットはなくなってきています。

文法チェック以外のメリットは、「結論を先に書く」ことで、（文脈上の）意味を明確にできるという点です。

ヨーダ記法のススメ ─ 比較対象を左辺に記述するメリット | MaryCore

結論を先に伝えることの重要性

コードは大抵、左から右に向かって読み進めるわけですから、重要な結論は左に書いた方が後のコードの理解もしやすくなりますし、見落としも減ります。

なぜコードの理解がしやすくなるのかに関してですが、そもそも人間の脳は結論を前提に物事を考えたほうが効率よく働くのです。

必要に応じて、条件式の書き方を使い分けてみましょう。