2025年12月15日
はじめに
冬休みにJavaScriptでミニゲームを作ってみませんか？ゲームを作ることで、プログラミングの基礎（変数・条件分岐・関数・DOM操作）が自然と身につきます。
この記事では、おみくじ → カウンター → クイズの3段階で、少しずつ難しくなるミニゲームの作り方をコード例付きで紹介します。冬休みは2週間ほどあるので、1日1〜2時間取り組めば3つとも完成できます。プログラミング初心者でも大丈夫です。コードをコピーして動かすところから始めて、少しずつ自分なりにカスタマイズしていきましょう。
レベル1：おみくじアプリ
ボタンを押すとランダムに「大吉」「中吉」「小吉」などが表示されるアプリです。
学べること：配列、Math.random()、textContent、addEventListener
HTMLの準備
<h1>おみくじ</h1>
<p id="result">ここに結果が出ます</p>
<button id="omikuji-btn">引く！</button>JavaScriptのコード
const results = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"];
const btn = document.getElementById("omikuji-btn");
const result = document.getElementById("result");
btn.addEventListener("click", function() {
const index = Math.floor(Math.random() * results.length);
result.textContent = results[index];
});ポイント：Math.random() は0〜1の乱数を返します。Math.floor() で小数点以下を切り捨てて、配列のインデックスとして使います。
このコードの流れを整理すると：①配列から結果の候補を用意する → ②ボタンのクリックを検知する → ③ランダムな数字を生成する → ④配列から結果を取り出して表示する、という4ステップです。プログラミングは「やりたいことを小さなステップに分解する」ことが大切です。
🔥 おみくじチャレンジで実際に作ってみましょう。
💡 カスタマイズのアイデア：
- 結果に応じて文字の色を変える（大吉なら赤、凶なら青など）
- 結果が表示されるときにアニメーションを追加する
- 「今日のラッキーカラー」も一緒に表示する
レベル2：カウンターアプリ
「+」「-」ボタンで数字が増減するアプリです。リセットボタンも付けます。
学べること：変数の更新、複数のイベントリスナー
JavaScriptのコード
let count = 0;
const display = document.getElementById("count");
const plusBtn = document.getElementById("plus");
const minusBtn = document.getElementById("minus");
const resetBtn = document.getElementById("reset");
plusBtn.addEventListener("click", function() {
count++;
display.textContent = count;
});
minusBtn.addEventListener("click", function() {
count--;
display.textContent = count;
});
resetBtn.addEventListener("click", function() {
count = 0;
display.textContent = count;
});ポイント：count++ は count = count + 1 の省略形です。変数を更新したら、必ず画面の表示も更新しましょう。
💡 発展アイデア：
- カウントが10を超えたら色を変える
- マイナスにならないようにする（0以下にしない）
- カウントの履歴を配列に保存して表示する
🔥 カウンターチャレンジで実践してみましょう。
レベル3：クイズアプリ
問題を表示して、選択肢をクリックすると正解・不正解が判定されるアプリです。
学べること：配列のループ、オブジェクト、関数、DOM操作の応用
JavaScriptのコード
const questions = [
{ q: "HTMLは何の略？", a: ["HyperText Markup Language", "High Tech ML", "Home Tool ML"], correct: 0 },
{ q: "CSSは何の略？", a: ["Cascading Style Sheets", "Computer Style System", "Creative Site Sheets"], correct: 0 },
];
let score = 0;
let current = 0;
function showQuestion() {
const q = questions[current];
document.getElementById("question").textContent = q.q;
const opts = document.getElementById("options");
opts.innerHTML = "";
q.a.forEach(function(text, i) {
const btn = document.createElement("button");
btn.textContent = text;
btn.addEventListener("click", function() {
if (i === q.correct) score++;
current++;
if (current < questions.length) {
showQuestion();
} else {
document.getElementById("question").textContent =
score + "/" + questions.length + " 正解！";
opts.innerHTML = "";
}
});
opts.appendChild(btn);
});
}
showQuestion();ポイント：問題データを配列に入れておくと、問題を追加するのが簡単です。createElement と appendChild で動的にボタンを生成しています。
🔥 クイズアプリチャレンジで挑戦してみましょう。
よくある間違いと対処法
- getElementByIdのスペルミス：大文字小文字を間違えると要素が取得できません。「getElementById」のBとIが大文字であることに注意しましょう。
- scriptタグの位置：HTMLの要素より先にJavaScriptが実行されると、要素が見つからずエラーになります。scriptタグは
</body>の直前に書くか、defer属性をつけましょう。 - 配列のインデックスが範囲外：
Math.random() * results.lengthのように配列の長さを使えば、範囲外アクセスを防げます。 - イベントリスナーが動かない：ボタンのidがHTMLとJavaScriptで一致しているか確認しましょう。スペルが1文字でも違うと動きません。
- 変数の初期化忘れ：カウンターやスコアの変数は必ず初期値（0など）を設定してから使いましょう。
📖 エラー処理入門でデバッグ方法を学べます。
ゲーム制作のコツ
- まず動くものを作る — 見た目は後から整える
- console.logで確認 — 変数の中身を常にチェック（開発者ツールの使い方）
- 少しずつ機能を追加 — 一度に全部作ろうとしない
- エラーが出たら — エラー辞典で原因を調べる
📖 詳しくはJavaScriptとは？初心者向け解説で解説しています。
発展課題
各レベルの「もっとやってみよう」チャレンジです。
- おみくじの拡張：結果に応じて背景色を変える、アニメーションを追加する
- カウンターの拡張：上限・下限を設定する、カウント履歴を表示する
- クイズの拡張：問題数を増やす、タイマーを追加する、ハイスコアをlocalStorageに保存する
🔗 DOM操作・イベント処理・条件分岐・Math.random()・夏休みのゲーム制作も参考にしてください。
まとめ
- ✅ おみくじ → カウンター → クイズの順に挑戦
- ✅ ゲーム制作でJS基礎（変数・条件分岐・関数・DOM）が身につく
- ✅ まず動くものを作り、少しずつ機能を追加する
- ✅ console.logとエラー辞典を活用する
ゲーム制作の手順を詳しく解説
ミニゲームを作るときの考え方を、ステップごとに解説します。この手順はどんなゲームにも応用できます。
- 何を作るか決める：「おみくじ」「クイズ」「じゃんけん」など、シンプルなものから始めましょう。最初から複雑なゲームを作ろうとすると挫折します。
- HTMLで画面を作る：ボタン、テキスト表示エリア、入力欄など、必要な要素を配置します。見た目は後から整えるので、まずは機能に必要な要素だけ置きましょう。
- JavaScriptで動きをつける：ボタンをクリックしたら何が起きるか、結果をどこに表示するかをプログラムします。
- テストする：実際に動かして、期待通りに動くか確認します。console.logで変数の中身を確認しながら進めましょう。
- CSSで見た目を整える：動作が確認できたら、色やフォント、余白を調整して見た目を良くします。
この「機能→見た目」の順番が大切です。見た目から作り始めると、動かないコードに時間を取られてしまいます。
カスタマイズ例
基本のゲームが完成したら、以下のカスタマイズに挑戦してみましょう。
1. 効果音をつける
ボタンを押したときに効果音を鳴らすと、ゲームらしさがアップします。new Audio('sound.mp3').play() で簡単に再生できます。
2. スコアをlocalStorageに保存する
ブラウザを閉じてもスコアが残るようにするには、localStorage.setItem('score', score) で保存し、次回起動時に localStorage.getItem('score') で読み込みます。
3. タイマーを追加する
setInterval を使って制限時間を設けると、ゲームに緊張感が生まれます。残り時間を画面に表示して、0になったらゲームオーバーにしましょう。
よくある質問（FAQ）
Q. プログラミング初心者でもゲームは作れる？
はい、作れます。この記事で紹介したおみくじアプリなら、JavaScriptの基礎（変数・配列・関数・イベント）を学んだ直後に作れます。まずは一番簡単なおみくじから始めて、少しずつ難しいものに挑戦しましょう。
Q. エラーが出て動かないときは？
開発者ツール（F12キー）のConsoleタブを確認しましょう。赤い文字でエラーメッセージが表示されています。エラーメッセージをそのままGoogle検索すると、解決策が見つかることが多いです。
Q. 完成したゲームを公開するには？
GitHub Pagesを使えば、無料でインターネットに公開できます。友達にURLを共有して遊んでもらいましょう。フィードバックをもらうと、さらに改善のアイデアが生まれます。作品を公開する経験は、ポートフォリオとしても活用できます。