AI AIワークナビ AI Work Studio
メニュー
AIワークナビ ホーム

JavaScriptのReferenceError: score is not definedを直す｜変数スコープの基本

記事

JavaScriptを実行したときに、ReferenceError: score is not defined と表示されることがあります。これは、使おうとした変数が現在の場所から見えないときに起きるエラーです。この記事では、初心者がつまずきやすいブロックスコープを、修正前後のコードと実際の出力で確認します。

結論

if 文の波括弧の中で const や let を使って作った変数は、原則としてその波括弧の外から参照できません。外でも使う値は外側で宣言し、条件分岐の中ではその値を読む形にすると直せます。

発生している問題

次のコードでは、score を if 文の中で宣言したあと、外側の console.log で表示しようとしています。

if (true) {
  const score = 80;
}

console.log(score);

実行すると、Consoleには次のエラーが表示されます。

ReferenceError: score is not defined

原因

波括弧 { } で囲まれた範囲はブロックです。const と let でブロック内に宣言した変数は、そのブロックの中だけで使えます。今回の score は3行目の波括弧で有効範囲が終わるため、5行目からは見つけられません。

MDNの公式リファレンスでも、存在しない変数や現在のスコープから利用できない変数を参照すると ReferenceError になると説明されています。エラー文の変数名を確認し、宣言場所と使用場所の波括弧を見比べるのが最初の一歩です。

修正前コード

修正前は、値を作る場所と使う場所のスコープが分かれています。変数名のスペルは合っていても、見える範囲が違うためエラーになります。

if (true) {
  const score = 80;
}

console.log(score);

修正後コード

score を if 文の外側で宣言します。これなら条件判定の中と、その後の出力の両方から同じ値を参照できます。

const score = 80;

if (score >= 60) {
  console.log("合格");
}

console.log("点数:", score);

実行結果

合格
点数: 80

Codexのローカル実行環境と公開中のAI Work Studioで同じコードを実行し、修正前のエラーと修正後の2行の出力が一致することを確認しました。JavaScriptだけの例なのでPreviewの見た目は変わらず、結果はConsoleで確認します。標準入力は使いません。

よくある間違い

  • 変数名の打ち間違い: score と scroe は別の名前です。
  • 宣言より前に使う: let や const は、宣言行より前から値を読めません。
  • 関数の外から読む: 関数内で宣言した変数も、関数の外からは参照できません。
  • とりあえず var に変える: 動く場合はありますが、意図しない範囲から見える原因になります。まず宣言場所を整理しましょう。

AI Work Studioで試す手順

  1. AI Work Studioを開き、JavaScriptタブを選びます。
  2. 修正前コードを貼り付けて「JavaScriptを実行」を押します。
  3. Consoleへ切り替え、ReferenceError: score is not defined を確認します。
  4. 修正後コードへ置き換えて再実行し、「合格」と「点数: 80」が表示されることを確認します。

エラーの行番号と変数名を見ながら直す基本は、JavaScriptのエラーをConsoleで確認する方法でも解説しています。

まとめ

ReferenceError: score is not defined が出たら、変数が宣言されているか、変数名が一致しているか、使う場所から見えるスコープにあるかを確認します。今回のように外側でも使う値は外側で宣言すると、処理の流れも読みやすくなります。

関連記事

参考: MDN「ReferenceError: x is not defined」、MDN「Block statement」