クイズゲームのアプリケーション作成について⑤

終了画面の作成

ここでは➁のプレイ画面にゲーム終了画面を表示するためのボタン「ゲームを終わる」ボタンを設けます。クリックすると➂の「クイズゲームを終了します」というテキストが表示されるようにします。そして「開始画面に戻る」ボタンを作成し、クリックすると➀に戻るようにします。

➀

➁

➂

赤字が追記、修正した箇所です。

quiz.js

class quiz { constructor(rootElm){ this.rootElm = rootElm; }	rootElmにアプリケーション全体の親要素が反映される想定にしてます。this.rootElmではクラスの各メソッドからrootElmを参照できるようにプロパティに代入してます。
async init(){ await this.fetchQuizData(); this.displayStartView(); }	fetchQuizDataというメソッド、displayStartViewメソッドを呼び出しています。
async fetchQuizData(){ try{ const response = await fetch(‘quiz.json’); this.quizData = await response.json(); } catch(e){ this.rootElm.innerText = ‘クイズ問題の読み込みに失敗’; console.log(e) } } // fetchQuizData	エラー処理を入れるためtry,catchで例外処理を入れています。通信ができない場合などエラーが発生した時には、this.rootElm.innerTextでブラウザ上にエラー表示を行い、デバックのために console.log(e)でエラー情報を出力させます。
displayStartView(){ const levelStrs = Object.keys(this.quizData); const optionStrs = []; for (let i =0; levelStrs.length >i; i++){ optionStrs.push(`<option value=”${levelStrs[i]}” name=”level”>難易度${i + 1 }</option>`); } const html =` <select class=”levelSelector”> ${optionStrs.join(”)} </select> <button class=”startBtn”>START</button> `; const parentElm = document.createElement(‘div’); parentElm.innerHTML = html const startBtnElm = parentElm.querySelector(‘.startBtn’); startBtnElm.addEventListener(‘click’, () =>{ this.displayQuestionView(); }); this.replaceView(parentElm) } //displayStartView	STARTボタンをクリックした時の処理についてです。プレイ画面となるHTMLを作成し、rootElmの中身をinnerHTMLで空にした上で反映しています。displayStartViewメソッドは、呼び出すと開始画面を表示するもの。 ここではquizDataから必要な情報を取得し、セレクトボックスとなるHTMLを構築した後、画面に表示しています。 セレクトボックスのバリューに設定する情報を作成します。 実装としてはObject.keyメソッドにより、quizDataのキーを配列として取り出しています。 次にlevelStrsの値からoptionタグの情報を作成しています。 optionタグの情報を配列で作成してからjoinで処理します。
displayQuestionView(){ const html = ` <p>ゲームを開始します</p> <button class=”retireBtn”>ゲームを終わる</button> `; const parentElm = document.createElement(‘div’); parentElm.className =’question’; parentElm.innerHTML = html; const retireBtnElm = parentElm.querySelector(‘.retireBtn’); retireBtnElm.addEventListener(‘click’, () =>{ this.displayResultView(); }); this.replaceView(parentElm); } //displayQuestionView	プレイ画面のHTMLに「ゲームを終わる」ボタンを追加してます。 そして追加したボタンのクリック時に終了画面に移る処理を設定してます。これは仮ボタンなので後ほど削除します。
displayResultView() { const html = ` <p>クイズゲームを終了します</p> <button class=”resetBtn”>開始画面に戻る</button> `; const parentElm = document.createElement(‘div’); parentElm.className = ‘results’; parentElm.innerHTML = html; const resetBtnElm = parentElm.querySelector(‘.resetBtn’); resetBtnElm.addEventListener(‘click’, () => { this.displayStartView(); }); this.replaceView(parentElm); } //displayResultView	終了画面を作成するメソッドです。「開始画面に戻る」というボタンをクリックすると再び開始画面に戻るようにします。
replaceView(elm){ this.rootElm.innerHTML = ”; this.rootElm.appendChild(elm); } } // class quiz	各画面が切り替わる際には「今、表示している内容を全て消して、新しい要素をセットする」という処理が共通に発生するので、replaceViewというメソッドを作成しています。
new quiz(document.getElementById(‘app’)).init();	newでの呼び出し時に要素情報（rootElm）を引数として渡しています。initをインスタンス化して呼び出しています。

それでは改めて、「ブラウザ以外でのJavaScriptの実行」をしていきましょう。

ターミナルから「http-server」コマンドを実行

そうすると以下のようにサーバーアプリケーションの情報がターミナルに表示されます。

この表示されているどちらかの情報のURLをブラウザのアドレスバーにコピペしてみましょう。そしてquizフォルダからQuizGame.htmlファイルを選択すると➀の画面が表示されます。クリックしていくと各画面に移行していきます。

➀

➁

➂

お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。

レベルアップにはプロの学びを。