真と偽 条件分岐と演算子

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第1部 JavaScriptプログラミングの基本
第6話:真と偽 条件分岐と演算子

目次



マンガ














マンガ台詞

【1Page】
遊:ふふふ プログラムを マスターした私って て・ん・さ・い!
    るるるる らららら
先生:あー 喜んでいるところ悪いんだが
    お前たちはまだ プログラムのプの字も マスターしていないぞ
遊:えー!
先生:これからが 本番だ
遊:がっくり
【2Page】
先生:そんなに落ち込むな 今日の話をマスターすれば
    3レベルぐらい 一気に成長するぞ
遊:ほほう そんなにすごいことを 今日は習いますか?
先生:ああ
    さて 今まで勉強したのは 一本道のプログラムだった
    今日行うのは『分岐』だ
遊:分岐?
    (脳内)イケ面だけど 貧乏 イケてないけど 金持ち
【3Page】
遊:はーい 金持ちを選びます!
先生:何の話だよ
先生:さて 前回は 計算結果を表示する プログラムを作った
    『面積は10以上です』『面積は10未満です』と 表示したいとする
    どうだ できるか?
遊:できないわね
先生:俺はできる お前たちはできない
    だからお前たちは プログラム マスターではない
遊:ガーン
【4Page】
先生:というわけで 今日学ぶのは『if』だ
    例を書いてみるぞ
        if (/* 条件式 */) {
            // Aの処理
        } else {
            // Bの処理
        }
    このプログラムは
    もし『条件式』が 『真』なら 『A』の処理を実行
    『偽』なら 『B』の処理を実行する
遊:先生 『真』と『偽』って 何なの?
先生:よい質問だ
    誰か 『10 < 1』の意味は 分かるか?
麗:10・小なり・1?
    10は1より小さいって おかしいですよね?
先生:そう この式は 間違っている
    このように 式が間違っている 状態を『偽』と言う
    式の結果の『false』(偽)が
    ifの括弧内に代入される
【5Page】
守:正しい場合は 『真』なのですか?
先生:そうだ 『1 < 10』なら 『真』になる
    比較の記号を 表としてまとめて おいた
        左 == 右    左は右と同じ(『=』2つなので注意)
        左 != 右    左と右は違う(『!』は否定記号)
        左 <  右    左は右より小さい
        左 >  右    左は右より大きい
        左 <= 右    左は右より小さいか同じ
        左 >= 右    左は右より大きいか同じ
    この条件分岐を使って プログラムを書いてみろ
【6Page】
麗:はい できました
遊:げっ 早いわね
        // 遊のテストの点数
        var tennsuuYuu = 10;
        if (tennsuuYuu >= 60) {
            alert("合格");
        } else {
            alert("おばかちゃん");
        }
    『おばかちゃん』と表示
麗:おほほほほほ〜
遊:ぐぬぬぬぬ 麗の奴め〜〜



説明

この章では、『条件分岐』について学びます。また、『条件分岐』を行うための『真と偽』の判定や、その判定を行うための『比較演算子』についても学びます。

プログラムでは、多くの場合、条件によって処理を分岐させます。たとえば『面積が10以上の場合』と『面積が10未満の場合』で、違うメッセージを表示させたいとします。その場合は、『面積が10以上か、10未満か』を判定する必要があります。

こういった『条件に応じて処理を分岐させる』ために用意されている仕組みが、『if』文になります。

本章では、まず、この『if』文の使い方を紹介します。その後、『条件分岐』を行う上で必要な、様々な知識を説明していきます。



『if』文と『真偽』

『条件分岐』を行うための『if』文は、以下のように書きます。

if (/* 条件式 */) {
    // Aの処理
} else {
    // Bの処理
}

『if』に続く『(〜)』内の式が正しければ『Aの処理』が、間違っていれば『Bの処理』が実行されます。この『正しい』『間違っている』ということを、プログラムの世界では『真』『偽』と言います。

たとえば『10 < 1』の式は間違っています。この場合、この式の結果は『偽』であると言います。逆に『1 < 10』であれば正しいので、『真』であると言います。

以下、図で示します。

プログラムでは『if (a >= 10)』のように、変数を利用して条件式を書くことで、「変数『a』が10以上」(真)なら『Aの処理』を実行させ、「変数『a』が10未満」(偽)なら『Bの処理』を実行させます。

この条件式に使った『<』『>=』のような記号を、『比較演算子』と言います。

それでは以下、『比較演算子』について詳しく解説していきます。



『比較演算子』

条件分岐を行うためには、『if』の丸括弧の中で、『真偽』の判定を行わなければなりません。

そのために利用できるのが『比較演算子』です。演算子の左右を比較して、その演算子の条件に合っていれば『真』を、合っていなければ『偽』を返します。

代表的なものを、以下に示します。

演算子説明
==左と右が同じなら真(『=』2つなので注意)
!=左と右が違うなら真(『!』は否定記号)
< 左が右より小さいなら真
> 左が右より大きいなら真
<=左が右より小さいか同じなら真
>=左が右より大きいか同じなら真



『論理演算子』

『if』の丸括弧の中の条件判断ですが、時には複雑な判定を行いたい時もあります。

たとえば、『点数が60点以上、70点未満の場合』といった条件があったとします。この条件は、『if』を2つ使い、以下のように書きます。

var tensuu = 65;
if (tensuu >= 60) {
    if (tensuu < 70) {
        alert("60点以上、70点未満");
    }
}

しかし、見た目がちょっと複雑です。このプログラムは、『論理演算子』を使えば、もう少しシンプルに書くことができます。

『論理演算子』は、『A かつ B』といった条件や、『A または B』といった条件を表す式です。

演算子説明
&&左であり、かつ右であるなら真
||左または右なら真

これは、以下のように使います。

var tensuu = 65;
if ((tensuu >= 60) && (tensuu < 70)) {
    // 『tensuu >= 60』かつ『tensuu < 70』である
    alert("60点以上、70点未満");
}

この『論理演算子』を使えば、複雑な条件を短く書けます。

また、この『if』の丸括弧の中は、見づらければ、改行して書いても構いません。

var tensuu = 65;
if ((tensuu >= 60)
 && (tensuu < 70)
) {
    // 『tensuu >= 60』かつ『tensuu < 70』である
    alert("60点以上、70点未満");
}

プログラムは、後で見直した時に読みやすいように、各自工夫して書いてください。



『条件演算子』

プログラムに慣れてくると、『if』を使った条件分岐を書くのが面倒だ、と思い始めるかもしれません。

単純な条件分岐を行う際は、『if』文よりも簡単な書き方があります。それが、『条件演算子』を使った書き方です。

演算子説明
条件式 ?:条件式が真なら左の値、偽なら右の値

これは、以下のように使います。

var tensuu = 65;

var mojiretu = (tensuu >= 60) ? "合格" : "不合格";
    // 変数『tensuu』が『65』で『60』以上なので、
    // 変数『mojiretu』には『合格』が入る

alert(mojiretu);



『演算子』の優先順位

『演算子』には、プログラムとして解釈される順番が決まっています。

例えば、『*』(掛け算)は、『+』(足し算)より先に処理されます。そのため、『1+2*3』は、掛け算が足し算よりも先に処理されて、『1+6』となり、最終的な答えは『7』となります。

これまで出てきた『演算子』の優先順位を、簡単な表にしておきました。参考にしてください。

優先順位記号
『(〜)』括弧
『++』『--』増減、『-数字』マイナス
 『*』『/』『%』掛け算、割り算、剰余
 『+』『-』足し算、引き算、『+』文字列の結合
 『<』『<=』『>=』『>』大きさの比較
 『==』『!=』一致の比較
 『&&』かつ
 『||』または
 『〜?〜:〜』条件演算子
『=』代入、『+=』『-=』などの複合代入
『,』カンマ

さらに詳しい『演算子』の説明は、以下を参考にしてください。


参考:とほほのJavaScriptリファレンス - 演算子



『if』の少し高度な使い方

『else』の省略、『else if』の利用

『if』を使った『条件分岐』式では、『else {〜}』の部分に、条件が『偽』の場合の処理を書きます。

if (/* 条件式 */) {
    // 条件式が真の場合の処理
} else {
    // 条件式が偽の場合の処理
}

『else』以下は、必要なければ省略しても構いません。

if (/* 条件式 */) {
    // 条件式が真の場合の処理
}

また、『else』のあとに『if』を書くことで、さらに細かく分岐させることもできます。

if (/* 条件式1 */) {
    // 条件式1が真の場合の処理
} else if (/* 条件式2 */) {
    // 条件式1が偽の場合で
    // 条件式2が真の場合
} else if (/* 条件式3 */) {
    // 条件式1が偽の場合で
    // 条件式2も偽の場合で
    // 条件式3が真の場合
} else {
    // 全ての条件式が偽の場合
}

以下、この『条件分岐』の違いを図で示します。

『{〜}』を省略した『if』文

『if』や『else』の後の処理が1つだけの場合は『{〜}』を省略することができます。プログラムを、より短く書きたい場合に、こういった書き方を利用してください。

まずは、『if (〜) {〜}』を、『{〜}』なしで書いてみます。

if (/* 条件式 */) /* 条件式が真の場合の処理 */
if (1 > 0) alert("真");

次に、『if (〜) {〜} else {〜}』を、『{〜}』なしで書きます。

if (/* 条件式 */) /* 条件式が真の場合の処理 */
else /* 条件式が偽の場合の処理 */
// ○ 以下は有効
if (1 < 0) alert("真");
else alert("偽");

// ○ 以下は有効
if (1 < 0)
    alert("真");
else
    alert("偽");

// × 以下は処理の数が複数なので駄目
if (1 < 0)
    alert("真"); alert("真");
else
    alert("偽"); alert("偽");

// ○ 処理が複数の場合は『{〜}』を付ける
if (1 < 0) {
    alert("真"); alert("真");
} else {
    alert("偽"); alert("偽");
}



もう1つの条件分岐式『switch』

条件分岐式には、『if』以外に、『switch』もあります。

この『switch』は、変数の数値を見て、『1ならAの処理』『2ならBの処理』……と、条件と処理を列記していくための方法です。

以下、図で処理の流れを説明します。

以下、実例を示します。

var tensuu = 3;
switch (tensuu) {
    case 1:
        // 変数『tensuu』の数値が『1』の場合
        alert("成績1番 おめでとう!");
        break;    // 処理終了
    case 2:
        // 変数『tensuu』の数値が『2』の場合
        alert("成績2番 銀メダル!");
        break;    // 処理終了
    case 3:
        // 変数『tensuu』の数値が『3』の場合
        alert("成績3番 銅メダル!");
        break;    // 処理終了
    default:
        // 変数『tensuu』の数値が『その他』の場合
        alert("もっと頑張りましょう");
        break;    // 処理終了
}

この場合は、『成績3番 銅メダル!』というメッセージが表示されます。



サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(遊のテストの点数)を表示

sample2.html』(switch)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「マンガでわかるJavaプログラミング」
プロ部の面々が、今度はjavaのプログラミングに挑戦。
javaを1から学ぶ人向けの書籍です。
秀和システムより発売。 詳細情報


古い本
HTML5&JavaScript本格ゲームプログラミング 〜ライブラリ自作からはじめるブラウザゲーム開発
マンガでわかるAndroidプログラミング 第2版
Google Androidアプリ開発ガイド 第3版
プロならば知っておくべきWebコーディング&デザインの定石100

『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 - 弊社への連絡 -
までお願いします。