はじめに
JavaScriptは、Web開発において欠かせないプログラミング言語です。
しかし、初心者にとっては、その構文やルールが理解しづらいことがあります。
JavaScriptを学ぶ際には、楽しく学ぶことが大切です。
そこで今回は、初心者でも簡単に作れるJavaScriptクイズゲームの作り方をご紹介します。
このゲームを作ることで、JavaScriptの基本的な概念を楽しく学ぶことができます。
プログラミングの基礎を理解したい人には、ぜひおすすめしたい内容となっています。
この記事では、JavaScriptの基礎的な知識を持った方でも理解しやすいように、詳細な手順を丁寧に解説します。
初心者の方でも簡単に作れるように、コードの解説や実際の作り方をわかりやすく説明しています。
この記事を読むことで、JavaScriptを楽しく学ぶことができるだけでなく、自分でオリジナルのゲームを作成することもできます。
Web開発に興味がある人、またはプログラミング初心者の方には、必見の内容となっています。ぜひ、挑戦してみてください！
本記事の対象者
- JavaScriptをこれから学習し始める初学者
- 具体的なもの作りながら楽しくJavaScriptを学びたい方
- JavaScriptでどのようなことができるのか興味がある方
目標成果物
全部で10問出題するクイズゲームです。
最後に正解数を表示させます。
ソースコード
以下にリンクを張っておきます。
JavaScriptで何ができるのか？
JavaScriptはブラウザで動作するプログラミング言語です。
JavaScriptを使うとHTMLやCSSを操作し、サイトに動きをつけることができます。
具体的には以下のようなものが作れます。
- Webサイト制作ではアニメーションなどの動きをつけることができる
- ブラウザ上で動くゲームを開発できる
- Webアプリケーションを開発できる
このようにJavaScriptは幅広い分野で活躍しています。
Webサイト制作の場合はスクロール時にある要素をふわっと表示させたり、ボタンをクリックするとある場所まで自動スクロールしたりなど様々な動きをつけることができます。
また、動きをつけることができるのでブラウザ上で動作するゲームを開発することもできます。例えば、テトリスやぷよぷよのようなものからスーパーマリオのようなアクションゲーム、RPGまで作れます。
また、Webアプリケーション開発もでき、メモ帳アプリやToDoリストアプリ、家計簿アプリなどなど様々なアプリを開発することができます。
本記事ではこれらの本格的な開発に入る前の段階として、まずはJavaScriptの基本的な使い方を実際にクイズゲームを作りながら解説していこうと思います。
それでは、早速見ていきましょう！
ディレクトリ構成
本プロジェクトは以下のようなディレクトリ構成になっています。
QuizJS |_index.html |_style.css |_main.js |
機能設計
今回制作するクイズゲームは漫画・アニメ系の問題を出題するゲームです。
以下のような機能を備えたゲームを制作します。
- 全部で10問出題する
- 1ページに1問ずつ出題し、回答したら正解・不正解を表示して次のページに切り替わる
- 最後に何問正解できたかを表示する
HTML作成
まずはHTMLを作成していきます。
VSCodeの方はhtml:5と入力してEnterを押すと雛形が作成されます。
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QuizJS</title></head><body></body></html> |
title要素を「QuizJS」としておいてください。
次にCSS外部ファイルを読み込みます。
titleタグの上に<link rel=”stylesheet” href=”style.css”>を追加してください。
<head> ... <link rel="stylesheet" href="style.css"> <title>QuizJS</title></head> |
次にJavaScript外部ファイルを読み込みます。
</body>の直上に<script src=”main.js”></script>を追加してください。
<body> ... <script src="main.js"></script></body> |
ひとまずこれでセットアップは完了です。
次にbody要素を記述してきましょう。
<body> <div class="card"> <h2 id="question"></h2> <div class="choice"> <button></button> <button></button> <button></button> <button></button> </div> </div> <script src="main.js"></script></body> |
なんと今回のHTMLはこれで完了です。
文字が何も入っていないではないかと思われるかもしれません。
今回は文字も含めてJavaScriptによって生成するので、文字を入れる必要はないのです。
JavaScriptはこのようにHTMLやCSSを生成することもできます。
素晴らしいですね！
ただし、これからCSSを記述していくのでデザインが確認しやすいようにサンプルの文字を入れておきましょう。
<body> <div class="card"> <h2 id="question">Q1. 漫画「ナルト」に登場した虫を使う戦闘スタイルの忍び一族の呼称は何？</h2> <div class="choice"> <button>うちは一族</button> <button>犬塚一族</button> <button>油女一族</button> <button>日向一族</button> </div> </div> <script src="main.js"></script> </body>
CSS作成
それでは、CSSを記述してきます。
まずは初期化をしておきましょう。
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif;} |
次に、カード要素や選択肢のデザインを作っていきます。
.card { display: flex; flex-direction: column; align-items: center; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); width: 60vw; height: 50vh; margin: 100px auto; padding: 50px;}.card h2 { font-size: 1.5em;}.card .choice { margin-top: 100px; display: flex; justify-content: space-around; width: 100%;}.card .choice button { border: 1px solid rgba(0, 0, 0); padding: 10px 20px; cursor: pointer; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); outline: none; background-color: #fff; width: 150px;} |
今回、CSSが主題ではないので簡素なものにしてます。ご了承ください。
JavaScript作成
さて、ここからがこの記事の本題です。
ここからはJavaScriptによって具体的なクイズの機能を作っていきます。
main.jsファイルを開いておいてください。
クイズゲームの機能の作り方は様々ありますが、今回は以下のようなアルゴリズムで実装してきます。
- 出題するクイズに関する情報（問題、選択肢、答え）を配列にまとめておく
- 問題や選択肢をJavaScriptでHTMLに挿入する（問題のセットアップ）
- 選択肢をクリックすると、正解・不正解を判定しスコアを加算後に次の問題に行く
- 全問答えたら、正解数を表示する
出題するクイズを配列にまとめる
上記に従って、まずは問題情報を配列にまとめていきます。
ここは作業になるのでコードだけ書いておきます。
コピペで使っても大丈夫です。
const quiz = [ { question: 'Q1. 漫画「ナルト」に登場した虫を使う戦闘スタイルの忍び一族の呼称は何？', choices: [ 'うちは一族', '犬塚一族', '油女一族', '日向一族' ], correct: '油女一族' }, { question: 'Q2. アニメ「ぼっち・ざ・ろっく」で主人公が最初に友達になった人物は誰？', choices: [ '山田リョウ', '伊地知虹夏', '喜多郁代', '日向恵恋奈' ], correct: '伊地知虹夏' }, { question: 'Q3. アニメ「ぼっち・ざ・ろっく」で主人公のバンドが活動していた下北沢のライブハウス名は何？', choices: [ 'STARMY（スターミー）', 'STARDY（スターディー）', 'STARRY（スターリー）', 'STARBY（スタービー）' ], correct: 'STARRY（スターリー）' }, { question: 'Q4. 漫画「ナルト」でロックリーやマイトガイが使用する木の葉流体術の奥義は何？', choices: [ '八門遁甲', '木の葉回旋', '八卦六十四掌', '柔拳' ], correct: '八門遁甲' }, { question: 'Q5. 漫画「僕のヒーローアカデミア」でオール・フォー・ワンが使う個性はどれ？', choices: [ '純粋な身体能力の強化', '黒い鞭状のエネルギーを放出し遠くの物体を掴み取る', '自身の危険を感知する', '個性の強奪・付与' ], correct: '個性の強奪・付与' }, { question: 'Q6. 漫画「僕のヒーローアカデミア」でワン・フォー・オール5代目継承者の個性は？', choices: [ '危機感知', '黒鞭', 'ワープゲート', 'ヘルフレイム' ], correct: '黒鞭' }, { question: 'Q7. 漫画「ワンピース」で登場するキャラクター、バルトロメオは何の実の能力者？', choices: [ 'スベスベの実', 'バクバクの実', 'バリバリの実', 'スパスパの実' ], correct: 'バリバリの実' }, { question: 'Q8. 漫画「ワンピース」で登場するキャラクター、ニコ・ロビンがウォーターセブンで麦わらの一味を裏切った理由は？', choices: [ '麦わらの一味を世界政府から守るため', '麦わらの一味に付き合いきれなくなったため', '世界政府に脅されたため', '世界政府から報酬を得るため' ], correct: '麦わらの一味を世界政府から守るため' }, { question: 'Q9. 漫画「呪術廻戦」で登場するキャラクター、五条悟の術式「無下限呪術」の能力は？', choices: [ '相手の五感全てを奪う', '無限を現実に持ってくる', '平衡感覚を逆にする', '純粋な身体能力の強化' ], correct: '無限を現実に持ってくる' }, { question: 'Q10. 漫画「呪術廻戦」で登場するキャラクター、三輪霞の年齢は？', choices: [ '16歳', '17歳', '18歳', '19歳' ], correct: '17歳' },] |
constというのは定数を定義する際に使われるもので、今回はquizという定数に問題の情報を格納しています。
問題情報というのは問題文（question）、選択肢（choices）、答え（correct）の3つです。
問題と選択肢をHTMLに挿入する
次に、最初に表示する問題や選択肢をHTMLに挿入してきます。
const quizLength = quiz.length;let quizIndex = 0;let score = 0;const button = document.getElementsByTagName('button');const buttonLength = button.length;const setupQuiz = () => { document.getElementById('question').textContent = quiz[quizIndex].question; let buttonIndex = 0; while(buttonIndex < buttonLength) { button[buttonIndex].textContent = quiz[quizIndex].choices[buttonIndex]; buttonIndex++; }}setupQuiz(); |
一つ一つ解説してきます。
const quizLength = quiz.length;let quizIndex = 0;let score = 0; |
まず、最初のconst quizLengthは問題の数を表しています。今回は10問なので10になっています。
lengthというメソッドは配列の中の要素の数を調べることができます。
次に、quizIndexとscoreを0にしておきます。
次に以下のコード。
const button = document.getElementsByTagName('button');const buttonLength = button.length; |
ここでは何をしているのかというと、buttonタグを取得してきてその数をカウントしています。今回の場合だと4ですね。
getElementsByTagNameというメソッドは指定したタグ名の要素を取得してくることができます。
次に問題をセットアップする関数を定義します。
const setupQuiz = () => { document.getElementById('question').textContent = quiz[quizIndex].question; let buttonIndex = 0; while(buttonIndex < buttonLength) { button[buttonIndex].textContent = quiz[quizIndex].choices[buttonIndex]; buttonIndex++; }} |
このsetupQuiz関数で問題情報をHTMLに挿入しています。
getElementByIdというメソッドはHTML要素のid名に一致する要素を取得できます。
従って、document.getElementById(‘question’)は「question」というid名のHTML要素を取得しています。
その後のtextContentというのは取得した要素に文字を挿入するメソッドです。
挿入する文字は先に問題情報を格納しておいたquizという配列から取り出しています。
quizIndexには先ほど0を入れていたので、quiz[0].questionとなります。
これはquiz配列の最初の要素、つまり1問目の問題文になります。
まとめると、
document.getElementById('question').textContent = quiz[quizIndex].question; |
この一文で行っていることは、HTMLのid=”question”の要素（問題文）にあらかじめセットしておいたquiz配列の1問目の問題文の文字を挿入している、ということです。
続いて、以下の部分。
let buttonIndex = 0;while(buttonIndex < buttonLength) { button[buttonIndex].textContent = quiz[quizIndex].choices[buttonIndex]; buttonIndex++;} |
while文は引数がtrueであり続ける限り処理をループするという意味になります。
buttonIndexを0にセットしておき、button要素にquiz配列でセットしておいた選択肢の文字を挿入しています。
ループが回るたびにbuttonIndexを+1し、button要素の数分ループを回しています。
こうすることで、全てのbutton要素に選択肢の文字を挿入しています。
このように繰り返し処理の回数をカウントする変数をカウンタと呼びます。カウンタがあることによって繰り返し回数を制御しているわけです。
ただ、これでは関数をただ定義しただけなので、最後にこちらの関数を実行しておきます。
setupQuiz(); |
選択肢をクリックすると、正解・不正解を判定しスコアを加算後に次の問題に行く
次に、選択肢をクリックしたときの挙動を記述していきます。
const clickHandler = (e) => { if (quiz[quizIndex].correct === e.target.textContent) { window.alert("正解！"); score++; } else { window.alert("不正解！"); } quizIndex++;}let handlerIndex = 0;while(handlerIndex < buttonLength) { button[handlerIndex].addEventListener('click', (e) => { clickHandler(e); }); handlerIndex++;} |
まずはclickHandlerという関数を定義しておきます。
quiz[quizIndex].correctはあらかじめセットしておいた問題の答えを表しています。
e.targetというのはクリックされたbutton要素を表しており、e.target.textContentでクリックされたbutton要素の文字を取得します。
if (quiz[quizIndex].correct === e.target.textContent) { if (quiz[quizIndex].correct === e.target.textContent) { window.alert("正解！"); score++; } else { window.alert("不正解！"); } quizIndex++;} |
上記の条件分岐はあらかじめセットしておいた答えとクリックされたbutton要素の文字が等しければ、という意味になります。
window.alert();関数はブラウザにポップアップで文字を出すJavaScriptの関数です。
正解していれば「正解！」と出し、不正解の場合は「不正解！」と出しています。
そして最後にどちらであっても次の問題に進めるようにquizIndex++;でquizIndexに+1することで次の問題を出題しています。
こちらもまだ関数を定義しただけなので、次にこれをクリック時に実行させます。
let handlerIndex = 0;while(handlerIndex < buttonLength) { button[handlerIndex].addEventListener('click', (e) => { clickHandler(e);});handlerIndex++;} |
まずはカウンタのhandlerIndexを0にセットしておきます。
addEventListenerというのはあるイベントが発生した時だけ関数を実行させる役割があります。
今回の場合はクリックされた時に先ほど定義したclickHandler関数を実行するという処理になります。
このクリックイベントを発火させる処理を全ボタン分実装するために繰り返し処理でループさせているわけです。
最後に、全問答え終わったかどうかを判定し、終わっていた場合は正解数を表示する処理を追加します。
全問答えたら、正解数を表示する
clickHandler関数に戻りましょう。
次のコードを追加します。
const clickHandler = (e) => { ... quizIndex++; if (quizIndex < quizLength) { setupQuiz(); } else { window.alert('終了！あなたの正解数は' + score + '/' + quizLength + 'です！'); }} |
quizIndexは今何問目なのかを示しています。
quizLengthは全問題数を表しているので、まだ全問答え終わっていない場合はsetupQuiz関数を実行して次の問題に行きます。
直前でquizIndexに+1をしているので、その後にsetupQuiz関数を実行すると次の問題が表示されます。
もし全問答え終わっていたら、正解数をwindow.alertで表示しています。
JavaScriptの場合は文字列を連結する場合、+記号を使って連結させる点に注意しましょう。
はい！これでクイズゲームが完成しました！
早速動かしてゲームを楽しんでみましょう！
最後に
JavaScriptクイズゲームの作り方をご紹介しましたが、これはあくまで基礎的な部分に留まります。
JavaScriptは非常に柔軟で、多様な機能を持つプログラミング言語です。
今回紹介したゲームをベースに、より高度な機能やアイデアを加えることで、オリジナルのゲームを作成することができます。
また、JavaScriptだけでなく、Web開発全般に興味を持っている方は、さまざまな技術やツールを学ぶことで、より魅力的で高機能なWebサイトを作成することができます。
自分のスキルアップや、自分が作りたいWebサイトのイメージに合わせて、必要な知識や技術を学んでいきましょう。
最後に、JavaScriptクイズゲームの作り方を通じて、プログラミング初心者の方でも楽しく学ぶことができることをお伝えしたいと思います。
JavaScriptは、Web開発の基本となる言語であり、今後ますます重要性が高まっていくことでしょう。
ぜひ、この機会にJavaScriptの基礎を学んで、自分だけのオリジナルなゲームを作ってみましょう！
コメント