【エラー】Uncaught ReferenceError: 〇〇 is not defined の原因と対応策

JavaScriptを使ってコードを書いていると、以下のようなエラーが出ることがあります。

Uncaught ReferenceError: 〇〇 is not defined

このエラーは、比較的よく見るエラーで、ちょっとした間違いが原因であることが多いため、焦らず見直すことで解決することができます。

サンプルコード

let yourName = 'taro';
let greet = 'こんにちは';

let message = `${greet}、${name}さん。今日もいい天気ですね。`;
// 'こんにちは、taroさん。今日もいい天気ですね。' と表示したい...

console.log(message);
// Uncaught ReferenceError: name is not defined

このエラーの原因

まずは、エラー文を日本語に翻訳してみましょう。

Uncaught ReferenceError: name is not defined

↓翻訳にかける

キャッチされていない参照エラー: nameは定義されていません

変数nameが定義されていないため、参照できずにエラーになってるよ〜〜ということみたいです。

JavaScriptでは、定義していない変数を使用しようとするとエラーになります。

サンプルコードでは、名前を変数yourNameとして定義しましたが、変数nameで参照しようとしていたためエラーになったわけです。

他にも、スペルミスなどが原因でも〇〇 is not defined エラーが出てしまいます。

let name = 'taro';
let greet = 'こんにちは';

let message = `${greet}、${nane}さん。今日もいい天気ですね。`;
// ×nane ○name

console.log(message);
// Uncaught ReferenceError: nane is not defined

このエラーの対応策

〇〇 is not defined エラーは、スペルミスなどのうっかりミスで起きやすいです。

人がコードを書いている以上、そのようなミスを0にすることは難しいでしょう。

そのため、ESLintなどの静的解析ツールを使うことで、機械的にミスを見つけることで事前に防ぐしかありません。

初心者でも簡単！ESLintの導入方法と基本的な使い方

JavaScriptやTypeScriptのコード品質を向上させるツール、ESLintの導入方法と基本的な使い方を初心者向けに解説。バグの早期発見やコードの一貫性維持、自動修正のメリットを活用し、より高品質なコードを実現しましょう。

maaengineerhouse.com

テキストエディタの機能にも、定義していない変数を使っていると教えてくれる機能がありますのでそれらを活用することで対策することができます。

まとめ

〇〇 is not defined エラーは、スペルミスなどの単純なミスで発生することが多いです。

エラーが発生したときには、焦らず落ち着いて見直しましょう。

Lintなどの静的解析ツールを使って事前に対策することもできます。