クイズ問題でのエラーハンドリングについて

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
JavaScriptとHTMLを使った10回クイズの問題を作っているさいのエラーハンドリング
を行いたいのですがうまくいきません。

該当のソースコード

{
    　const API_URL = 'https://opentdb.com/api.php?amount=10';
    
    　class Quiz {
    　　constructor(quizData) {
    　　　this._quizzes = quizData.results;
    　　　this._correctAnswersNum = 0;
    　　}
    
    　　getQuizCategory(index) {
    　　　return this._quizzes[index - 1].category;
    　　}
    
    　　getQuizDifficulty(index) {
    　　　return this._quizzes[index - 1].difficulty;
    　　}
    
    　　getNumOfQuiz() {
    　　　return this._quizzes.length;
    　　}
    
    　　getQuizQuestion(index) {
    　　　return this._quizzes[index - 1].question;
    　　}
    
    　　getCorrectAnswer(index) {
    　　　return this._quizzes[index - 1].correct_answer;
    　　}
    
    　　getIncorrectAnswers(index) {
    　　　return this._quizzes[index - 1].incorrect_answers;
    　　}
    
    　　countCorrectAnswersNum(index, answer) {
    　　　const correctAnswer = this._quizzes[index - 1].correct_answer;
    　　　if (answer === correctAnswer) {
    　　　　return this._correctAnswersNum++;
    　　　}
    　　}
    
    　　getCorrectAnswersNum() {
    　　　return this._correctAnswersNum;
    　　}
    　}
    
    　const titleElement = document.getElementById('title');
    　const questionElement = document.getElementById('question');
    　const answersContainer = document.getElementById('answers');
    　const startButton = document.getElementById('start-button');
    　const genreElement = document.getElementById('genre');
    　const difficultyElement = document.getElementById('difficulty');
    
    　startButton.addEventListener('click', () => {
    　　startButton.hidden = true;
    　　fetchQuizData(1);
    　});
    
    　const fetchQuizData = async (index) => {
    　　titleElement.textContent = '取得中';
    　　questionElement.textContent = '少々お待ち下さい';
    
    
    　　const response = await fetch(API_URL);
    　　const quizData = await response.json();
    　　const quizInstance = new Quiz(quizData);
    　　setNextQuiz(quizInstance, index);
    　};
    
    　const setNextQuiz = (quizInstance, index) => {
    　　while (answersContainer.firstChild) {
    　　　answersContainer.removeChild(answersContainer.firstChild);
    　　}
    
    　　if (index <= quizInstance.getNumOfQuiz()) {
    　　　makeQuiz(quizInstance, index);
    　　} else {
    　　　finishQuiz(quizInstance);
    　　}
    　};
    
    　const makeQuiz = (quizInstance, index) => {
    　　titleElement.innerHTML = `問題 ${index}`;
    　　genreElement.innerHTML = `【ジャンル】 ${quizInstance.getQuizCategory(index)}`;
    　　difficultyElement.innerHTML = `【難易度】 ${quizInstance.getQuizDifficulty(index)}`;
    　　questionElement.innerHTML = `【クイズ】${quizInstance.getQuizQuestion(index)}`;
    
    　　const answers = buildAnswers(quizInstance, index);
    
    　　answers.forEach((answer) => {
    　　　const answerElement = document.createElement('li');
    　　　answersContainer.appendChild(answerElement);
    
    　　　const buttonElement = document.createElement('button');
    　　　buttonElement.innerHTML = answer;
    　　　answerElement.appendChild(buttonElement);
    
    　　　buttonElement.addEventListener('click', () => {
    　　　　quizInstance.countCorrectAnswersNum(index, answer);
    　　　　index++;
    　　　　setNextQuiz(quizInstance, index);
    　　　});
    　　});
    　};
    
    　const finishQuiz = (quizInstance) => {
    　　titleElement.textContent = `あなたの正答数は${quizInstance.getCorrectAnswersNum()}です`
    　　genreElement.textContent = '';
    　　difficultyElement.textContent = '';
    　　questionElement.textContent = '再チャレンジしたい場合は下をクリック';
    
    　　const restartButton = document.createElement('button');
    　　restartButton.textContent = 'ホームに戻る';
    　　answersContainer.appendChild(restartButton);
    　　restartButton.addEventListener('click', () => {
    　　　location.reload();
    　　});
    　};
    
    　const buildAnswers = (quizInstance, index) => {
    　　const answers = [
    　　　quizInstance.getCorrectAnswer(index),
    　　　...quizInstance.getIncorrectAnswers(index)
    　　];
    　　return shuffleArray(answers);
    　};
    
    　const shuffleArray = ([...array]) => {
    　　for (let i = array.length - 1; i >= 0; i--) {
    　　　const j = Math.floor(Math.random() * (i + 1));
    　　　[array[i], array[j]] = [array[j], array[i]];
    　　}
    　　return array;
    　};
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container"></div>　 
    <h1 id="title">ようこそ</h1>  
    <h4 id="genre"></h4>
    <h4 id="difficulty"></h4>　
    <p id="question"><hr>以下のボタンをクリック<hr></p>
    <button id="start-button">開始</button>　　　　
    </div>
　<div id="answers"></div>
<script src="app.js"></script>
</body>
</html>

###エラーハンドリングをしたいと思われる箇所

    　　const response = await fetch(API_URL);
    　　const quizData = await response.json();
    　　const quizInstance = new Quiz(quizData);

試したこと

以下のコードのように成功時のコードを記述の欄にそのま該当コード
を記述してみましたがUncaught SyntaxError: Identifier 'response' has already been declared
とエラーが出てしまいました

fetch(API_URL, {
    method: 'GET'
  })
  .then(response => {
    if (!response.ok) {
      console.error('サーバーエラー');
    }
　　　　　　　　//成功時のコードを記述
    　const response = await fetch(API_URL);
    　　const quizData = await response.json();
    　　const quizInstance = new Quiz(quizData);
  })
  .catch(error => {
    console.error('通信に失敗しました', error);
  });

また新しくコードを書いてみましたが何も変化が起きず成功したいるのか、
分かりません。

 fetch('https://opentdb.com/api.php?amount=10')
    .then((response) => response.text())
    .then((text) => console.log(text))
    .catch((error) => console.log(error));
    fetch('file.txt')
  .then((response) => {
    if(response.ok) { // ステータスがokならば
      return response.text(); // レスポンスをテキストとして変換する
    } else {
      throw new Error();
    }
  })
  .then((text) => console.log(text))
  .catch((error) => console.log(error));


    
    　　setNextQuiz(quizInstance, index);

上手にエラーハンドリングできる方法を教えていただきたいです

補足

まだ始めたばかりで頭の悪い質問のなってしまい申し訳ございません
ヒントでも良いのでおしえもらいたいです。

Comments

[K_3578]

不具合か何かで同様の質問を2つ投稿してしまっているようなので、当質問は
削除リクエストを送って頂けると有難いです。

[K_3578]

削除リクエストは質問の高評価/低評価数が表示されている箇所にあるゴミ箱マークから送信する事が出来ます。

[asao112]

すみません。すぐに削除します。ありがとうございます

[mather]

「うまく作動しませんでした」という記載は曖昧です。「期待していた動作」「実際の問題のある動作」を記載して問題を明確にしましょう。

ブラウザの開発者ツールを開いてconsoleを確認してください。動作したときのログが出力されていますか？

[asao112]

すみませんUncaught SyntaxError: Identifier 'response' has already been declaredこのようなエラーが出てしまいました

[mather]

エラーメッセージを翻訳して意味を理解しましたか？

[asao112]

捕捉されていない構文エラー: 識別子「response」はすでに宣言されています
という意味でした

[Lhankor_Mhy]

「エラーハンドリング」という言葉を「デバッグ」という意味で使っていますか？

[asao112]

Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
すみませんエラーの内容はこちらでした
意味がUncatchedSyntaxError:waitは非同期機能およびモジュールのトップレベルボディだけで有効です。
という意味でした

[mather]

私の方で意味は理解しているので、単に翻訳して教えてほしいのではなく「あなた自身が構文エラーの意味を理解しているか」を聞きたいのです。エラーの意味が理解できないのであれば「わからない」と書きましょう。

[asao112]

すみません理解できませんでした

[mather]

「エラーハンドリング」というのは通常、正常な実行時に発生した問題に対して適切な処理（やり直す、エラーを画面に表示する、など）の意味で用いられます。
開発中の「うまく動作しない状況を解消したい」という意味では「デバッグ」という用語を使ったほうが良いでしょう。

[asao112]

はい。分かりました。気をつけます

[asao112]

わざわざ教えていただきましてありがとうございます。

[Lhankor_Mhy]

ああ、すみません、理解できました。
本当に「エラーハンドリング」をしたいのですね。
把握しました。

[Lhankor_Mhy]

当方の環境で試したところ、matherさんのご回答のコメントでご提示になっているコードで（エラーハンドリングができているかどうかはともかく）とりあえず動くようです。

どのような点に問題を感じていますか？

Answer 1

Uncaught SyntaxError: Identifier 'response' has already been declared

「 response はすでに宣言されています」と書かれています。

fetch(API_URL, {
  method: 'GET'
})
.then(response => {  // response 変数が使われている
  if (!response.ok) {
    console.error('サーバーエラー');
  }
　　　　//成功時のコードを記述
  const response = await fetch(API_URL); // response を宣言しているがすでに同名の変数がある
  const quizData = await response.json();
  const quizInstance = new Quiz(quizData);
})
.catch(error => {
  console.error('通信に失敗しました', error);
});

内容はこういうシンプルなエラーです。

また、 await に関してはこういったページを調べてみると良いでしょう。
非同期関数 - MDN

太字で以下の注意書きが書かれています。

キーワード await は、非同期関数の中でのみ有効です。非同期関数の外で使用した場合は SyntaxError となります。

今回該当しているのがこちらです。

Comments

[asao112]

```
const response = await fetch(API_URL);　
```
こちらはいらないということでしょうか
それと非同期関数の中でしかawaitは有効のならないということは、
async function宣言に直したほうがいいという子でしょうか？
理解の悪い質問で申し訳ございません、

[mather]

すでに書いたとおり、 response という変数名が重複しています。変数名は自由に設定できるので好きな名前に変えれば良いと思いますよ。
「API_URLへのアクセスが必要かどうか」はあなたの判断次第です。私には内容がわかりません。

async/awaitをどのように実装するかはあなた次第です。まずは試してみてから不明な点を聞いてください。
何から始めていいのかわからないような状況であれば、そもそもこの内容はあなたには難しすぎると思います。非同期関数の書き方の基礎からしっかり勉強し直したほうが良いと思います。

[asao112]

fetch(API_URL, {
method: 'GET'
})
.then(async (response1) => { //response 変数が使われている
if(!response1.ok){
consol.error('サーバーエラー');
}
//成功時のコードを記述
const response = await fetch(API_URL); //responseを宣言しているがすでに同名の変数がある
const quizData = await response.json();
const quizInstance = new Quiz(quizData);
setNextQuiz(quizInstance, index);
})
.catch(error => {
console.error('通信に失敗しました', error);
});

[asao112]

すみませんそうですよね、大変ご迷惑をかけてしまい申し訳ありません。
一応変数名を変え、asyncにしてみました

[mather]

もう一度冷静になって、書いているコードが何を実行しているのか一つ一つじっくり意味を理解してください。コピーして持ってきたものでは動きません。
特に、fetch(API_URL) については自分で気づいてもらいたいので敢えてコメントしませんでしたが、すでに同じことを実行していませんか？

Answer 2

現在のコードはこんな感じです

{
    const API_URL = 'https://opentdb.com/api.php?amount=10';
    class Quiz {
        constructor(quizData) {
            this._quizzes = quizData.results;
            this._correctAnswersNum = 0;
        }
        getQuizCategory(index) {
            return this._quizzes[index - 1].category;
        }
        getQuizDifficulty(index) {
            return this._quizzes[index - 1].difficulty;
        }
        getNumOfQuiz() {
            return this._quizzes.length;
        }
    getQuizQuestion(index) {
        return this._quizzes[index - 1].question;
    }
    getCorrectAnswer(index) {
        return this._quizzes[index - 1].correct_answer;
    }
    getIncorrectAnswers(index) {
        return this._quizzes[index - 1].incorrect_answers;
    }
    countCorrectAnswersNum(index, answer) {
        const correctAnswer = this._quizzes[index - 1].correct_answer;
        if (answer === correctAnswer) {
            return this._correctAnswersNum++;
        }
    }
    getCorrectAnswersNum() {
        return this._correctAnswersNum;
    }
}
const titleElement = document.getElementById('title');
const questionElement = document.getElementById('question');
const answersContainer = document.getElementById('answers');
const startButton = document.getElementById('start-button');
const genreElement = document.getElementById('genre');
const difficultyElement = document.getElementById('difficulty');
startButton.addEventListener('click', () => {
    startButton.hidden = true;
    fetchQuizData(1);
});
const fetchQuizData = async (index) => {
    titleElement.textContent = '取得中';
    questionElement.textContent = '少々お待ち下さい';
    const response = await fetch(API_URL);
    const quizData = await response.json();
    const quizInstance = new Quiz(quizData);
    fetch('https://opentdb.com/api.php?amount=10')
    .then((response) => response.text())
    .then((text) => console.log(text))
    .catch((error) => console.log(error));
    fetch('file.txt')
    .then((response) => {
        if(response.ok) { // ステータスがokならば
            return response.text(); // レスポンスをテキストとして変換する
        } else {
            throw new Error();
        }
    })
    .then((text) => console.log(text))
    .catch((error) => console.log(error));
    setNextQuiz(quizInstance, index);
};
const setNextQuiz = (quizInstance, index) => {
    while (answersContainer.firstChild) {
        answersContainer.removeChild(answersContainer.firstChild);
    }
    if (index <= quizInstance.getNumOfQuiz()) {
        makeQuiz(quizInstance, index);
    } else {
        finishQuiz(quizInstance);
    }
};
const makeQuiz = (quizInstance, index) => {
    titleElement.innerHTML = `問題 ${index}`;
    genreElement.innerHTML = `【ジャンル】 ${quizInstance.getQuizCategory(index)}`;
    difficultyElement.innerHTML = `【難易度】 ${quizInstance.getQuizDifficulty(index)}`;
    questionElement.innerHTML = `【クイズ】${quizInstance.getQuizQuestion(index)}`;
    const answers = buildAnswers(quizInstance, index);
    answers.forEach((answer) => {
        const answerElement = document.createElement('li');
        answersContainer.appendChild(answerElement);
        const buttonElement = document.createElement('button');
        buttonElement.innerHTML = answer;
        answerElement.appendChild(buttonElement);
        buttonElement.addEventListener('click', () => {
            quizInstance.countCorrectAnswersNum(index, answer);
            index++;
            setNextQuiz(quizInstance, index);
        });
    });
};
const finishQuiz = (quizInstance) => {
    titleElement.textContent = `あなたの正答数は${quizInstance.getCorrectAnswersNum()}です`
    genreElement.textContent = '';
    difficultyElement.textContent = '';
    questionElement.textContent = '再チャレンジしたい場合は下をクリック';
    const restartButton = document.createElement('button');
    restartButton.textContent = 'ホームに戻る';
    answersContainer.appendChild(restartButton);
    restartButton.addEventListener('click', () => {
        location.reload();
    });
};
const buildAnswers = (quizInstance, index) => {
    const answers = [
        quizInstance.getCorrectAnswer(index),
        ...quizInstance.getIncorrectAnswers(index)
    ];
    return shuffleArray(answers);
};
const shuffleArray = ([...array]) => {
    for (let i = array.length - 1; i >= 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
};
}