【JavaScript自作アプリ紹介】阪神タイガース背番号クイズを作ってみた！

阪神ファンなら思わず試したくなる背番号クイズを、プログラミング初心者の私がJavaScriptで作ってみました！本記事では、完成したクイズアプリの紹介と、制作中にちょっとだけ工夫した点や、つまずいたポイントをゆるく共有しています。

本格的なコード解説はありませんが、「こんなアプリも初心者に作れるんだ！」と感じていただけたら嬉しいです。

記事の最後には、私が実際に受講して役立ったUdemyの講座もご紹介しています！

▶ クイズだけを遊びたい方は
こちら（クイズ専用ページ）をご覧ください。

アプリの概要
開発の背景
JavaScriptで工夫したポイント
1. 難易度別クイズの実装方針
2. ランダム出題モードの工夫
このアプリを作れるようになる講座はこちら

アプリの概要

このクイズは、阪神タイガースの選手名が表示され、その背番号を入力して答えるWebアプリです。

モードは2種類あります。
1つは「レベル別クイズ」。難易度に応じて選手が分かれており、初心者でも楽しめるように設計されています。
もう1つは「ランダム10問クイズ」で、1問につき最大10回まで回答でき、間違えるたびに「40より小さい数字です」などのヒントが表示されます。正解までの試行回数に応じて得点が減少し、1発正解なら10点、以降1回間違えるごとに1点ずつ減点されます。

有名選手はすぐに答えられても、背番号までしっかり覚えていない選手が出てくると、意外と難しく感じることも。
野球ファンや阪神ファンにとって、知識の確認やちょっとした暇つぶしにぴったりの内容です。

開発の背景

私は阪神タイガースのファンで、選手の背番号をもっと覚えたいと思っていました。特に若手選手の背番号はあまり知らないことが多く、クイズ形式で楽しく覚えられるツールがあれば便利だと感じたのがきっかけです。

また、このアプリはプログラミングを独学で学ぶ中で、実際に手を動かしてアウトプットするための良い機会になりました。自分で考え、工夫しながら作ることで理解が深まり、学びの効果が高まったと感じています。

JavaScriptで工夫したポイント

このクイズアプリでは、ユーザーが快適に遊べるようにいくつか工夫をしました。

レベル別出題
選手ごとに難易度を設定し、選んだレベルに合わせて問題が出るようにしています。これにより、初心者から上級者まで楽しめる設計にしました。
ヒント機能
ランダムクイズでは、ユーザーの回答が正解よりも大きいか小さいかを教えて、答えを絞り込みやすくしています。これがあることで難しい問題もチャレンジしやすくなっています。
連続挑戦と得点システム
10回間違えるか正解すると次の問題に進むルールで、正解までの回数に応じて得点が変わる仕組みを取り入れました。これでゲーム性を高め、楽しみながら学べるよう工夫しています。
特殊ケースの対応
背番号「00」と「0」の判定が難しかったため、特別な条件分岐を設けて正しく処理できるようにしています。

難易度別クイズの実装方針

クイズデータにレベル属性を付ける
各選手に「レベル（難易度）」を設定しておきます。例：

const quizzes = [
  { player: '佐藤 輝明', correct: 8, level: 1 },
  { player: '伊原 陵人', correct: 18, level: 2 },
  { player: '山田 脩也', correct: 52, level: 5 },
  { player: '椎葉 剛', correct: 26, level: 6 },
];

ユーザーがレベルを選択できるUIを用意する
たとえばラジオボタンやセレクトボックスで難易度（レベル1〜6など）を選択可能にします。
選択されたレベルの問題だけ抽出する
例えば選択されたレベルが selectedLevel の場合、
```
const filteredQuizzes = quizzes.filter(q => q.level === selectedLevel);
```
抽出した問題からランダムに問題を出題する
選択されたレベルの問題は10問から15問ほどあります。これらをシャッフルしてランダムな順番で、全ての問題を順番に出題します。
解答判定と問題遷移の処理
正解なら「正解！」の表示と次の問題を表示。
不正解なら「不正解。答えは〇〇です」などのフィードバックと問題終了またはリトライの選択を行います。