JavaScriptでクイズアプリを作成する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでクイズアプリを作成する方法について現役エンジニアが解説しています。まずクイズの問題を配列に入れておきます。問題がなくなった場合には、最後に正解数を表示して終了します。今回は簡単に問題と回答を制御するアプリを作成してみます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptでクイズアプリを作成する方法について解説します。

JavaScriptでクイズアプリを作ることで、楽しくJavaScriptの学習をしていただくきっかけになれば嬉しいです。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでクイズアプリを作成する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

クイズアプリの作成に必要となる言語

クイズアプリの簡易版であれば、どの言語でも作成できるでしょう。

しかし、問題を外部(textやDB)に保存し、クライアント側には見せないような仕組みで実装する場合は、少し注意が必要です。

今回はJavaScriptでクイズアプリを作成します。

 

クイズアプリの仕組み

クイズの用意

クイズの問題を取り込んだ配列を用意します。

let Question = [
["JavaScriptで「Hello World」を正しく表示されないのはどれ?",
"1. document.write('Hello World');",
"2. document.write(Hello World);",
"3. document.write('Hello World')",
"1"],
["JavaScriptで【document.write(5 + 4);】を実行したらどうなる?",
"1. 5 + 4);",
"2. エラーになる",
"3. 9",
"3"],
["JavaScriptで余りを求めるのは?",
"1. /",
"2. %",
"3. @",
"2"]
];

中身は[問題][回答1][回答2][回答3][正解]で作成します。

 

問題の表示と回答入力

作成した配列をループで問題数分を回しながら、問題と回答を表示して、回答してもらいます。

 

正解の判断

入力された値と[正解]との比較を行い、下記の対応を行います。

  • 一致した場合 :正解のメッセージを表示し、正解数に1を加算
  • 一致しない場合:不正解のメッセージを表示

 

2と3を繰り返し

回答がされる毎に、現在の出題数を加算して、次を出題できるようにします

 

問題が最後まで完了した後の処理

正解数に合わせてメッセージを表示。

 

[PR] フロントエンドで挫折しない学習方法を動画で公開中

実際に書いてみよう

htmlサンプルコード

<!DOCTYPE html>
<meta http-equiv="content-type" charset="utf-8">
<html>
<head>
<title>JavaScriptでクイズアプリを作る</title>
</head>
<body>
<h1>クイズアプリを作ってみよう!!!</h1>
<!--クイズのの表示-->
<h2 id="_question">ここに問題が表示されます。</h2>
<!--回答-->
<ul>
<li id="_ans1">回答1</li>
<li id="_ans2">回答2</li>
<li id="_ans3">回答3</li>
</ul>
<button type="button" id="_answer_1" onclick="Answer_Check(1)">回答1</button>
<button type="button" id="_answer_2" onclick="Answer_Check(2)">回答2</button>
<button type="button" id="_answer_3" onclick="Answer_Check(3)">回答3</button>
</body>
</html>

main.js(JavaScript)サンプルコード

// 初期画面起動時
let Question = [
["JavaScriptで「Hello World」を正しく表示されないのはどれ?",
"1. document.write('Hello World');",
"2. document.write(Hello World);",
"3. document.write('Hello World')",
"1"],
["JavaScriptで【document.write(5 + 4);】を実行したらどうなる?",
"1. 5 + 4);",
"2. エラーになる",
"3. 9",
"3"],
["JavaScriptで余りを求めるのは?",
"1. /",
"2. %",
"3. @",
"2"]
];
// 初期変数定義
// 問題を表示するオブジェクトを取得する
let Q = document.getElementById('_question');
// 問題を表示するオブジェクトを取得する
let A1 = document.getElementById('_ans1');
let A2 = document.getElementById('_ans2');
let A3 = document.getElementById('_ans3');
// 正解数を保持する値
let Correct = 0;
// 現在の問題数
let Qcnt = 0;
// 問題を画面に表示する処理
function Q_Set() {
Q.textContent = Question[Qcnt][0];
A1.textContent = Question[Qcnt][1];
A2.textContent = Question[Qcnt][2];
A3.textContent = Question[Qcnt][3];
};
// 画面に表示
Q_Set();
// 回答ボタンを押したときの処理
function Answer_Check(ans) {
if(ans == Question[Qcnt][4]) {
alert("正解");
Correct++;
} else {
alert("不正解");
}
Qcnt++;
if (Qcnt == Question.length) {
Q.textContent = "問題は以上です。正解数は" + Correct + "でした。";
A1.textContent = "";
A2.textContent = "";
A3.textContent = "";
} else {
// 画面に表示
Q_Set();
}
}

実行結果

解説

初期画面起動時のlet Question には、問題文を配列で代入しています。

配列については、JavaScriptでArrayオブジェクトを使う方法を参考にしてみてください。

let Q = document.getElementById(‘_question’);では、 初期変数定義として 問題を表示するオブジェクトを取得して、変数Qに代入しています。

htmlのid要素を取得するには、JavaScriptでgetElementByIdを使う方法も参考にしてみてください。

document.getElementByIdメソッドを利用して、 _questionという名称のidを取得しています。

index.htmlで言うと次の1行になります。

<h2 id="_question">ここに問題が表示されます。</h2>

let A1 = document.getElementById(‘_ans1’);では、問題を表示するオブジェクトを取得しています。

document.getElementByIdメソッドを利用して、 _ans1という名称のidを取得しています。

index.htmlで言うと次の1行になります。

<li id="_ans1">回答1</li>

A2やA3の処理はA1の処理と同様です。

let Correct = 0;では、正解数を保持する値に0を代入して初期化しています。

let Qcnt = 0;では、現在の問題数に0を代入して初期化しています。

function Q_Set() {では、問題を画面に表示する処理を宣言しています。

Q_Set();では、Q_Set関数を実行して問題を画面に表示しています。

function Answer_Check(ans) {では、回答ボタンを押したときの関数処理を実装しています。

JavaScriptで関数を使う方法も参考にしてみてください。

Qcnt++;では、Qcnt変数に1を足し算しています。

Qcntの値は、出題した問題数になります。

if (Qcnt == Question.length) {では、出題した問題数が出題数と同じになったら、採点結果を表示しています。

正解数は、変数Correctに入っています。

 

まとめ

今回は簡単に問題と回答を制御するアプリを作成しました。

しかし、作成したアプリの仕様では問題と答えがわかってしまうので、本来は回答をサーバに送信して制御するのが望ましいです。

また、問題の答えなどを画面表示させたくない場合は、Ajaxなどの利用が必要になります。

クイズの骨格は同じになりますので、サンプルを元に改良を加えてみて下さい

 

 

この記事を監修してくれた方

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長
開発実績:金融・小売・製造業種の基幹システムから人工知能を利用した大規模Webサービスまで20年以上の開発実績。経営者目線で、開発言語にとらわれない横断的なマネジメントを行うCTO業務や、新規事業開発を行う前段階のプロトタイプ開発、事業会社非IT社員向けDXプログラミング思考研修を得意とする。
ボランティア活動:小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする岡山市クラブ講座活動を行っている。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。