全5回にわたってお届けしてきた「はじめてのプログラミング（JavaScript超入門）」も、いよいよ最終回です！
今回は、第1回〜第4回で学んだすべてのパーツ（変数・配列・関数・組み込み関数・条件分岐）をひとつに合体させて、見た目もちょっぴりカッコいい『完成版・おみくじガチャWebアプリ』を仕上げます！
完成版コード（このままコピーして動かせます！）
パソコンのメモ帳を開いて、以下のコードをそのまま貼り付けて my_omikuji.html という名前で保存してみましょう。
見た目を整える、CSSも沢山書いているからとても複雑そうにみえるけど、注目してほしいのはJavaScriptを書いている、<script>～</script>の間の、わずかな行だけです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>赤猫座のおみくじガチャ</title>
<style>
body {
background: #1a1e24;
color: #f1e6cf;
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.card {
background: #242b35;
padding: 36px 40px;
border-radius: 16px;
text-align: center;
box-shadow: 0 12px 30px rgba(0,0,0,0.4);
border: 1px solid #b89b5e;
max-width: 380px;
width: 90%;
}
h1 { font-size: 22px; margin-bottom: 20px; color: #d7bd7b; }
.result-box {
font-size: 32px;
font-weight: bold;
margin: 24px 0;
min-height: 48px;
color: #fff;
}
.comment { font-size: 14px; color: #a8b9b4; min-height: 40px; }
button {
background: #b89b5e;
color: #12161c;
border: none;
padding: 14px 28px;
font-size: 16px;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
transition: transform 0.1s, background 0.2s;
}
button:hover { background: #d7bd7b; transform: scale(1.05); }
</style>
</head>
<body>
<div class="card">
<h1>🐱 赤猫座のおみくじガチャ</h1>
<div class="result-box" id="result">？</div>
<p class="comment" id="comment">ボタンを押して運試し！</p>
<button onclick="playGacha()">おみくじを引く</button>
</div>
<script>
// 1. おみくじの配列（リスト）を用意！
const kujiList = ["超大吉 🌟", "大吉 ✨", "中吉 🍀", "吉 🌿", "小吉 🍵", "凶 ⚡"];
// 2. ボタンが押されたら動く関数（自動販売機）
function playGacha() {
// 組み込み関数を使ってランダムに番号を選ぶ
const randomIndex = Math.floor(Math.random() * kujiList.length);
const chosen = kujiList[randomIndex];
// 画面の運勢文字を書き換える
document.getElementById("result").textContent = chosen;
// 3. 条件分岐（もし〜ならメッセージを変える）
let message = "";
if (chosen.includes("超大吉")) {
message = "大大大アタリ！何か奇跡が起きるかも！？";
} else if (chosen.includes("大吉")) {
message = "最高の一日！やりたいことにどんどん挑戦しよう！";
} else if (chosen.includes("凶")) {
message = "落ち着いて過ごそう。甘いものを食べると運気UP！";
} else {
message = "穏やかで良い日になりそうです。笑顔でいこう！";
}
// 画面のコメントを書き換える
document.getElementById("comment").textContent = message;
}
</script>
</body>
</html>ブラウザで開いて遊んでみよう！
保存した my_omikuji.html をブラウザで開いてみてください。
黒と金のスタイリッシュなカードが表示され、「おみくじを引く」ボタンを押すたびに、「超大吉」「中吉」などの結果と、それに応じたコメントがパッパッと切り替わるはずです！
自分好みに大改造してみよう！
完成したコードは、中身をちょっと書き換えるだけで、いろんなオリジナルツールに変身させることができます。
改造例①：『今日のおやつ決めガチャ』
const kujiList = ["ポテトチップス 🥔", "アイスクリーム 🍨", "チョコレート 🍫", "たい焼き 🐟", "プリン 🍮"];
改造例②：『RPGのモンスター出現ボタン』
const kujiList = ["スライム (HP: 10)", "ドラゴン (HP: 9999) 🐉", "ゴブリン (HP: 30)", "はぐれメタル (EXP: 10000) ✨"];
kujiList の中身を好きな言葉に変えるだけで、世界にひとつだけのオリジナルアプリになります！
もちろん、数に制限はないので何個でも増やしたりできます。増やしたり減らしたりするルールはとても簡単で"スライム (HP: 10)",のように、""で囲んだ中に文字列を入れて、,で区切るだけでOKです。（一番最後だけは、カンマはいらないよ）
最後に：プログラミングの扉を開けたあなたへ
たったメモ帳とブラウザだけで、画面にボタンを置き、色を塗り、ランダムに文字を切り替える本格的なWebアプリが完成しました。
赤猫座に並んでいる「SPLIT TIMER」や「色葉」「正規表現ラボ」といったWeb道具たちも、すべてこの「HTMLで骨組みを作り、CSSで整え、JavaScriptの関数と変数で動かす」という同じ基本の積み重ねで作られています。
道具によっては、JavaScriptの他にPHPやデータベースを使ったり、もっとJavaScriptを便利に使うためのReactやNext.jsなどのフレームワークやライブラリを使って作っているものもありますが、どのプログラミング言語も根っこにある考え方は同じです。
「やりたいことを思い浮かべて、便利な関数を探し、組み合わせてみる」。
この楽しさを胸に、ぜひいろんなアイデアを形にしてみてください！