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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

監修してくれたメンター

nakamoto

アジマッチ有限会社代表取締役社長。書籍化歓迎。対応業務:PHP(Laravel)、機械学習、Vue.js、LAMP・AWS、越境EC、CTO、エンジニア採用、CTO、経営者の不安解決コンサルティング。

JavaScriptでクイズアプリを作成する方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

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

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

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

目次

1時間でできる無料体験!

そもそも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を繰り返し

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

 

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

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

 

[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に入っています。

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

まとめ

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

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

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

クイズの骨格は同じですので、サンプルを元に改良を加えてみてください。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか?

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する