こんにちは、システム担当のてけてけです。
今年の年始は寝正月を満喫しました。
昨年からのコロナ禍で、今年は初詣に行けなかった方も多いかと思います。
当然、新年最初の運試しのおみくじも引けていないと思います。
というわけで、JavaScriptで作る簡単オンラインおみくじに挑戦しましょう。
JavaScriptとは？
JavaScriptとは、ブラウザで動くプログラミング言語です。
多くのWebページに利用されており、今やWebサービスを作るのに欠かせない技術です。
JavaScriptを使うと、非常に動的なページが作れます。
例えば、TwitterやInstagramなどのタイムラインを下にスクロールすると延々と過去に遡りページを読み込む機能はJavaScriptで実装可能です。
頑張ればゲームだって作れてしまいます。
入力と出力を考える
まず、ユーザーが「何をどうする」と、「どのように結果がみれる」かを決めます。
今回はとにかく処理を簡単にするため、「ボタンを押す」と「メッセージボックスに結果が表示される」ようにします。
「何をどうする」部分が入力で、「どのように結果がみれる」部分が出力です。
「ボタンを押す」が入力、「メッセージボックスに結果が表示される」が出力にあたります。
処理内容を考える
次に、どのようにすればおみくじが引けるのか、処理を考えます。
おみくじを引くと、「大吉」「吉」「凶」などの結果がランダムに得られますね。
つまり、やることは以下の３つの処理だけです。
- おみくじに利用する乱数値を取得する。
- 乱数値から、おみくじ結果を取得する。
- おみくじ結果をメッセージボックスに表示する。
それぞれの処理のプログラムを具体的に考えてみます。
おみくじに利用する乱数値を取得する
JavaScriptにはMath.random()関数があります。
これを使うと、0以上1未満の小数をランダムで取得できます。
Math.random(); // 0.5150984760016262（実行する毎に値は変わります）この関数で得た乱数値を利用しておみくじを出します。
乱数値から、おみくじ結果を取得する
まず、おみくじの割合を決めます。
昨年は多くの方が「凶」を引いたのではないかと思うので、このおみくじでは少し割合を減らすことにします。
おみくじの結果はif文で判断します。
if(条件１) {
処理１
} else if(条件２）{
処理２
} else {
処理３
}これがif文です。
ifの条件１に合致すれば、処理１を実行します。
条件１に合致しない場合、else ifの条件２に合致すれば、処理２を実行します。
条件１、条件２のどちらにも合致しなければ、elseの処理３を実行します。
最初のif文で大吉の条件にあてはまるかどうか判定します。
思い切って、50%の確率で大吉にしてしまいましょう。
if(Math.random() < 0.5) {
大吉と表示する処理
}先ほど得たランダム小数が0.5以下だったら、大吉とします。
吉、凶などの設定も上のif文を参考に設定します。
おみくじ結果をメッセージボックスに表示する
最後に、メッセージボックスを表示します。
window.alert()関数でメッセージボックス（正確には警告ダイアログ）を表示できます。
window.alert(表示したい内容);実際にプログラミングしてみる
上記の文と関数を利用して、実際におみくじを引く関数を作ります。
<script>
// おみくじを引く処理
const drawOmikuji = function() {
const omikuji = Math.random(); // 乱数値を取得
if(omikuji < 0.5) { // 50%
window.alert("大吉"); // メッセージボックスに「大吉」と表示させる
} else if(omikuji < 0.7) { // 20%
window.alert("吉");
} else if(omikuji < 0.9) { // 20%
window.alert("小吉");
} else if(omikuji < 0.99) { // 9%
window.alert("末吉");
} else { // 1%
window.alert("凶");
}
};
</script>Math.random()関数で得た乱数値を、使い回すためにomikujiという変数に入れておきます。
If文を利用し、omikuji変数の値を判定して、window.alert()関数で結果をメッセージボックスに表示します。
以上になります。
この処理をdrawOmikujiという名前の関数で作成します。
あとは、クリックした時にdrawOmikuji関数を実行するボタンをHTMLで作成します。
<button onclick="drawOmikuji()">おみくじを引く</button>まとめ
このように、シンプルな処理のプログラムならこんなに簡単に作れてしまいます。
今やプログラミングはプログラマーの専売特許ではありません。
独学で勉強するノンプログラマー、プログラミング教育の必修化、多くの人がプログラムに触れるようになってきました。
まだ触ったことはないけど興味はある、という方は多いかと思います。
プログラミングはなんとなく難しいというイメージがありますが、シンプルな処理であれば簡単にできるので、興味がある方は是非チャレンジしてみてください。
