JavaScriptでクイズアプリを作成する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでクイズアプリを作成する方法について現役エンジニアが解説しています。まずクイズの問題を配列に入れておきます。問題がなくなった場合には、最後に正解数を表示して終了します。今回は簡単に問題と回答を制御するアプリを作成してみます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptでクイズアプリを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
JavaScriptでクイズアプリを作ることで、楽しくJavaScriptの学習をしていただくきっかけになれば嬉しいです。
実際のコードをもとに解説していきますので、理解を深めていきましょう。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、あわせてご覧ください。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、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を繰り返し
回答がされるごとに、現在の出題数を加算して、次を出題できるようにします。
問題が最後まで完了した後の処理
正解数に合わせてメッセージを表示します。
実際に書いてみよう
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">回答１</li>
<li id="_ans2">回答２</li>
<li id="_ans3">回答３</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">回答１</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などの利用が必要になります。
クイズの骨格は同じですので、サンプルを元に改良を加えてみてください。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
