エラーの種類
どの言語にもつきもののエラー2種類
- 構文エラー タイプミスとか書き方が違うのがこっち エラーが出るからすぐわかる
- 論理エラー 一通り動くけど結果が違うときはこっち 割と見つかりにくい
数字当て(当たらない)ゲームのデバッグ
number-game-errors.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Number guessing game</title> <style> html { font-family: sans-serif; } body { width: 50%; max-width: 800px; min-width: 480px; margin: 0 auto; } .lastResult { color: white; padding: 3px; } </style> </head> <body> <h1>Number guessing game</h1> <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or less. We'll tell you if your guess was too high or too low.</p> <div class="form"> <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Submit guess" class="guessSubmit"> </div> <div class="resultParas"> <p class="guesses"></p> <p class="lastResult"></p> <p class="lowOrHi"></p> </div> </body> <script> let randomNumber = Math.floor(Math.random()) + 1; const guesses = document.querySelector('.guesses'); const lastResult = document.querySelector('.lastResult'); const lowOrHi = document.querySelector('lowOrHi'); const guessSubmit = document.querySelector('.guessSubmit'); const guessField = document.querySelector('.guessField'); let guessCount = 1; let resetButton; function checkGuess() { let userGuess = Number(guessField.value); if(guessCount === 1) { guesses.textContent = 'Previous guesses: '; } guesses.textContent += userGuess + ' '; if(userGuess === randomNumber) { lastResult.textContent = 'Congratulations! You got it right!'; lastResult.style.backgroundColor = 'green'; lowOrHi.textContent = ''; setGameOver(); } else if(guessCount === 10) { lastResult.textContent = '!!!GAME OVER!!!'; setGameOver(); } else { lastResult.textContent = 'Wrong!'; lastResult.style.backgroundColor = 'red'; if(userGuess < randomNumber) { lowOrHi.textContent = 'Last guess was too low!'; } else if(userGuess > randomNumber) { lowOrHi.textContent = 'Last guess was too high!'; } } guessCount++; guessField.value = ''; guessField.focus(); } guessSubmit.addeventListener('click', checkGuess); function setGameOver() { guessField.disabled = true; guessSubmit.disabled = true; resetButton = document.createElement('button'); resetButton.textContent = 'Start new game'; document.body.appendChild(resetButton); resetButton.addeventListener('click', resetGame); } function resetGame() { guessCount = 1; const resetParas = document.querySelectorAll('.resultParas p'); for(let i = 0; i < resetParas.length; i++) { resetParas[i].textContent = ''; } resetButton.parentNode.removeChild(resetButton); guessField.disabled = false; guessSubmit.disabled = false; guessField.value = ''; guessField.focus(); lastResult.style.backgroundColor = 'white'; randomNumber = Math.floor(Math.random()) + 1; } </script> </html>
構文エラー
TypeError: guessSubmit.addeventListener is not a function number-game-errors.html:85:15
number-game-errors.html の85行15文字目でエラーがあるよって言う見かたをする
これはaddEventListener
の打ち間違い(構文エラー)
JavaScriptは関数名の大文字小文字を区別するから注意
TypeError: lowOrHi is null number-game-errors.html:77:7
77行目lowOrHi
のTextContent
に値を設定しようとしてエラー
コードの最初から辿って最初にlowOrHi
が出てくる宣言部
const lowOrHi = document.querySelector('lowOrHi');
console.log()
括弧内に書いた変数の値をコンソールに出力する関数
これでlowOrHi
を見るとNull
さっきの宣言部をよく見るとクラスを選択しているように見えてドット(.
)が抜けているからできていない
ついでに93行目addEventListener
の打ち間違いも潰しておく
論理エラー
実はこのゲームは予想する値が常に1になっている欠陥品
let randomNumber = Math.floor(Math.random()) + 1;
Math.random()
とMath.floor()
関数の入れ子に1を足してそれをrandomNumber
としている
Math.random()
は0以上1未満の乱数を返す関数
Math.floor()
は括弧内の値の少数点以下を切り捨てる関数
つまり0以上1未満の乱数の少数点以下を切り捨ててそれに1を足したものを代入
これじゃあ常に1になる
Math.random()
に100をかけて0以上100未満の乱数が出て来るようにする
その小数点以下を切り捨てそれに1を足すことで1以上101未満(100以下)の整数を取り出す
let randomNumber = Math.floor(Math.random() * 100) + 1;
これでバグ取りはおしまい
その他のよくあるエラー
SyntaxError: missing ; before statement
末尾にセミコロン(;
)がないよ
SyntaxError: missing ) after argument list
関数とかメソッドの閉じ括弧がないよ
SyntaxError: missing } after function body
関数の末尾の閉じ波括弧がないよ
SyntaxError: missing : after property id
オブジェクト初期化したいんだけどコロン(:
)がないからプロパティのキーと値がどこにあるかわからないよ
(関数定義の時に閉じ括弧を忘れると出ることがある)
SyntaxError: expected expression, got '[文字列]'
SyntaxError: unterminated string literal
文字列がどこまでかわからないよ たぶん'[文字列]'になってないよ
(文字列の最後のクォーテーションの付け忘れ)
参考: https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_went_wrong