ここまでのおさらいをしておきましょう。prompt関数を使い、WEBページを閲覧しているユーザから値を受け取ることを「入力」と呼びましたね。その値をNumber関数を使用して文字型から数値型へ変換させた後、算術演算子を使用して計算することを「演算」と呼びましたね。(文字型を+で連結させる文字連結の場合、Number関数は使いません)そして演算した結果をユーザに示すため、alert関数などで画面に表示することを「出力」と呼びました。仕組みで「プログラムを書くことができる」ということはご理解いただけたことでしょう。他に、必要な要素があと1つあります。「制御」の仕組みだけで成り立っています。「制御」には主に「分岐」と「反復」の2パターンあります。「分岐」の代表的な構文(書き方に決まりのある文)がif文、「反復」の代表的な構文がfor文です。他にもいくつかの構文がありますが、それもif文かfor文の仲間です。このif文とfor文の機能が分かれば、プログラミングの本質は理解したと言えるでしょう。第5章からは、この「制御」の構文について学んでいきます。慣れないうちは考え方に戸惑うかもしれませんが、積極的に手を動かし理解に努めましょう。Math.random();alert(rand);【code:005_01】まずは【code:005_01】のコードをエディタに記述し実行してみましょう。ダイアログに小数点の値が表示されることを確認してください。何度か実行を押し、実行の度に小数点以下の値が変わることを確認しましょう。コードを見ると、まずMath.random()関数の戻り値を変数randへ代入しています。次に、変数randの値を引数にしてalert関数へ受け渡し、ダイアログで表示しています。このMath.random()関数は、ランダムな値を返す仕組みで、実行するたびにランダムな値(乱数)を、戻り値として返してくれます。戻り値の範囲は0以上1未満の数値で返します。試行回数を増やすと分かりますが、特定の値ばかり表示されるといった偏りはありません。このMath.random()関数で得た乱数を使うことで、ゲームやくじ引き、占いなどのプログラムが作れるようになります。シンプルな「おみくじ」を作っていきます。2分の1の確率で、大吉か小吉が表示されるプログラムを作ってみましょう。...と、その前に、小数点のままだと分かりにくいので、まずは変数randの値を0か1の整数へ変換します。整数のほうがif文での制御が簡単になるためです。整数への変換ができたら、変数randの値が0の時は小吉、1の時は大吉と表示させます。先ほどのコードに次の1行を追記します。2」は、変数rand(小数点の乱数)に2を掛ける計算式です。これは0と1の値を作るための工程です。おみくじの結果が「大吉」「小吉」の2つなので、値も2つ必要になるというわけです。これによって0以上1未満の範囲をとる乱数だったものが、0以上2未満の範囲をとった数値となりました。実行結果を見てダイアログで表示される値が整数に変わっていることを確認しましょう。※今回のプログラムではNumber関数を使わずに演算子を使用して計算できていますが、これはMath.random()関数が数値型を返す関数だからです。かの判別についてはJavaScriptの公式マニュアルを参照することで可能です。リファレンスのサイトURLを関連記事に載せてありますのでご参照ください。次に小数点の切り捨てを行うMath.floor()関数を使います。Math.floor()関数は、引数を小数点以下で切り捨て、整数値にして返す仕組みです。「0.001」は「0」に、「1.001」は「1」に変換されます。先ほどのコード【code:005_02】に次の1行を追記します。計算例0.1*2=0.2→小数点切り捨てで「0」0.2*2=0.4→小数点切り捨てで「0」0.3*2=0.6→小数点切り捨てで「0」0.4*2=0.8→小数点切り捨てで「0」0.5*2=1.0→小数点切り捨てで「1」0.6*2=1.2→小数点切り捨てで「1」0.7*2=1.4→小数点切り捨てで「1」0.8*2=1.6→小数点切り捨てで「1」0.9*2=1.8→小数点切り捨てで「1」コード内の計算によって、2つの整数「0」と「1」を得ることができました。これで0と1がランダムにダイアログへ表示されるようになりました。あとは0の時に「小吉」、1の時に「大吉」と表示することができれば、おみくじ機能は完成です。残る処理を加えてプログラムを完成さましょう。英語文の「if」とは、「もし○○ならば、○○です」という文を作るための単語です。プログラミングにおいてもほぼ同義です。今回はif文を使って「もし変数randが0ならば、”小吉”と表示する」と書いていきましょう。先ほどのコード【code:005_03】のalert部分を削除し、if文に書き換えます。実行ボタンを何度か押してみてください。2分の1の確率で”小吉”と表示されます。”大吉”と表示される処理はまだ実装していないので、何も動かない時もあります。0」と書かれています。イコール記号を2つ連続で書いた「==」は、比較演算子と呼び、この場合変数randが0と等しいかどうかの比較をしています。if文の()内に書かれる式は、比較演算子を使った「条件」を表したものなので、「条件式」又は「条件」と呼びます。0」ですが、これは「変数randを0と比較し、変数の値が0である場合」という意味です。この条件式が成立する時に、()に続いて次に書かれている{}「中カッコ」内の「alert(“小吉”);」が実行されます。変数randの値が0でない場合は()内にある式が成立しないので、{}内の処理は実行されません。コンピュータの内部的には演算が行われていますが、alert関数で出力されないのでブラウザ上では何も動いてないように見えるのです。次に”大吉”と表示する処理を追加してみましょう。”小吉”の時と同じ要領でif文を書きます。}【code:005_05】if文を使用することで、条件式が成立する時にのみ、ダイアログでブラウザに表示する仕組みが実行できるようになりました。変数randが0の時「alert(“小吉”)」が実行され、変数randが1の時「alert(“大吉”);」が実行されます。※if文のコードが複数行に改行され書かれていますが、これは内容を見やすく把握する為です。改行せず1行で書いても処理は実行されます。コードのまとめ方や記述のルールなどはこちらの関連記事をご覧ください。→関連記事【インデントや改行を入れる理由~if文や変数についての書き方~】フローチャート図の読み方それでは、今回のプログラムの処理行程をフローチャート図で説明します。フローチャート図とは、処理の流れる経路を可視化できる便利な図です。プログラミングのコードを見た時に、どういう処理が動くのか分からなくなったら、フローチャートを書き出し頭の中を整理します。フローチャート図の読み方を覚えて活用しましょう。※フローとは「滝」を意味します。矢印で図示される特別な場合を除き、滝の水と同様に線は下へと進みます。上から下へ読み進めましょう。それでは、以下のフローチャート図を解説します。if文の()内で比較した2つの値が等しい時、論理学では「真」(しん)、プログラミングでは「true」(トゥルー)と呼びます。真とは「論理的に妥当である」という意味で、反対に()内で比較した2つの値が等しくない時は論理学で「偽」(ぎ)、プログラミングでは「false」(フォルス)と呼びます。フローチャート図では、ひし形がif文の<分岐>を表し、条件式の値がtrueなのかfalseなのか、比較した結果を線で辿りながら下に向かって進みます。値が0の時はTrueなので{}内のコードが実行されますが、この実行は図の<処理>部分で表されています。falseの時は{}内のコードが実行されず、チャートでは図の右側の線を通って下へ落ちていきます。これらの運勢結果を出力するおみくじプログラムを書いてください。運勢結果は7つとも同じ頻度で出現させましょう。おみくじの結果が7つありますので、整数値も7つ必要です。整数値を7つ得るために、Math.random()関数の戻り値に7を掛けています。これで0~6の7つの整数を得ることができます。あとはif文で0~6の値に応じた、それぞれの運勢結果を記述し、ダイアログでブラウザに出力する処理を実行させます。長いプログラムになってきましたね。if文はもう少しシンプルに書くことができますので次章解説します。次章では、確率を使った当たりの出やすい福引プログラムを作っていきます。コメントをキャンセルコメントを投稿するにはログインしてください。Reserved.運営会社|プライバシーポリシ。