2017年06月27日(火)

JavaScript入門者が初めて作る！シンプルなクイズアプリのチュートリアル

• 0
• 80
• 14
• 48

JavaScriptの構文を勉強したら、何か作ってみたくなりますよね。手軽で楽しく応用しやすい、シンプルなクイズがおすすめです。

Web開発を学んでいる人から「どうすればJavaScriptでクイズを作れますか」という質問を頻繁に受けます。新しいことを楽しみながら学んでもらうのには、クイズが適しているためです。

JavaScriptを使ったクイズのコーディングは、JavaScriptの良い勉強になります。イベントの処理方法、ユーザーインプットの取り扱い、DOM操作、フィードバックの返し方、スコアのトラック方法（たとえばクライアントサイドに保存）などを学べます。基本的なクイズができたら、ページ区切りを追加して機能を充実します。追加できる機能はこの記事の最後に取り上げます。

この記事では、JavaScriptでクイズを作るステップを説明します。Webサイトに合わせて適宜改変してください。完成形はクイズのデモで確認できます。

開始前の確認事項

始める前に前提条件をお伝えします。

• この記事のクイズはフロントエンドで完結する。つまりブラウザー内にデータが存在するので、コードを見れば答えが分かる。重要なクイズはバックエンドにデータを格納するがこの記事では解説...