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

プレイ画面の作成

クイズ問題前のプレイが始まる表示を作成してみましょう。クリックするとテキストが表示されるようにします。

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

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.rootElm.appendChild(parentElm) } //displayStartView	displayStartViewメソッドは、呼び出すと開始画面を表示するもの。 ここではquizDataから必要な情報を取得し、セレクトボックスとなるHTMLを構築した後、画面に表示しています。 セレクトボックスのバリューに設定する情報を作成します。 実装としてはObject.keyメソッドにより、quizDataのキーを配列として取り出しています。 次にlevelStrsの値からoptionタグの情報を作成しています。 optionタグの情報を配列で作成してからjoinで処理します。
displayQuestionView(){ const html = ` <p>ゲームを開始します</p> `; const parentElm = document.createElement(‘div’); parentElm.className =’question’; parentElm.innerHTML = html; this.rootElm.innerHTML = ”; this.rootElm.appendChild(parentElm); } //displayQuestionView } // class quiz	STARTボタンをクリックした時の処理についてです。プレイ画面となるHTMLを作成し、rootElmの中身をinnerHTMLで空にした上で反映しています。
new quiz(document.getElementById(‘app’)).init();	newでの呼び出し時に要素情報（rootElm）を引数として渡しています。

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

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

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

この表示されているどちらかの情報のURLをブラウザのアドレスバーにコピペしてみましょう。そしてQuizフォルダからquizGame.htmlファイルを選択します。

STARTボタンをクリックするとテキストが表示されます。

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

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