10分でわかる!if 文 -はじめてのプログラミング体験

はじめてのプログラミング体験

前回「変数と基本的な構文」では、プログラミング言語 JavaScript(ジャバスクリプト)の数と文字の扱い方、そして変数について学び、プログラミング特有の文法・構文を学びました。今回は条件分岐について学んでみましょう。

ここでの目的は実際のプログラミングを一度経験することです。習得ではないので、プログラミングした気分になって読むだけでも大丈夫です。プログラミングがまったくのはじめてなら「はじめてのプログラミング体験レッスン一覧」から始めましょう。

条件分岐 if文

「もし購入者が未成年ならお酒を売ってはいけない」、「もし信号が赤なら渡ってはいけない」、「もし80点を取れたらご褒美をあげる」など、私たちのまわりには「もし~ならば~」が溢れています。

「もし~ならば~」に対応するのが if文で、すべてのプログラミング言語において最も重要な機能のひとつです。

if文のifは中学英語で習ったif(イフ)です。「もし~」という英語の意味さえ知っていれば、if文はとても簡単!まず実際のソースコードを見てみましょう。

コード例

var age = 12;
if (age < 20) {
    document.write('未成年です。お酒を売ってはいけません。');
}

上のif文は、もし変数ageの値が20より小さいならば「未成年です。お酒を売ってはいけません。」と画面に表示しなさい、という意味になります。

前回「変数と基本的な構文」の復習ですが、変数 age には 12 が代入されています。20より小さいという条件を満たすので、画面には「未成年です。お酒を売ってはいけません。」と表示されます。

if文 はじめてのプログラミング体験

= は代入
算数や数学では = は右辺と左辺が等しいこと(イコール)を表しますが、プログラミング言語では右辺を左辺に代入することを表します。

次の場合はどうでしょう。

var age = 30;
if (age < 20) {
    document.write('未成年です。お酒を売ってはいけません。');
}

変数ageには30が入っており、20より小さいという条件を満たさないため、実行すると以下のように画面には何も表示されません。

if文による条件分岐の実行画面

真白な画面ではプログラムが実行されているのかさえわかりません。条件を満たさない場合でも何かできるようにする仕組みがあれば良さそうですが、if… else … という構文が用意されています。else は中学英語で習った else(エルス)、「でなければ」という意味です。

var age = 30;
if (age < 20) {
    document.write('未成年です。お酒を売ってはいけません。');
} else {
    document.write('成年です。お酒を売っても大丈夫です。');
}

これでifの条件をみなさない場合は「成年です。お酒を売っても大丈夫です。」と表示されるようになります。

if else 構文のサンプルソース

具体的なコードで見てきましたが、if … else … 構文をまとめると次のようになります。

if (条件式) {
    条件式を満たす場合に実行されるコード
} else {
    それ以外の場合に実行されるコード
}

else if 文

日常生活に溢れる「もし~」という条件分岐は複雑です。 if … else … だけでは力不足のときがあるでしょう。もう少し複雑な条件に対応するために else if という構文があります。else if により複数の条件を追加することができます。

コード例

var age = 14;
if (age < 6) {
    document.write('幼年期');
} else if (age < 15) {
    document.write('少年期');
} else if (age < 30) {
    document.write('青年期');
} else if (age < 45) {
    document.write('壮年期');
} else if (age < 65) {
    document.write('中年期');
} else if (age < 75) {
    document.write('前期高年期');
} else {
    document.write('中後期高年期');
}

上の if … elseif … else 構文は「もし年齢が6より小さいなら(0~5歳)幼年期、そうでなくもし15より小さいなら(6~14歳)少年期、そうでなくもし30より小さいなら(15~29歳)青年期 …(省略)、そうでなければ中後期高年期と表示しなさい」という意味になります。

ソースコードの最初の行で変数ageに14が入っているので、画面に少年期と表示されます。

else if 構文のサンプルソース

この記事のソースファイルはこちらからダウンロードできます。実際のソースコードを体験してみましょう。

お疲れさまでした。次回はこれまで学んだ変数と条件分岐を使ったプログラミングを通じて、「プログラミング的思考」を学んでいきます。

次の記事「実例を通じてプログラミング的思考を鍛えよう!- 体格判定アプリ編」を読む。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です