BUNCHO METHOD コードを楽しむプログラミング情報メディア

【レッスン#6】 「条件分岐」を学ぶプログラミング教材

プログラミング教材#6ではif文を使って条件によって処理を変えることができるようになることを目指します。

プログラミング教材#6の概要

プログラミング教材#6のサンプルコード①

See the Pen 教材#6-1 by programmingbird (@programmingbird) on CodePen.

偶数のときは○を表示する

サンプルコード①を実行しボタンを押してみてください。数のテーブルが横にずらっと並びますが、よく見ると偶数があるはずのところが○に差し替わっています。プログラミング教材#6ではこのように指定した条件によって処理内容を変え方法を学びます。

そもそも機械は自分で考えて判断することができません。そのかわり事前に「こうなったらこうしなさい」と指示さえしておけば、人間のように疲れてて間違えた、などということなく常に正しく動いてくれます。プログラミングでは「条件分岐」を正しく表現できるようになることがとても重要なのです。

プログラミング教材#6 サンプルコード①の解説

if文による条件分岐の基本形

if(☆) {  □  }
  else {  △  }
☆…条件式、□…条件に合ったときの処理、△…条件に合わなかったときの処理

ずばり、日本語で「訳」すならば、「もし☆ならば□を、☆でなければ△をしなさい!」です。

比較演算子について

条件式☆の部分でよく使われる比較演算子について解説しておきます。

A > BAがBより大きい(同じ場合は含まず)
A >= BAがB以上(同じ場合を含む)
A < BAがBより小さい(同じ場合は含まず)
A <= BAがB以下(同じ場合を含む)
A == BAとBが等しい
A != BAとBが等しくない

①と③は数学の不等号と同じなので問題ないですね。②と④も数学の≧,≦からイメージできると思います。

⑤は普通に考えると「A=B」と書くと思いますが、思い出してください、JavaScriptではA=Bというコードは(すでにここまで何度も使っているように)AにBを代入するという意味を持つのでしたね。ですからそれと区別するためにAとBが等しいことを表すときにはイコールを2回重ねて「A==B」と表します。※実は==と同様に左右が等しいことを意味する===という書き方もあり厳密にはそれぞれ違う意味や用途を持ちますが、ここでは省略します。

最後に⑥は「!」記号が「NOT」を意味すると理解しておいてください。「!=」でノットイコール、「等しくない場合」を条件にしたい場合によく使用するのでぜひ覚えておきましょう。バリエーション学習にこれを使った例をおいておきますので確認してみてください。

JavaScript //「アクション」の設定

では、実際にサンプルコード①のif文の部分を詳しく見てみましょう。

まず条件式の部分は、i % 2 == 0ですね。プログラミング教材#3 変数と演算の基本で紹介しましたが%はわり算のあまりを求める演算子です。例えばiが4のときは4÷2=2あまり0なのでi%2の結果は0になります。iが5のときは5÷2=2あまり1なのでi%2の結果は1になります。もうわかりましたね。iが偶数のときはi%2は必ず0になり、奇数のときはi%2は1になるのです。つまりi%2==0という条件式は「iが偶数のとき」という条件になっているわけです。結構使えるパターンなので覚えておきましょう。

□にあたる処理内容はstr += "<td>○</td>";です。iが偶数のときはマスに○を表示することになります。

△にあたる処理内容はstr += "<td>" + i + "</td>"; iが偶数でないとき(奇数のとき)はマスにiの値をそのまま表示しなさいということです。

実行結果として表示されたテーブルの各マスがその通りになっていることを改めて確認してみてください。

2つ目の条件も加えてみる

プログラミング教材#6のサンプルコード②

See the Pen 教材#6-2 by programmingbird (@programmingbird) on CodePen.

if文ではelseの後にさらにif文をつなげることで複数の段階での条件分岐を作ることができます。サンプルコード②では①と同じ「偶数ならば○を表示」の後に「3の倍数ならば△を表示」という2段階の条件分岐を使っています。

プログラミング教材#6 サンプルコード②の解説

JavaScript //「アクション」の設定

ポイントは1つだけ、else if (i % 3 == 0)の部分です。elseの後にまたifを続けています。条件式はi % 3 == 0 先ほどと同じ考え方です。3で割ったときにあまりが0になる、つまり「3の倍数のとき」という条件になりますね。

6の倍数のときどうなっているか?

気になった人は鋭いですね。偶数(2の倍数)でもあり3の倍数でもある6の倍数は○か△どちらになっているのでしょうか。実行結果を確認すればすぐわかる通り○になっています。これは、if文は先に書いてある方から順番に判定され分岐するため、例えばi=6など最初に偶数だと判定されてしまった場合はその後のelse以降を完全にスキップしてしまうからです。複雑な条件分岐を書く場合は結構混乱することもあります。そうなった場合は図に書いてみるなどしながらゆっくり整理してみましょう。