前回の第5章ではMath.random()関数とMath.floor()関数を使用して乱数を得る方法と、if文で条件式に応じて処理を分岐させる方法の2つを学びました。今回は、if文を応用して福引きプログラムを作っていきましょう。前回のアトランダムなおみくじとは異なり、福引くじはアタリが数本、残りはほぼハズレという確率を用いた特性があります。福引プログラムでは「確率」を用いて「制御」を行いますので、数値の大小を比較する方法を学びましょう。条件式が成立しなかった時に処理を行うif-else文さて前回は「条件」を表す為にif文をいくつも書いていましたね。実は複数の条件を記述する場合、連続してif文を記述することのできるif-else文という方法が使えます。if文のおさらいを兼ねて、以下のコードをエディタに貼りつけ実行してみましょう。1){alert("こんばんは");}【code:006_01】まずprompt関数でユーザーから入力された値が変数valに代入されます。この変数valの値が1であれば、”こんにちは”と出力され画面上に表示されます。変数valの値が0であれば、”こんばんは”と出力され画面上に表示されます。この2つのif文を、if-else文で1つにまとめてみましょう。最初に考え方ですが、prompt関数から入力されるユーザーの値が「1」であれば”こんにちは”「1」でなかった場合は、全て”こんばんは”と表示させます。出力される結果は先ほどと同じです。このことを踏まえてコードを記述しましょう。0){alert("こんにちは")}else{alert("こんばんは");}【code:006_02】if文の{}の後に「else」と記述され、その後さらに{}が記述されます。elseの後の{}内には、前述のif文の条件が成立しなかった際に実行される処理が書かれています。0」すなわち「変数valの値が0か?」という条件式ですので、if文の条件が成立しなかった場合、つまりelseであった場合は「変数valの値が0ではない」ということになります。この条件の時に”こんばんは”という処理が実行されます。“1か0を入力してください!”とpromptのダイアログには表示していますが、試しに別の値をいれてみましょう。2でも3でも、100でも構いません。(ただしNumber関数は数値しか受け付けません。半角数字を入力してください。)1以外の値を入力すると、elseの後の{}内の処理である「alert(“こんばんは”);」が実行されますので、画面上に”こんばんは”と表示されることがわかるはずです。このように、elseを使うことでif文の条件に合致しなかった場合の処理、すなわち条件式が「偽」falseの値をとる場合の処理を書くことができるのです。フローチャートでは以下のように表すことができます。条件式が成立する場合はtrueの値を取るので、左側の処理が実行されます。条件式が成立しない場合はfalseの値を取るので、右側の処理が実行されます。これまで詳しく説明していませんでしたが、条件式が成立する「真」のtrueや、条件式が成立しない「偽」のfalseは、論理型と呼ばれる特殊な値です。※数学者ジョージ・ブールが使った記号なので、boolian型(ブーリアン型)やbool型(ブール型)とも呼ばれます。0」(1は0であるか?)という条件式の値は偽なのでfalseです。」の左辺と右辺の値を比較する演算子は、論理型のtrueまたはfalseを導くための役割を持っています。if文の()内で値がtrueまたはfalseなのかを評価しているのです。このことをしっかり理解しましょう。if-else文で「ture」か「false」を導くそれでは試しに以下の1行のコードを実行してみましょう。1);ダイアログでtrueと表示されますね。1」の条件式が評価されると、trueという値になります。1」は「true」と等しいと言えます。以下の1行のコードを実行してみましょう。0);ダイアログでfalseと表示されますね。0」の条件式が評価されると、falseという値になるのです。0」は「false」と等しいと言えます。条件式は最終的に「ture」か「false」のどちらかの値が導かれるということが理解できたでしょうか。数学の授業で学ぶ「論理式/論理学」が分かると話は早いのですが、不慣れな方や、すっかり忘れてしまった方にも分かりやすく解説いたしますので、ここはひとまず話を戻して先へと進みます。先ほどのコード【code:006_02】に追記していきます。prompt関数でユーザーから入力された値が2の時、”おやすみなさい”と表示されるコードを追加しましょう。0の時→”こんにちは”1の時→”こんばんは”2の時→”おやすみなさい”と表示させましょう。今回は自分でコードを考え、プログラムを実行してみてください。分からなかった場合は、以下のコード【code:006_03】を記述してください。2){alert("おやすみなさい");}【code:006_03】さて、コードの入力・実行まで試していただけましたか?実は上記【code:006_03】のプログラムコードには間違いがあります。デツクル6章で記述してきた知識でこの問題を解こうとした場合、まず一番下の行にif文で新たに条件を加えようと考えるはずです。この方法だと変数valの値が2の時、”こんばんは”と”おやすみなさい”の2つの挨拶が表示されてしまうのです。【余談】プログラミング初学者の方は、プログラムがうまく動かなくて焦ったり、自分には向いていないと諦めたくなったり、最初のうちは嫌な思いをするかもしれません。プログラムはコードを間違えて、直して、その繰り返しで作り上げていくものです。熟練したプログラマも何行か書けば何ヶ所か間違えるものです。エラー...このトライ&エラーの繰り返しです。この方法で最終的に自分の思い通りに動くプログラムが出来上がれば十分なのです。間違ったコードを書いてプログラムが動かないなんてことは常に起こります。気に病むことではありません。今回のように、動かないコードを意図的に書かせることで「遠回りさせるな!」と憤る方がいるかもしれません。先ほど述べたように、トライ&エラーの繰り返しでプログラムが出来上がることを知っておいて欲しいという意図もあります。1つ1つ問題となるところを見つけ出し解消していきましょう。複数条件の分岐、else-if文さて、それでは間違いのあるプログラムを修正していきましょう。【code:006_03】のどこに間違いがあるのでしょうか。最初のif-else文で、0は”こんにちは”、0以外の値は全て”こんばんは”と表示されるよう書かれています。このまま最終行に「2の時は”おやすみなさい”」を追記すると、2は0以外の値なので、最初のif-else文で指定した”こんばんは”が表示され、さらに最終行に追記したif文の”おやすみなさい”の2つの挨拶が表示されてしまう結果となります。最初に使用したif-else文は今回使えません。この場合はelse-if文を使います。詳しく見ていきましょう。2){alert("おやすみなさい");}【code:006_04】プログラムコード【code:006_02】で書いたelse文の後に、半角スペースを入れてifと書いています(半角スペースの入れ忘れに気をつけてください。)勘がいい方はピンときたかもしれません。if-else文の条件式でユーザーから入力された値がelseだった場合、else-if文を使うことで、さらに条件を分岐をさせることができます。フローチャートで記述すると、以下のように表すことができます。0」が成立する場合は処理1を実行します。1」が成立する場合は処理2を実行します。2」が成立する場合は処理3を実行します。条件式が成立した時点でその{}内の処理を行いますが、{}の処理を行ったら、それ以降のelse文が実行されないのと同様に、下にあるelse-if文の条件も無視されます。フローチャートの処理1である”こんにちは”が表示されたら、それ以降の条件式は評価すらされません。フローチャートの処理1~3には横のつながりはありません。入力値に対して処理1~3のいずれか1つだけが実行されるのです。連続で処理1~3が実行されたり、複数回処理が実行されることはありません。if文まとめさて、if文に加えて、else文、else-if文、これらを学びましたが、if文についての書き方は全て解説したことになります。一度聞いただけではまず覚えられませんので、実際に何度も使ってみることが大切です。それでは最後になりましたが、福引きプログラムの作成に進みましょう。比較演算子の>と<おみくじの場合は、それぞれの結果が均等に出力されていましたが、今回の福引きは当たりの確率を制御する必要があります。今回作成する福引きプログラムの仕様は次の通りです。1位が当たる確率は3%2位が当たる確率は7%3位が当たる確率は10%残り(出現確率は80%)をハズレとします。実行するたびに、1位の時は”1位”2位の時は”2位”3位の時は”3位”ハズレの時は”ハズレ”と表示させます。どのようなコードを書けばよいでしょうか。数字の扱いに詳しい方は解法に気づいたかもしれませんね。ここでは乱数の求め方とif文での判定に工夫が必要です。乱数を0~99の範囲(合計100の数字)を取るよう結果を出力しましょう。100個の正の数が必要ですので、Math.random()関数で取得した値に100を掛け、Math.floor()関数を用いて小数点を切り捨てます。ここまでは前章と同じ方法ですね。表示alert(rand);【code:006_05】これで0~99のランダムな値を出力するロジックのコードが書けました。次に、3%の確率で1位を表示するためには、一体どうしたら良いのでしょうか?結論から言いますと、条件式の値が0と1と2である時に”1位”が表示されればよいのです。100個の正数の中から0、1、2、が出る確率は100分の3です。次にif文の条件を記述します。今までは比較する値の範囲が同じである「==」を使用していましたが、今回は>と<という比較演算子を使用してみましょう。(>は大なり、<は小なりと呼びます。b」(aしょうなりb)は「aはbより小さい」という意味です。>のツノの先端にある値が「小さい数字」、逆に開いている方にある値が「大きい数字」と覚えておきましょう。「randが3より小さい時」という意味になります。ちなみに2以下の値を表現するために≦を使用することもできます。JavaScriptでは「=<」と記述します。2」(randが2である時と、2より小さい時)と書いても同じ意味になります。解釈がしやすい比較演算子を使えば良いと思いますが、正しく意味が読み取れるようにしておきましょう。※1位と表示される確率が低いため、このままプログラムを動かしても正しく処理されているかどうか分かりません。2位、3位とハズレの場合の処理も追加し、プログラムを完成させてしまいましょう。2位の場合は、1位であった時以外の場合に判定しますから、else-if文を使用します。出現確率は7%なので、3~9の値を取ればよいのです。3位の場合は、出現確率は10%なので、10~19の値を取ればよいのです。ハズレの場合は、アタリ以外だった場合の全ての値なので、条件式は不要です。elseを使って”ハズレ”と表示すれば完成です。福引プログラムはこれで完成です。何度も動かすことで、1等や2等が当たりにくく、ほとんどハズレであることが体感できるでしょう。この後の記事で演習をいくつか用意しています。if文を使うことで、だいぶ高度な処理ができるようになってきました。腰を据えて演習問題に挑戦し、ぜひif文を習得してください。コメントをキャンセルコメントを投稿するにはログインしてください。Reserved.運営会社|プライバシーポリシ。