JavaScriptの基本である乱数生成と条件分岐を使えば、ちょっとしたミニアプリを手軽に作れます。
この記事では、その練習として「インチキくじ引きアプリ」を題材にしながら、コードの流れや仕組みを初心者でも理解しやすい形でまとめました。
動作の仕組みを押さえつつ、実際に動くサンプルコードも紹介します。
アプリの挙動をチェック
「くじを引く」ボタンを押すと「当たり」か「はずれ」かどちらかが出ます。
当たる確率はほとんどないですが、粘り強く押し続けると当たりが出ます。
1発で当たりが出る可能性もゼロではありません。
当たりが出るまで押し続ける必要はありません。
結果は？
絶対に当たらないように思えるかもしれませんが、1%の確率で当たりが出ます。
コード
以下のコードをコピペして使用することができます。
コードの下に解説もあるので、コードの意味を理解しましょう。
<body>
<button>くじを引く</button>
<p>結果は？</p>
<script>
const button = document.querySelector('button');
const p = document.querySelector('p');
button.addEventListener('click', () => {
button.disabled = true;
const num = Math.floor(Math.random() * 100);
function kujibiki() {
return num === 7 ? '当たり' : 'はずれ';
}
p.textContent = kujibiki();
setTimeout(() => {
button.disabled = false;
}, 300);
});
</script>
</body>
全体の流れ
「くじを引く」ボタンを押すと、JavaScript が乱数を使って当たりかハズレかを判定し、結果を <p> に表示します。
今回のくじは 7 が出たときだけ当たり という、やや偏った仕様になっています。
HTML 部分
<button>くじを引く</button>
<p>結果は？</p>
- ボタンをクリックすると抽選が始まります。
<p>は結果を表示する場所です。
JavaScript 部分
要素を取得
const button = document.querySelector('button');
const p = document.querySelector('p');
querySelectorを使って、ボタンと<p>を変数に保存しています。- これで、JavaScript から「ボタンを押された時の処理」や「結果表示」ができるようになります。
ボタンが押されたときの処理
button.addEventListener('click', () => {
- ボタンがクリックされたら、ここに書かれている処理が実行されます。
ボタンを一時的に押せなくする
button.disabled = true;
- クリック連打で処理が重ならないように、一度押されたら一旦ボタンを無効化します。
乱数でくじの番号を決める
const num = Math.floor(Math.random() * 100);
Math.random()は 0以上1未満のランダムな数を返します。- それに 100 を掛けて 0〜99 にし、
Math.floorで小数を切り捨てています。 - 最終的に 0〜99 の整数がランダムで 1つ生成されます。
くじ引き関数
function kujibiki() {
return num === 7 ? '当たり' : 'はずれ';
}
- 引かれた番号
numが 7 なら「当たり」、それ以外なら 「はずれ」 を返します。 - 条件を 1 行で書くために三項演算子を使用しています。
結果を画面に表示
p.textContent = kujibiki();
- 判定した結果（当たり or はずれ）を
<p>に表示します。
0.3秒後にボタンを再び押せるようにする
setTimeout(() => {
button.disabled = false;
}, 300);
setTimeoutを使って、300ミリ秒（0.3秒）後にボタンを再度有効化します。- これで連打による予期しない動作を防げます。
このコードのポイントまとめ
- 乱数（0〜99）を生成して、特定の数字だけを当たりとする簡単なくじ引き。
- クリックごとに抽選は独立して行われる。
- クリック中にボタンを無効化することで二重処理を防ぐ。
- 初心者でも扱いやすい、乱数＋条件分岐 の基本的な組み合わせです。
コードをカスタマイズしてみよう
今回のコードは当たり確率が1%ですが、当たり確率を50%にしてみる、30％にしてみるなど、自由にカスタマイズしてみましょう。
当たり確率が50％にしたい場合
const num = Math.floor(Math.random() * 2);
function kujibiki() {
return num === 0 ? '当たり' : 'はずれ';
}Math.random() * 2 → 0以上2未満の乱数
Math.floor(…) → 0 または 1
0 が出る確率：50%
1 が出る確率：50%
そのため、
num === 0 → 当たり（50%）
num === 1 → はずれ（50%）
となり、当たり確率 50% のくじ引きになっています。
当たり確率30%にしたい場合
const num = Math.floor(Math.random() * 10);
function kujibiki() {
return num < 3 ? '当たり' : 'はずれ';
}
0〜9 の 10 通り → 0,1,2 の3通りが当たり → 30%
