JavaScriptでは何かと登場回数の多いif文。そんな必須な知識であるif文ですが、プログラムを書く際には、色々な条件やパターンを考えた上での実装が必要です。
逆にif文のコツを掴んでしまえば、さまざまなプログラムを実装できるようになります。
そこで今回は、if文を駆使して以下のようなミニクイズアプリの作り方を解説していきます。
デモ
3つの問題を用意し、すべての回答が終了したら、合計得点とメッセージを表示させてみましょう。
HTMLとCSSの準備
まずはHTMLとCSSの準備をしていきます。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
<script src="script.js"></script>
</head>
<body>
<div class="quizzes-container">
<h1>クイズ </h1>
<div class="quiz-container">
<h2>第1問</h2>
<div>
<p>枕草子の作者はだれ？</p>
</div>
<form id="quiz-1">
<input name="answer" type="radio" value="a">紫式部</input>
<input name="answer" type="radio" value="b">清少納言</input>
<input name="answer" type="radio" value="c">小野小町</input>
</form>
<button class="btn" type="button" onclick="answerQuiz1();">回答する</button>
</div>
<div class="quiz-container">
<h2>第2問</h2>
<div>
<p>国旗に5つの星がある国は？</p>
</div>
<form id="quiz-2">
<input name="answer" type="radio" value="a">中国</input>
<input name="answer" type="radio" value="b">ニュージーランド</input>
<input name="answer" type="radio" value="c">オーストラリア</input>
</form>
<button class="btn" type="button" onclick="answerQuiz2();">回答する</button>
</div>
<div class="quiz-container">
<h2>第3問</h2>
<div>
<p>世界で一番長い川は？</p>
</div>
<form id="quiz-3">
<input name="answer" type="radio" value="a">アマゾン</input>
<input name="answer" type="radio" value="b">ミシシッピ</input>
<input name="answer" type="radio" value="c">ナイル</input>
</form>
<button class="btn" type="button" onclick="answerQuiz3();">回答する</button>
</div>
<div id="score-container">
<p id="score-message"></p>
</div>
<button class="btn-score" type="button" onclick="showScore();">合計得点を見る</button>
</div>
</body>各問題に対して3つの選択肢を用意するため、ラジオボタンを3つずつ設置します。
inputタグのname属性に「answer」、type属性に「radio」、そしてvalue属性には回答を区別するために「a, b, c」の値を付与します。
また、各問題に対して「回答する」ボタンも3つ設置します。
「button class =”btn”」のonclick属性には、「answerQuiz1();」「answerQuiz2();」「answerQuiz3();」と、回答した結果を表示させるための関数と紐付けます。
さらに、回答が終了したあとに合計得点を確認するための「合計得点を見る」ボタンの用意も必要です。
「button class=”btn-score”」のonclick属性には、「showScore();」と、得点とメッセージを表示させるための関数と紐付けます。
CSS
body {
font-family: serif;
text-align: center;
}
.quizzes-container {
width: 400px;
margin: 50px auto;
}
.quiz-container {
border-bottom:1px solid black;
padding-bottom: 20px;
}
.btn {
margin-top: 20px;
font-family: serif;
background-color: white;
}
#score-container {
border: 1px solid black;
height: 50px;
}
.btn-score {
display: block;
margin: 20px auto;
font-family: serif;
background-color: white;
}CSSは詳しく解説はしませんが、好みに合わせてサイズや色を調整してください。
HTML・CSSの記述で以下のように表示されることが確認できます。
JavaScriptでミニクイズを実装
ここからはJavaScriptの実装に移ります。
全体のコード
let score = 0;
function showScore(){
const totalScore = document.getElementById('score-message');
if(score === 3) {
totalScore.innerHTML = score + "点：満点！おめでとう！"
} else if(score === 2) {
totalScore.innerHTML = score + "点：あともう一息！";
} else if(score === 1) {
totalScore.innerHTML = score + "点：まあまあ";
} else {
totalScore.innerHTML = score + "点：残念";
}
}
/**************
1問目の正解はBの清少納言
2問目の正解はAの中国
3問目の正解はCのナイル
**************/
const correct = '正解です';
const incorrect = '不正解です';
function answerQuiz1() {
const quiz_1 = document.getElementById('quiz-1');
const select = '1問目：' + quiz_1.answer.value + 'を選択しました';
if (quiz_1.answer.value == 'a') {
console.log(select);
console.log(incorrect);
// 正解はB
} else if (quiz_1.answer.value == 'b') {
score++;
console.log(select);
console.log(correct);
} else if (quiz_1.answer.value == 'c') {
console.log(select);
console.log(incorrect);
} else {
alert('1問目の答えを入力してください');
}
console.log('現在の点数：' + score);
}
function answerQuiz2(){
const quiz_2 = document.getElementById('quiz-2');
const select = '2問目：' + quiz_2.answer.value + 'を選択しました';
// 正解はA
if (quiz_2.answer.value == 'a') {
score++;
console.log(select);
console.log(correct);
} else if (quiz_2.answer.value == 'b') {
console.log(select);
console.log(incorrect);
} else if (quiz_2.answer.value == 'c') {
console.log(select);
console.log(incorrect);
} else {
alert('2問目の答えを入力してください');
}
console.log('現在の点数：' + score);
}
function answerQuiz3(){
const quiz_3 = document.getElementById('quiz-3');
const select = '3問目：' + quiz_3.answer.value + 'を選択しました';
if (quiz_3.answer.value == 'a') {
console.log(select);
console.log(incorrect);
} else if (quiz_3.answer.value == 'b') {
console.log(select);
console.log(incorrect);
// 正解はC
} else if (quiz_3.answer.value == 'c') {
score++;
console.log(select);
console.log(correct);
} else {
alert('3問目の答えを入力してください');
}
console.log('現在の点数：' + score);
}まずは、JavaScriptでの実装のポイントをおさえていきましょう。
- 点数をカウントする：score変数
- 獲得した合計得点によって別々のメッセージを表示させる：showScore関数
- 回答が正解であれば点数を加算させる：answerQuiz1, 2, 3関数
一見長めのコードに見えますが、やっていることは至ってシンプルです。
それでは上から順番にコードを解説していきます。
点数をカウントする
score変数を作り、値を「0」に設定します。
let score = 0;問題に正解したら点数を加算するためにこの変数を使用します。
獲得した得点によって別々のメッセージを表示させる
獲得した合計得点を表示するためと、点数によって表示させるメッセージを分けるための関数を記述します。
function showScore(){
const totalScore = document.getElementById('score-message');
if(score === 3) {
totalScore.innerHTML = score + "点：満点！おめでとう！"
} else if(score === 2) {
totalScore.innerHTML = score + "点：あともう一息！";
} else if(score === 1) {
totalScore.innerHTML = score + "点：まあまあ";
} else {
totalScore.innerHTML = score + "点：残念";
}
}showScore関数では、獲得した点数が「3」「2」「1」「その他（0）」の場合に、その点数と、表示させたいメッセージを用意しています。獲得した点数を表示するためには、先ほど記述した「score変数」を使います。
最終的には以下の4つのメッセージパターンが出来上がります。
0点獲得時（全問不正解）
1点獲得時
2点獲得時
3点獲得時（全問正解）
回答が正解であれば点数を加算させる
このパートが今回のミニクイズのメイン部分になります。
ここでは、3つの問題用にそれぞれ関数を用意し、正解であれば点数を加算するための記述を行なっていきます。
また、「①選んだ回答」「②正解/不正解の結果」「③現在の点数」もコンソールで確認できるようにしてみましょう。
const correct = '正解です';
const incorrect = '不正解です';
function answerQuiz1() {
//問題1の処理をここに記述
const quiz_1 = document.getElementById('quiz-1');
const select = '1問目：' + quiz_1.answer.value + 'を選択しました';
if (quiz_1.answer.value == 'a') {
console.log(select);
console.log(incorrect);
// 正解はB
} else if (quiz_1.answer.value == 'b') {
score++;
console.log(select);
console.log(correct);
} else if (quiz_1.answer.value == 'c') {
console.log(select);
console.log(incorrect);
} else {
alert('1問目の答えを入力してください');
}
console.log('現在の点数：' + score);
}
function answerQuiz2(){
//問題2の処理をここに記述
const quiz_2 = document.getElementById('quiz-2');
const select = '2問目：' + quiz_2.answer.value + 'を選択しました';
// 正解はA
if (quiz_2.answer.value == 'a') {
score++;
console.log(select);
console.log(correct);
} else if (quiz_2.answer.value == 'b') {
console.log(select);
console.log(incorrect);
} else if (quiz_2.answer.value == 'c') {
console.log(select);
console.log(incorrect);
} else {
alert('2問目の答えを入力してください');
}
console.log('現在の点数：' + score);
}
function answerQuiz3(){
//問題3の処理をここに記述
const quiz_3 = document.getElementById('quiz-3');
const select = '3問目：' + quiz_3.answer.value + 'を選択しました';
if (quiz_3.answer.value == 'a') {
console.log(select);
console.log(incorrect);
} else if (quiz_3.answer.value == 'b') {
console.log(select);
console.log(incorrect);
// 正解はC
} else if (quiz_3.answer.value == 'c') {
score++;
console.log(select);
console.log(correct);
} else {
alert('3問目の答えを入力してください');
}
console.log('現在の点数：' + score);
}まずは、正解か不正解か表示するための文字列を用意します。
const correct = '正解です';
const incorrect = '不正解です';つぎに、answerQuiz1関数を見ていきましょう。
function answerQuiz1() {
//問題1の処理をここに記述
const quiz_1 = document.getElementById('quiz-1');
const select = '1問目：' + quiz_1.answer.value + 'を選択しました';
if (quiz_1.answer.value == 'a') {
console.log(select);
console.log(incorrect);
// 正解はB
} else if (quiz_1.answer.value == 'b') {
score++;
console.log(select);
console.log(correct);
} else if (quiz_1.answer.value == 'c') {
console.log(select);
console.log(incorrect);
} else {
alert('1問目の答えを入力してください');
}
console.log('現在の点数：' + score);
}関数の冒頭では以下の2つの定数を用意しています。
- DOM操作でformタグを取得する：quiz_1
- ユーザーがどの回答を選択したか表示させる：select
const quiz_1 = document.getElementById('quiz-1');
const select = '1問目：' + quiz_1.answer.value + 'を選択しました';「quiz_1.answer.value」は、formタグで囲まれているラジオボタンのname属性とvalue属性を取得しています。この記述により、ユーザーがどの回答を選択したか、すなわち、どのラジオボタンを選択したか、区別できるようになります。
さいごに、if文です。
回答には3つの選択肢があるように、if文には、「a, b, cを選んだ場合、または何も選ばなかった場合」と、4つの条件を用意します。
if (quiz_1.answer.value == 'a') {
console.log(select);
console.log(incorrect);
// 正解はB
} else if (quiz_1.answer.value == 'b') {
score++;
console.log(select);
console.log(correct);
} else if (quiz_1.answer.value == 'c') {
console.log(select);
console.log(incorrect);
} else {
alert('1問目の答えを入力してください');
}
console.log('現在の点数：' + score); 条件にかかわらず、どの回答を選択したのか分かるように、「console.log(select);」を記述します。
何も選択しなかった場合には、「alert(‘1問目の答えを入力してください’);」を記述しておきましょう。
第1問の正解はBとなるため、2番目の条件の中で（「else if (quiz_1.answer.value == ‘b’)」）、「console.log(correct);」と記述します。
また、正解したので、「score++」で点数を加算することも必要です。
その他の条件では、不正解になるため、「console.log(iccorrect);」とします。
if文の最下部にある「console.log(‘現在の点数：’ + score);」は、回答を終えたあとに現在の点数を表示するための役割があります。
では、選択した結果がどうコンソールに現れるか確認しましょう。
不正解だった場合
正解だった場合
何も回答しなかった場合
これでうまく実装ができました。
answerQuiz2と3も同じようできたら完了です。
まとめ
今回は、if文をメインに使いましたが、これだけでも簡単なミニクイズが作れてしまうことが分かりました。
また、if文をswitch文で書き換えると、自分にとってどちらの方が使いやすいか知ることもできます。
ぜひこれを機にオリジナルのクイズを実装してみてください。
JavaScriptの基本をおさらい
